Asp.Net MasterPage 和 JQuery答案

【问题标题】：Asp.Net MasterPage and JQueryAsp.Net MasterPage 和 JQuery
【发布时间】：2011-10-07 09:52:17
【问题描述】：

我有一个 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。脚本正在运行，显示了帮助查看器，但没有加载文本。

Here is a working testpage without masterpage. 和 here is a testpage with the masterpage。只需点击图片即可查看 jquery。

知道有什么问题吗？

【问题讨论】：

在所有浏览器上都能正常工作。
.load 似乎没问题，问题一定出在母版页本身。能否提供它的源代码？
母版页中有所有代码。唯一缺少的是使用引用。我已经用不起作用的测试页更新了我的问题。
@MalinPalmFriberg：欢迎来到 Stackoverflow，不要忘记为帮助过你的人投票并接受最佳答案。这样您的问题以后可能会对其他人有所帮助。
您已将页面更改为WebContentForm 对吗？

标签： jquery asp.net master-pages

【解决方案1】：

由于命名容器的工作方式，母版页（或任何其他容器）中的 ID 会被破坏，所以我喜欢使用带有选择器的 jQuery 结尾来引用我的服务器控件：

$("[id$='MyControlName']");

由于损坏的 ID 总是在右侧有控件名称，所以这很有效。损坏的 ID 看起来像这样：MasterPage1_ctl02_MyControlName

我看到一些人批评这种方法与在 Control.ClientID 中进行连接相比相对较慢，而我过去就是这样做的。但是避免 Control.ClientID 意味着您可以将 JavaScript 存储在单独的文件中，这是最佳实践。有时，如果你变得非常动态，在服务器上做 JS 是不可避免的。但是在一个单独的文件中，您可以更好地分离关注点，Visual Studio 为您提供了一些智能感知，等等。

这是一个相关的问题：jQuery Selector: Id Ends With?

有关命名容器的更多信息：MSDN Article

【讨论】：

【解决方案2】：

当您在服务器端生成 JavaScript 时，您应该使用控件的 ClientID 属性而不是 ID 属性。客户端也是如此：

var control = document.getElementById('<%=controlid.ClientID%>');

在服务器端：

@"<script .....
 var control = document.getElementById('"+controlid.ClientID+"');";
 // etc
 ";

【讨论】：

【解决方案3】：

当您使用母版页时，所有嵌套控件（基本上是全部）都会更改其 ID。

如果您使用的是asp.net 4.0或更高版本，您可以add ClientIdMode="Static" to your controls，并且在您使用母版页时他们不会更改ID。

【讨论】：

+1 这可能会起作用，但使用ClientID 可能更容易。

【解决方案4】：

我可以假设当您将页面移动到 MasterPage 时，页面上的所有 id 属性都会更改（asp.net 在您使用 Master Page 的情况下为其添加一些前缀）。但是您的“~/help/help.aspx”页面可能不知道这一点，因此js脚本无法在该页面上找到文本。

【讨论】：

我已将 help.aspx 的代码复制并粘贴到我原来的问题中。如果有帮助的话。
你说得对！ :) 感谢您向我指出。身份证错了。您对如何解决问题有什么建议吗？
将您的图像元素作为服务器控件（添加 atrr runat="server"）并在脚本中定义 var id = '';