Asp.Net MasterPage和JQuery

我有一个jQueryyscript，与没有masterpages的asp.net页面一起使用。当页面获得对masterpage的引用时，脚本停止工作。Asp.Net MasterPage和JQuery

母版：在头：

<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); 
    }

这里是helppage是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。该脚本正在运行，helpviewer显示出来，但文本未加载。

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

任何想法最新怎么了？

来源

2011-10-07 Malin Palm Friberg

为我在所有浏览器上工作良好。 – Phill

.load似乎没问题，问题必须出现在masterpage本身。你能否提供它的源代码？ – Andrei

那里有所有的代码在主页面。唯一缺少的是使用引用。我已经更新了我的问题，测试页面不工作。 –

ID（或任何其他容器）获得错位由于道路命名容器的工作，所以我喜欢使用jQuery的两端有选择参考我的服务器控件：

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

由于错位的ID总是有正确的控件的名称，这只是工作。损坏的ID看起来像这样：MasterPage1_ctl02_MyControlName

我见过一些人批评这种方法相对比在Control.ClientID连接相对较慢，这是我以前的做法。但是避免使用Control.ClientID意味着您可以将JavaScript存储在单独的文件中，这是最佳做法。有时候，如果你变得非常动态，在服务器上做JS是不可避免的。但是在一个单独的文件中，您已经有了更好的分离关系，并且Visual Studio为您提供了一些智能感知，等等。

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

更多关于命名容器：MSDN Article

来源

2011-10-07 12:15:18

谢谢你的帮助。它工作正常！ :) –

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

来源

2011-10-07 11:05:05 apros

我有复制并将help.aspx的代码复制到我的原始问题中。如果它有帮助。 –

你对！ :)谢谢你指出给我。该ID是错误的。你有任何消化如何解决这个问题？ –

将你的图像元素作为服务器控件（添加atrr runat =“server”）并在脚本中定义var id ='<％= Image1.ClientID％>'; – apros

在服务器端生成JavaScript时，应该使用控件的ClientID属性而不是ID属性。这同样适用于客户端：

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

在服务器端：在母版页

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

来源

2011-10-07 11:56:32 Icarus

当你使用一个母版页，所有嵌套控件（这基本上是所有的人）得到它们的ID改变。

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

来源

2011-10-07 12:49:47

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

Asp.Net MasterPage和JQuery

回答

相关问题