只要不涉及母版页,我就可以获得简单的示例来正常工作。我要做的就是单击一个按钮,并使用母版页在 .js 文件中使用 javascript 说“hello world”。非常感谢任何帮助:)
13 回答
编辑
正如@Adam 在评论中指出的那样,有一个本机 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" />
如果您的站点在其他文件夹中有内容页面,ResolveUrl
在 src 路径中使用 Page 的方法将确保始终可以找到您的 js 文件:
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.2.6.min.js") %>' ></script>
确保将 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 一起使用。全部学习它们,您的很多工作都会为您完成。
问题是 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 的任何“修改”。
母版页:
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>
内容页面和用户控件的 CodeBehind:
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$=lbl]').text('Hello');
标签 ID在哪里lbl
,标签中显示的文本是“Hello”
当页面与母版页面一起呈现时,控件 ID 在页面呈现时会发生变化,因此我们不能像这样在 jQuery 中引用它们#controlid
。相反,我们应该尝试使用input[id$=controlid]
. 如果控件呈现为输入控件,或者作为锚标记a[id$=controlid]
在 jQuery 中使用。
我也从最简单的例子开始,但没有运气。我最后不得不在母版页部分之外添加jquery .js 文件。<head>
这是我可以在 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" />
除了能够一次将相同的 jQuery 代码应用到多个控件(具有相同的 css 类)之外,这样做的好处是不必担心两个控件 id 是否以相同的方式“结束”。
问题 --> 使用 Site.Master 页面时,控件 ID 名称(对于 ASP 控件)获取以它们为前缀的 ContentPlaceHolderID。(请注意,这对于非 asp 控件来说不是问题,因为它们不会被“重新解释”——即它们只是以书面形式出现)
解决方案:
- 最简单的 --> 将 ClientIDMode="Static" 添加到 aspx 页面中的 asp 控件定义(或使用属性设置)
- 替代方案包括:
- 在 js 代码中硬编码 ContentPlaceHolderID 名称,例如“#ContentPlaceHolder1_controlName” - eek!!!!
- 在 ASP 页面中使用 <%= controlName.ClientID %> - 再加上,将它分配给一个变量(或变量对象)。然后可以在外部 js 页面中使用变量(或对象点表示法)(注意:不能在外部 js 中使用 <%= controlName.ClientID %>)
- Using CssClass with a unique(same name as ID) in ASP page and refering to the control as ".controlName" instead of "#controlName"
- Using the "[id$=_controlName]" instead of "#controlName" - this is involves a small search and is looking for a control that ends with the unique name - that way the start is irrelevant