如何将jQuery UI代码添加到ASP.NET Web窗体页面？

B. Clay Shannon 发表于 Dev

克莱·香农

在ASP.NET Web窗体项目中选择“新建”>“ 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 / Web Pages应用程序/站点中），即引用必要的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封装中吗？

谦卑的

这就是我的方法

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