2013-10-28 18 views
5

, bu kod ile bir sayfa olsun:ASP.NET Web Formları sayfalarına jQuery UI kodu nasıl eklenir? Bir ASP.NET Web Formları projede Yeni> Web Formları seçtiğinizde

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DuckbilledPlatypus.aspx.cs" 
Inherits="DuckbilledPlatypus" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 

    </div> 
    </form> 
</body> 
</html> 

jQuery kodunu eklemek tipik olarak aynı şekilde yapılır şüphesiz (örneğin, Razor/Web Sayfaları uygulamalarında/sitelerinde) gerekli jQuery ve jQueryUI * .js ve * .css dosyalarına bakın ve jQuery'yi bir script öğesinde ekleyin.

<%@ Page Title="About" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
CodeFile="About.aspx.cs" Inherits="About" %> 

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
    <h2><%: Title %>.</h2> 
    <h3>Your application description page.</h3> 
    <p>Use this area to provide additional information.</p> 
</asp:Content> 

Nasıl jQuery/jQueryUI kod böyle eklenir: (ve "Contact" "Hakkında") Ancak

, sağlanan formlar/sayfalar kod bu tür var mı? * .js ve * .css referanslarının yanı sıra betimleme bölümü sadece asp: İçerik kapsülleme içine eklenebilir mi?

cevap

8

..

<script src="Scripts/jquery-ui-1.10.3.min.js"></script> 
<script src="Plugins/jquery.cookie.js"></script> 
<link href="Content/themes/Smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" /> 
<script> 
    /** 
     *This script creates a cookie that expires every 7 days. If you don't have this cookie 
     *then the popup shows. If the cookie isn't expired, the popup doesn't show. 
    **/ 
    $(document).ready(function() { 
     if ($.cookie('modal_shown') == null) { 
      $.cookie('modal_shown', 'yes', { expires: 7, path: '/' }); 
      $('#popup').dialog({ 
       modal: true, 
       buttons: { 
        Ok: function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 
     } 
    }); 
</script> 
<div id="popup" style="display: none" title="New Release!"> 
    <span class="ui-icon-alert" style="float: left; margin: 0 7px 50px 0;"></span> 
    <p><b>Issues Resolved</b></p> 
    <ul> 
     <li>New thing 1</li> 
     <li>New thing 2</li> 
     <li>New thing 3</li> 
    </ul> 
</div> 
<h2><%: Title %>.</h2> 
<h3>Your application description page.</h3> 
<p>Use this area to provide additional information.</p> 

Bu ana sayfasını kullanarak biridir

. Anlayacağınız gibi Web Formu, şöyle yapacağım bir ana sayfasını kullanarak değil İçin

..

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DuckbilledPlatypus.aspx.cs" 
Inherits="DuckbilledPlatypus" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<script src="Scripts/jquery-2.0.2.min.js"></script> 
    <script src="Scripts/jquery-ui-1.10.3.min.js"></script> 
    <script src="Plugins/jquery.cookie.js"></script> 
    <link href="Content/themes/Smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" /> 
    <script> 
     /** 
      *This script creates a cookie that expires every 7 days. If you don't have this cookie 
      *then the popup shows. If the cookie isn't expired, the popup doesn't show. 
     **/ 
     $(document).ready(function() { 
      if ($.cookie('modal_shown') == null) { 
       $.cookie('modal_shown', 'yes', { expires: 7, path: '/' }); 
       $('#popup').dialog({ 
        modal: true, 
        buttons: { 
         Ok: function() { 
          $(this).dialog("close"); 
         } 
        } 
       }); 
      } 
     }); 
    </script> 
    <div id="popup" style="display: none" title="New Release!"> 
     <span class="ui-icon-alert" style="float: left; margin: 0 7px 50px 0;"></span> 
     <p><b>Issues Resolved</b></p> 
     <ul> 
      <li>New thing 1</li> 
      <li>New thing 2</li> 
      <li>New thing 3</li> 
     </ul> 
    </div> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 

    </div> 
    </form> 
</body> 
</html> 

, sadece etiketi içinde koymak olacaktır. Umarım bu yardımcı olur!

+0

Sayfadaki bottonda 'betiği' çok daha iyi koyar, bu iyi bir uygulamadır. –

1

İkinci snippet'iniz bir ana sayfa kullanıyor. Komut dosyası referanslarını asp:content etiketlerine ekleyebilirsiniz, ancak referansları ana sayfaya eklemek daha iyi/basit olacaktır. Bu ben de benimkini nasıl

+0

Tek sayfada jQuery/jQueryUI kullanıyorum bile mi? –

+1

Gerçekten sadece bir sayfada kullanıyorsanız, o sayfadaki içerik etiketlerindeki komut dosyalarını referans alabilirsiniz. Bir sayfada birden fazla jquery'ye yapılan atıfların sorunlara neden olabileceğini unutmayın. Bu nedenle, daha sonra ana sayfaya eklemeyi seçerseniz, bu sayfadaki referansları kaldırıncaya kadar bu sayfada çalışmayı durdurabilir. –

İlgili konular