Asp.Net MasterPage 和 JQuery
我有一个 jqueryscript，可以在没有母版页的情况下使用 asp.net 页面。当页面获得对母版页的引用时，脚本停止工作。
母版页： 在标题中：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
在代码隐藏处：
protected void Page_Load(object sender, EventArgs e)
{
string script = "$(document).ready(function () { $(\"img[src*='help']\").click(function () { var id = $(this).attr(\"id\"); $(\"#helpviewer\").toggle(400); $(\"#helpviewer\").load(\"" + Page.ResolveUrl("~/help/help.aspx") + " \" + \"#\" + id); return false; }); });";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), Guid.NewGuid().ToString(), script, true);
}
这是 jquery 加载的帮助页面：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="help.aspx.cs" Inherits="help_help" meta:resourcekey="PageResource1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div id="helpUploadFile">
<asp:literal id="Literal1" runat="server" meta:resourcekey="Literal1Resource1"></asp:literal>
</div>
<div id="helpPictureArchive">
<asp:literal id="Literal2" runat="server" meta:resourcekey="Literal2Resource1"></asp:literal>
</div>
<div id="image1">
<asp:literal id="Literal3" runat="server" meta:resourcekey="Literal3Resource1"></asp:literal>
</div>
</form>
</body>
</html>
我相信我的问题在于 .load。脚本正在运行，帮助查看器已显示，但文本未加载。
这是一个没有母版页的工作测试页。 和 这里是带有母版页的测试页。只需单击图像即可查看 jquery。
知道出了什么问题吗？
I have a jqueryscript that works with asp.net pages without masterpages. When the page gets an reference to a masterpage the script stop working.
The masterpage:
Within the header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
At codebehind:
protected void Page_Load(object sender, EventArgs e)
{
string script = "$(document).ready(function () { $(\"img[src*='help']\").click(function () { var id = $(this).attr(\"id\"); $(\"#helpviewer\").toggle(400); $(\"#helpviewer\").load(\"" + Page.ResolveUrl("~/help/help.aspx") + " \" + \"#\" + id); return false; }); });";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), Guid.NewGuid().ToString(), script, true);
}
Here is the helppage that jquery loads:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="help.aspx.cs" Inherits="help_help" meta:resourcekey="PageResource1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div id="helpUploadFile">
<asp:literal id="Literal1" runat="server" meta:resourcekey="Literal1Resource1"></asp:literal>
</div>
<div id="helpPictureArchive">
<asp:literal id="Literal2" runat="server" meta:resourcekey="Literal2Resource1"></asp:literal>
</div>
<div id="image1">
<asp:literal id="Literal3" runat="server" meta:resourcekey="Literal3Resource1"></asp:literal>
</div>
</form>
</body>
</html>
I belive my problem lies in the .load. The script is working, the helpviewer is shown up but the text is not loading.
Here is a working testpage without masterpage. and here is a testpage with the masterpage. Just click at the image to se the jquery.
Any idea whats wrong?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
由于命名容器的工作方式，母版页（或任何其他容器）中的 ID 会被损坏，因此我喜欢使用 jQuery 的末尾带有选择器的服务器控件来引用服务器控件：
由于损坏的 ID 始终在右侧具有控件名称，因此这可以正常工作。损坏的 ID 看起来像这样： MasterPage1_ctl02_MyControlName
我看到一些人批评这种方法与 Control.ClientID 中的连接相比相对较慢，这就是我过去的做法。但避免 Control.ClientID 意味着您可以将 JavaScript 存储在单独的文件中，这是最佳实践。有时，如果您变得非常动态，在服务器上执行 JS 是不可避免的。但在单独的文件中，您可以更好地分离关注点，并且 Visual Studio 为您提供一些智能感知，等等。
这是一个相关问题： jQuery 选择器：Id 结尾为？ 有关
命名容器的更多信息：< a href="http://msdn.microsoft.com/en-us/library/system.web.ui.control.namingcontainer.aspx" rel="nofollow noreferrer">MSDN 文章
IDs in master pages (or any other container) get mangled due to the way naming containers work, so I like to reference my server controls using jQuery's ends with selector:
Since the mangled IDs always have the control name on the right, this just works. The mangled ID would look something like this: MasterPage1_ctl02_MyControlName
I've seen some people criticize this approach as relatively slow compared to concatenating in Control.ClientID, which is how I used to do it. But avoiding Control.ClientID means you can store your JavaScript in a seperate file, which is a best practice. Sometimes, if you're getting extremely dynamic, doing JS on the server is unavoidable. But in a seperate file you've got better seperation of concerns, and Visual Studio gives you some intellisense, and so on.
Here's a related question: jQuery Selector: Id Ends With?
More about naming containers: MSDN Article
当您在服务器端生成 JavaScript 时，您应该使用控件的 ClientID 属性而不是 ID 属性。客户端也是如此：
在服务器端：
When you generate JavaScript on the server side, you should use the control's ClientID property and not the ID property. The same goes for the client side:
On the server side:
当您使用母版页时，所有嵌套控件（基本上是所有控件）的 ID 都会发生更改。
如果您使用的是 asp.net 4.0 或更高版本，您可以 添加
ClientIdMode="Static"添加到您的控件，并且当您使用母版页时它们不会更改 ID。When you use a master page, all nested controls (which is basically all of them) get their IDs changed.
If you are using asp.net 4.0 or greater, you can add
ClientIdMode="Static"to your controls, and they will not change IDs when you use a master page.我可以假设，当您将页面移至 MasterPage 时，页面上的所有 id 属性都会发生更改（当您使用母版页时，asp.net 会为其添加一些前缀）。但是您的“~/help/help.aspx”页面可能不知道这一点，因此 js 脚本无法在该页面上找到文本。
I can suppose that when you move your page into MasterPage, all id attributes on your page would be changed (asp.net add for it some prefix in the case when you use Master page). But your "~/help/help.aspx" page possible don't know about this, so js script cannot find text on that page.