【发布时间】：2008-11-15 17:28:51
【问题描述】：
只要不涉及母版页，我就可以获得简单的示例以正常工作。我要做的就是单击一个按钮，并使用母版页在.js 文件中使用javascript 说“hello world”。非常感谢任何帮助:)
【问题讨论】：
标签： asp.net jquery master-pages
【发布时间】：2008-11-15 17:28:51
【问题描述】：
编辑
正如@Adam 在 cmets 中指出的那样，有一个原生的 jQuery 机制，它基本上与我原来的答案中的 hack 做同样的事情。使用jQuery你可以做到
$('[id$=myButton]').click(function(){ alert('button clicked'); });
我的 hack 最初是作为 ASP.NET 的原型工作开发的，我将其改编为原始答案。请注意，jQuery 基本上在底层做同样的事情。不过，我建议使用 jQuery 方式，而不是实现我的 hack。
原始答案留给评论上下文
当您使用母版页时，ASP.NET 会破坏相关页面上控件的名称。您需要找到一种方法来找到正确的控件来添加处理程序（假设您使用 javascript 添加处理程序）。
我使用这个函数来做到这一点：
function asp$( id, tagName ) {
var idRegexp = new RegExp( id + '$', 'i' );
var tags = new Array();
if (tagName) {
tags = document.getElementsByTagName( tagName );
}
else {
tags = document.getElementsByName( id );
}
var control = null;
for (var i = 0; i < tags.length; ++i) {
var ctl = tags[i];
if (idRegexp.test(ctl.id)) {
control = ctl;
break;
}
}
if (control) {
return $(control.id);
}
else {
return null;
}
}
然后你可以这样做：
jQuery(asp$('myButton','input')).click ( function() { alert('button clicked'); } );
您的子页面上有以下内容
<asp:Button ID="myButton" runat="server" Text="Click Me" />
【讨论】：
-
我对此很陌生，不知道名称修改。我稍后会试一试。我很感激。
-
习惯于在浏览器上使用“查看源代码”（或等效项）。这使您不仅可以检查您的页面是否按照您希望的方式呈现，还可以从其他人的页面中学习技巧。
-
这是一个故意的错字'$asp' v 'asp$'吗？我无法让它工作 - 它可以控制控制但 jQuery 调用由于某种原因不起作用
-
你过度设计了这个。您可以将整个函数替换为 $('[id$=myButton]').click(function(){ alert('button clicked'); });
-
实际上，这是在我大量使用 jQuery 之前，而 hack 是一个原型替代品，其用法适用于 jQuery。我已经转向 ASP.NET MVC，谢天谢地，我完全不用担心名称错误。
如果您的站点在其他文件夹中有内容页面，在src路径中使用Page的ResolveUrl方法将确保您的js文件始终可以找到：
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.2.6.min.js") %>' ></script>
【讨论】：
-
当我把这个是标题标签并运行时，页面错误并提供这个控件集合无法修改，因为控件包含代码块（即 ）。说明：执行当前 Web 请求期间发生未处理的异常。请查看堆栈跟踪以获取有关错误及其源自代码的位置的更多信息。异常详细信息：System.Web.HttpException：无法修改 Controls 集合，因为该控件包含代码块（即 ）。
-
粘贴自@Jos 建议：作为对@Sarawut 评论的回答，例如，当您使用主题时，您会遇到他的问题。主题将尝试向头部添加控件，但是当头部中已经有 标记时，这将失败。为了防止这种情况，您可以通过代码添加脚本（在母版页中）：
Public Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Dim lit As New Literal() lit.Text = String.Format("<script type='text/javascript' src='{0}'><" & "/script>", ResolveUrl("~/Script/jquery-1.6.1.js")) Page.Header.Controls.Add(lit) End Sub -
我不得不切换回使用 asp.net webforms，您的回答解决了我的问题，因为我无法使用 @Url.Content 的 mvc 3 razor 语法 ...例如 谢谢！
确保将 jQuery 添加到母版页中。鉴于您有此控制权：
<asp:Button ID="myButton" runat="server" Text="Submit" />
你可以用这个连接javascript：
$(document).ready(function() {
$('[id$=myButton]').click(function() { alert('button clicked'); });
});
$(document).ready() 在 DOM 完全加载时触发，并且所有元素都应该在那里。你可以进一步简化这个
$(function() {});
选择器语法$('[id$=myButton]') 根据元素的 id 属性搜索元素，但只匹配字符串的结尾。相反，'[id^=myButton]' 将匹配开头，但为了过滤掉唯一没有用的唯一ID。您可以在 jQuery 中使用更多有用的选择器。 Learn them all，你的很多工作都会为你完成。
问题在于 ASP.Net 为每个元素创建了唯一的 id 和 name 属性，这使得查找它们变得困难。过去您需要将 UniqueID 属性从服务器传递给 javascript，但 jQuery 使这变得不必要。
借助 jQuery 选择器的强大功能，您可以将 javascript 与服务器端完全分离，并直接在您的 javascript 代码中连接事件。您不必再将 javascript 添加到标记中，这有助于提高可读性并使重构变得更加容易。
【讨论】：
只需将<script type="text/javascript" src="jquery.js" /> 标记移动到母版页的head 标记中。然后你就可以在所有内容页面中使用 jquery 了。
在 jQuery 中使用母版页没有什么神奇之处。
【讨论】：
亚当的解决方案是最好的。简单！
母版页：
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
内容页面：
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
$(document).ready(function () {
$("[id$=AlertButton]").click(function () {
alert("Welcome jQuery !");
});
});
</script>
</asp:Content>
按钮在哪里
<asp:Button ID="AlertButton" runat="server" Text="Button" />
【讨论】：
引用MasterPage头部的Jquery .js文件如下：
<script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script>
（有些浏览器不喜欢以 /> 结尾）
然后你可以写类似的东西
$('#<%= myBtn.ClientID%>').show()
在您的 javascript 中，确保在您的客户端代码中引用 ASP.Net 控件时使用 ClientId。这将处理控件名称和 ID 的任何“修改”。
【讨论】：
-
我应该预料到这会起作用吗？ $('#').click(function() { alert('Hello world!'); });此代码在我的 .js 文件中。我知道我已经正确设置了所有内容，因为如果我从页面源复制“损坏”的 id，它就可以正常工作。
-
语法仅适用于 .aspx 文件。所以如果你想使用它，你需要把你的脚本放在你的 aspx 文件中的
母版页：
jQuery 库位于母版页中。查看路径是否被正确引用。您可能希望像这样添加额外的文档：
<head>
<script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script>
<% if (false) { %>
<script type="text/javascript" src="/Scripts/jquery-1.2.6-vsdoc.js"></script>
<% } %>
</head>
母版页：
<head>
<script type="text/javascript">
$(document).ready(
function()
{
alert('Hello!');
}
);
</script>
</head>
内容页面和用户控件的代码隐藏：
this.textBox.Attributes.Add("onChange",
String.Format("passElementReferenceToJavascript({0})", this.textBox.ClientID));
【讨论】：
看看这篇文章：
http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx
还解释了如何在 Visual Studio 中为 jQuery 获取智能感知。
【讨论】：
当页面与母版页面一起呈现时，控件 ID 在页面呈现时会发生变化，因此我们不能像 #controlid 这样在 jQuery 中引用它们。相反，我们应该尝试使用input[id$=controlid]。如果控件呈现为输入控件或锚标记，则在 jQuery 中使用 a[id$=controlid]。
【讨论】：
如果有人想访问标签，这里是语法
$('[id$=lbl]').text('Hello');
lbl 是标签 ID，标签中显示的文本是“Hello”
【讨论】：
我也从最简单的示例开始，但没有运气。我最后不得不在母版页的<head> 部分的outside 中添加jquery .js 文件。这是我可以在 Firefox 中使用任何东西的唯一方法（还没有尝试过其他浏览器）。
我还必须使用绝对地址引用 .js 文件。不完全确定那是怎么回事。
【讨论】：
Adam Lassek 与使用 jQuery 选择器相关联，但我认为它值得明确地按类调用选择元素，而不是它们的 id。
例如而不是$("#myButton").click(function() { alert('button clicked'); });
改为使用$(".myButtonCssClass").click(function() { alert('button clicked'); });
并将类添加到按钮：
<asp:Button ID="myButton" runat="server" Text="Submit" CssClass="myButtonCssClass" />
这样做的好处是不必担心两个控件 id 是否以相同的方式“结束”，此外还可以一次将相同的 jQuery 代码应用于多个控件（使用相同的 css 类）。
【讨论】：
问题 --> 在使用 Site.Master 页面时，控件 ID 名称（对于 ASP 控件）获取以它们为前缀的 ContentPlaceHolderID。 （请注意，这对于非 asp 控件来说不是问题，因为它们不会被“重新解释”——即它们只是以书面形式出现）
-
解决方案：
- 最简单 --> 将 ClientIDMode="Static" 添加到 aspx 页面中的 asp 控件定义（或使用属性设置）
- 替代方案包括：
- 在 js 代码中硬编码 ContentPlaceHolderID 名称，例如“#ContentPlaceHolder1_controlName” - eek!!!!
- 在 ASP 页面中使用 - 另外，将它分配给一个变量（或变量对象）。然后可以在外部 js 页面中使用变量（或对象点表示法） （注意：不能在外部 js 中使用 ）
- 在 ASP 页面中使用具有唯一性（与 ID 相同的名称）的 CssClass 并将控件称为“.controlName”而不是“#controlName”
- 使用“[id$=_controlName]”而不是“#controlName”——这涉及到一个小的搜索，并且正在寻找一个以唯一名称结尾的控件——这样开头就无关紧要了
【讨论】：