如何将 jQuery UI 代码添加到 ASP.NET Web 窗体页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19642943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add jQuery UI code to ASP.NET Web Forms pages?
提问by B. Clay Shannon
When you select New > Web Forms in an ASP.NET Web Forms project, you get a page with this code:
当您在 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>
Adding jQuery code is no doubt done the same way as is typical (such as, in Razor / Web Pages apps/sites) namely reference the necessary jQuery and jQueryUI *.js and *.css files, and then add the jQuery in a script element.
毫无疑问，添加 jQuery 代码的方式与典型（例如，在 Razor/Web Pages 应用程序/站点中）相同，即引用必要的 jQuery 和 jQueryUI *.js 和 *.css 文件，然后在脚本中添加 jQuery元素。
However, the provided forms/pages ("About" and "Contact") have this sort of code:
但是，提供的表单/页面（“关于”和“联系方式”）有这样的代码：
<%@ 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>
How is jQuery/jQueryUI code added to such? Can the *.js and *.css references, as well as the script section, simply be added within the asp:Content encapsulation?
jQuery/jQueryUI 代码是如何添加到其中的？是否可以将 *.js 和 *.css 引用以及脚本部分简单地添加到 asp:Content 封装中？
回答by Humpy
This is how I do mine..
这就是我的做法..
<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>
This is the one using the master page.
这是使用母版页的页面。
For the Web Form not using a master page, you will do it like..
对于不使用母版页的 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>
As you can tell, you would just put it within the tag. I hope this helps!
如您所知，您只需将其放在标签中即可。我希望这有帮助！
回答by Jason P
Your second snippet is using a master page. You could add the script references within the asp:contenttags, but it would probably be better/simpler to add the references to the master page instead.
您的第二个代码段正在使用母版页。您可以在asp:content标记中添加脚本引用，但将引用添加到母版页可能会更好/更简单。
