只要没有涉及母版页,我就可以得到简单的例子来正常工作。我想要做的就是点击一个按钮,使用母版页在.js文件中用javascript说“hello world”。非常感谢任何帮助:)
编辑
正如@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" />
如果有人想要访问标签,这里是语法
a[id$=controlid]
其中$('[id$=lbl]').text('Hello');
是标签ID,标签中显示的文字是'Hello'
我也从最简单的例子开始,没有运气。我最后不得不在母版页的lbl
部分之外添加jquery .js文件。这是我可以在Firefox中使用任何东西的唯一方法(还没有尝试过其他浏览器)。
我还必须使用绝对地址引用.js文件。不完全确定那个是什么。
Adam Lassek与使用jQuery选择器相关联,但我认为它值得明确地指出他们的类选择元素,而不是他们的id。
例如而不是<head>
而是使用$("#myButton").click(function() { alert('button clicked'); });
并将该类添加到按钮:
$(".myButtonCssClass").click(function() { alert('button clicked'); });
这样做的好处是,除了能够一次将相同的jQuery代码应用于多个控件(使用相同的css类)之外,不必担心两个控件ID是否以相同的方式结束。
如果您的站点在其他文件夹中包含内容页面,则使用src路径中的Page的ResolveUrl
方法将确保始终可以找到您的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'); });
});
当DOM完全加载时,$(document).ready()
会触发,所有元素都应该存在。您可以进一步简化此操作
$(function() {});
选择器语法$('[id$=myButton]')
根据其id属性搜索元素,但仅匹配字符串的结尾。相反,'[id^=myButton]'
会匹配开头,但是为了过滤掉不太有用的UniqueID。有许多更有用的选择器可以与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的任何“错误”。
母版页:
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的intellisense。
当页面与母版页一起呈现时,控件ID在页面呈现时会被更改,因此我们无法像jazxswpoi那样在jQuery中引用它们。相反,我们应该尝试使用#controlid
。如果控件是作为输入控件呈现的,或者如果作为锚标签在jQuery中使用input[id$=controlid]
。