logo标签列表

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

jqueryhtmlasp.netwebformsvisual-studio-2013
6
当你在ASP.NET Web Forms项目中选择"新建 > 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封装内吗？
2个回答
9
这是我自己的做法。
<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>

如您所见，您只需将其放置在

标签中。希望这可以帮到您！

1
把script放在页面底部会更好，这是一个好的实践。 - Wilfredo P
1
你的第二个代码片段使用了母版页。你可以在asp:content标签内添加脚本引用，但最好/更简单的方法是将引用添加到母版页中。
即使我仅在一个页面上使用 jQuery/jQueryUI？ - B. Clay Shannon-B. Crow Raven
1
如果您只在一个页面上使用它，那么您可以在该页面的内容标签中引用脚本。请注意，在页面上多次包含对jquery的引用可能会导致问题，因此，如果您稍后决定将其添加到主页面，则可能需要从该页面中删除引用才能使其正常工作。 - Jason P
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接