Làm cách nào để thêm mã giao diện người dùng jQuery vào các trang Biểu mẫu web ASP.NET?

Khi bạn chọn New> Web Forms trong một dự án Web Forms ASP.NET, bạn sẽ có một trang với mã này:Làm cách nào để thêm mã giao diện người dùng jQuery vào các trang Biểu mẫu web ASP.NET?

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

Thêm mã jQuery là không có nghi ngờ thực hiện theo cùng một cách như là điển hình (ví dụ như, trong các ứng dụng/trang web của Razor/Web Pages cụ thể là tham khảo các tệp jQuery và jQueryUI * .js và * .css cần thiết, sau đó thêm jQuery trong phần tử script.

Tuy nhiên, cung cấp các hình thức/trang ("Giới thiệu" và "Liên hệ") có loại mã này:

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

như thế nào jQuery/jQueryUI đang thêm vào như vậy? Các tham chiếu * .js và * .css, cũng như phần kịch bản, chỉ cần được thêm vào trong gói asp: Content encapsulation?

Nguồn

2013-10-28 B. Clay Shannon

Đây là cách tôi làm tôi ..

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

Đây là một cách sử dụng trang chủ.

Đối với mẫu Web không sử dụng một trang chủ, bạn sẽ làm điều đó như ..

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

Như bạn có thể nói, bạn sẽ chỉ cần đặt nó trong thẻ. Tôi hi vọng cái này giúp được!

Nguồn

2013-10-28 19:12:01 Humpy

Tốt hơn là đặt tập lệnh 'vào botton trên trang, Đó là một thực hành tốt. –

Đoạn thứ hai của bạn đang sử dụng trang chính. Bạn có thể thêm tham chiếu tập lệnh trong các thẻ asp:content, nhưng có lẽ sẽ tốt hơn/đơn giản hơn để thêm tham chiếu đến trang cái thay thế.

Nguồn

2013-10-28 19:03:58

Thậm chí nếu tôi chỉ sử dụng jQuery/jQueryUI trên một trang? –

Nếu bạn thực sự chỉ sử dụng nó trên một trang, thì bạn có thể tham khảo các tập lệnh trong các thẻ nội dung trên trang đó. Lưu ý rằng bao gồm tham chiếu đến jquery nhiều lần trên một trang có thể gây ra sự cố, vì vậy nếu bạn quyết định sau đó thêm nó vào trang cái, nó có thể ngừng hoạt động trên trang này cho đến khi bạn xóa các tham chiếu khỏi trang này. –

Làm cách nào để thêm mã giao diện người dùng jQuery vào các trang Biểu mẫu web ASP.NET?

Trả lời

Các vấn đề liên quan