如何將jQuery UI代碼添加到ASP.NET Web窗體頁面？

當您選擇在ASP.NET Web窗體項目新建> Web窗體，你會得到一個頁面，這個代碼：如何將jQuery UI代碼添加到ASP.NET Web窗體頁面？

<%@ 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代碼是毫無疑問的完成是典型的相同方式（如，在Razor /網頁應用/網站中），即引用必要的jQuery和jQueryUI * .js和* .css文件，然後將jQuery添加到腳本元素中。

然而，所提供的表格/頁（「關於」和「聯繫」）有這種代碼：

<%@ 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>

如何被添加到這樣的jQuery/jQueryUI的代碼？ * .js和* .css引用以及腳本部分是否可以簡單地添加到asp：Content封裝中？

來源

2013-10-28 B. Clay Shannon

這是我做我的..

<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>

這是使用母版頁的一個。

Web窗體不使用母版頁，你會做這樣..

<%@ 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>

正如你所知道的，你只需把它放在標籤內。我希望這有幫助！

來源

2013-10-28 19:12:01 Humpy

把'script'放在頁面底部好得多，這是一個好習慣。 –

您的第二個片段正在使用母版頁。您可以在asp:content標記中添加腳本引用，但將引用添加到母版頁可能會更好/更簡單。

來源

2013-10-28 19:03:58

即使我只在一個頁面上使用jQuery/jQueryUI？ –

如果你真的只在一個頁面上使用它，那麼你可以在該頁面上的內容標籤中引用腳本。請注意，在頁面上多次引用jquery可能會導致問題，因此如果您稍後決定將其添加到母版頁，則可能會停止在此頁面上工作，直到您從該頁面中刪除引用。 –

如何將jQuery UI代碼添加到ASP.NET Web窗體頁面？

回答

相關問題