如何在主页面中使用JQuery ?

I can get simple examples to work fine as long as there's no master page involved. All I want to do is click a button and have it say "hello world" with the javascript in a .js file, using a master page. Any help very much appreciated :)

只要不涉及到母版页面，我就可以得到简单的示例。我要做的就是单击一个按钮，让它在.js文件中使用一个主页面，用javascript输入“hello world”。非常感谢您的帮助。

13 个解决方案

#1

EDIT

编辑

As @Adam points out in the comments, there is a native jQuery mechanism that basically does the same thing as the hack in my original answer. Using jQuery you can do

正如@Adam在评论中指出的那样，有一种原生的jQuery机制，它基本上与我原始答案中的hack是一样的。可以使用jQuery

 $('[id$=myButton]').click(function(){ alert('button clicked'); }); 

My hack was originally developed as a Prototype work around for ASP.NET and I adapted it for the original answer. Note that jQuery basically does the same thing under the hood. I recommend using the jQuery way, though, over implementing my hack.

我的hack最初是为ASP开发的一个原型。我把它改编成原来的答案。请注意，jQuery基本上在幕后做着同样的事情。我建议使用jQuery方法，而不是实现我的hack。

Original answer left for comment context

原始答案留给评论上下文。

When you use a master page, ASP.NET mangles the names of the controls on the dependent pages. You'll need to figure out a way to find the right control to add the handler to (assuming you're adding the handler with javascript).

当您使用母版页时，ASP。NET管理相关页面上控件的名称。您需要找到一种方法来找到要添加处理程序的正确控件(假设您正在使用javascript添加处理程序)。

I use this function to do that:

我用这个函数来做:

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

Then you can do something like:

然后你可以这样做:

jQuery(asp$('myButton','input')).click ( function() { alert('button clicked'); } );

where you have the following on your child page

您的子页面上有以下内容吗

<asp:Button ID="myButton" runat="server" Text="Click Me" />

#2

If your site has content pages in other folders, using the Page's ResolveUrl method in the src path will ensure that your js file can always be found:

如果您的站点在其他文件夹中有内容页，那么使用src路径中的页面ResolveUrl方法将确保始终可以找到您的js文件:

<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.2.6.min.js") %>' ></script>

#3

Make sure that jQuery is being added in the master page. Given that you have this control:

确保在主页中添加了jQuery。如果你有这个控制:

<asp:Button ID="myButton" runat="server" Text="Submit" />

You can wireup the javascript with this:

你可以用这个来连接javascript:

$(document).ready(function() {
    $('[id$=myButton]').click(function() { alert('button clicked'); });
});

$(document).ready() fires when the DOM is fully loaded, and all the elements should be there. You can simplify this further with

$(document).ready()在DOM完全加载时触发，所有元素都应该在那里。你可以进一步化简

$(function() {});

The selector syntax $('[id$=myButton]') searches elements based on their id attribute, but matches only the end of the string. Conversely, '[id^=myButton]' would match the beginning, but for the purposes of filtering out the UniqueID that wouldn't be very useful. There are many many more useful selectors you can use with jQuery. Learn them all, and a lot of your work will be done for you.

选择器语法$('[id$=myButton])根据元素的id属性搜索元素，但只匹配字符串的末尾。相反,“[id ^ = myButton]”将匹配一开始,但为了过滤掉UniqueID不会是非常有用的。您可以使用jQuery使用更多有用的选择器。把它们全都学一学，你的许多工作就会为你完成。

The problem is that ASP.Net creates a unique id and name attribute for each element, which makes finding them difficult. It used to be that you'd need to pass the UniqueID property to the javascript from the server, but jQuery makes that unneccessary.

问题是ASP。Net为每个元素创建一个惟一的id和name属性，这使得查找它们变得困难。以前，您需要从服务器将UniqueID属性传递给javascript，但是jQuery使其显得多余。

With the power of jQuery's selectors, you can decouple the javascript from the server-side altogether, and wireup events directly in your javascript code. You shouldn't have to add javascript into the markup anymore, which helps readability and makes refactoring much easier.

借助jQuery选择器的强大功能，您可以将javascript与服务器端完全分离，并在javascript代码中直接连接事件。您不应该再将javascript添加到标记中，这有助于提高可读性，并使重构更加容易。

#4

Just move the <script type="text/javascript" src="jquery.js" /> tag into the head tag in the master page. Then you can use jquery in all content pages.

只需移动标签进入master页面的head标签。然后可以在所有内容页面中使用jquery。

There is no magic about using master pages with jQuery.

使用jQuery使用母版页面没有什么神奇之处。

#5

Adam's solution is the best. Simple!

亚当的解决方案是最好的。简单!

Master page:

主页:

<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>

Content page:

内容页:

<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>

where the button is

按钮在哪里

<asp:Button ID="AlertButton" runat="server" Text="Button" />

#6

Reference the the Jquery .js file in the head of the MasterPage as follows:

在主页的头部引用Jquery .js文件如下:

<script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script> 

(some browsers don't like ending it with />)

(有些浏览器不喜欢以/>结尾)

Then you can write things like

然后你可以这样写

$('#<%= myBtn.ClientID%>').show() 

in your javascript making sure to use the ClientId when referencing an ASP.Net control in your client code. That will handle any "mangling" of names and ids of the controls.

在javascript中，请确保在引用ASP时使用ClientId。客户端代码中的Net控件。它将处理控件的任何名称和id的“混乱”。

#7

Master page:

主页:

The jQuery library goes in the master page. See if the path is correctly referenced. You might like to add the extra documentation like this:

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>

Master page:

主页:

<head>
<script type="text/javascript">
    $(document).ready(
        function()
        {
            alert('Hello!');
        }
    );
</script>
</head>

CodeBehind for content pages and user controls:

内容页面和用户控件的代码隐藏:

this.textBox.Attributes.Add("onChange",
    String.Format("passElementReferenceToJavascript({0})", this.textBox.ClientID));

#8

Check out this post:

看看这篇文章:

http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx

http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx

also explains how to get intellisense for jQuery in Visual studio.

还说明了如何在Visual studio中获得jQuery的intellisense。

#9

When pages are rendered along with master pages, control id gets changed on page rendering so we can't refer them in jQuery like this #controlid. Instead we should try using input[id$=controlid]. If control is rendered as input control or if as anchor tag use a[id$=controlid] in jQuery.

当页面与主页面一起呈现时，在页面呈现时，控件id将被更改，因此我们不能像#controlid那样在jQuery中引用它们。相反，我们应该尝试使用input[id$=controlid]。如果控件被呈现为输入控件，或者作为锚标记使用jQuery中的[id$=controlid]。

#10

In case if some one wants to access a label, here is the syntax

如果有人想访问标签，这里是语法

$('[id$=lbl]').text('Hello');

where lbl is the label id and the text to display in the label is 'Hello'

lbl是标签id标签中显示的文本是Hello

#11

I also started with the simplest of examples and had no luck. I finally had to add the jquery .js file outside of the <head> section of the master page. It was the only way I could get anything to work in Firefox (haven't tried other browsers just yet).

我也从最简单的例子开始，没有运气。最后，我不得不将jquery .js文件添加到主页面的部分之外。这是我在Firefox中工作的唯一途径(还没有尝试过其他浏览器)。

I also had to reference the .js file with an absolute address. Not entirely sure what's up with that one.

我还必须引用一个绝对地址的.js文件。我不太清楚这是怎么回事。

#12

Adam Lassek linked to using jQuery selectors, though I think its worth explicitly calling out selecting elements by their class, as opposed to their id.

Adam Lassek链接到使用jQuery选择器，但是我认为值得明确地根据类选择元素，而不是按id。

e.g. Instead of $("#myButton").click(function() { alert('button clicked'); });

例如，点击(function() {alert('button click '));});

instead use $(".myButtonCssClass").click(function() { alert('button clicked'); });

使用$(".myButtonCssClass").click(function() {alert('button click '));});

and add the class to the button:

并将类添加到按钮:

<asp:Button ID="myButton" runat="server" Text="Submit" CssClass="myButtonCssClass" />

This has the benefit of not having to worry about whether two control ids 'end' the same way in addition to being able to apply the same jQuery code to multiple controls at a time (with the same css class).

这样做的好处是，不必担心两个控制id是否会以相同的方式结束，除了能够一次将相同的jQuery代码应用到多个控件(使用相同的css类)。

#13

• PROBLEM --> when using Site.Master pages the control id names (for ASP controls) get the ContentPlaceHolderID prefixed to them. (Note this not a problem for non-asp controls as they don't get 'reinterpreted' - i.e. they just appear as written)

  问题——使用站点时使用>。控制id名(用于ASP控件)获取前缀为它们的ContentPlaceHolderID。(注意这对非asp控件来说不是问题，因为它们不会被“重新解释”——也就是说，它们只是以书面形式出现)

• SOLUTIONS:

  解决方案:

  • 1. Simplest --> add ClientIDMode="Static" to the asp control definition (or set with properties) in aspx page
    2. 最简单的—>在aspx页面中添加ClientIDMode="静态"到asp控件定义(或设置属性)。
  • 最简单的—>在aspx页面中添加ClientIDMode="静态"到asp控件定义(或设置属性)。
  • Alternatives include:
  • 备选方案包括:
  • 2. Hardcoding the ContentPlaceHolderID name in the js code e.g "#ContentPlaceHolder1_controlName" - eek!!!!
    3. 在js代码e中硬编码ContentPlaceHolderID名称。g“# ContentPlaceHolder1_controlName”——唷! ! ! !
  • 在js代码e中硬编码ContentPlaceHolderID名称。g“# ContentPlaceHolder1_controlName”——唷! ! ! !
  • 3. using the <%= controlName.ClientID %> in the ASP page - plus, assigning it - there- to a variable (or object of variables). The variable (or object dot notation) can then be used in external js page (NOTE: Can't use <%= controlName.ClientID %> in external js)
    4. 使用< % = controlName。ASP页面中的ClientID %> - plus将其赋值给一个变量(或变量的对象)。然后可以在外部js页面中使用变量(或对象点表示法)(注意:不能使用<%= controlName。ClientID %>在外部js中)
  • 使用< % = controlName。ASP页面中的ClientID %> - plus将其赋值给一个变量(或变量的对象)。然后可以在外部js页面中使用变量(或对象点表示法)(注意:不能使用<%= controlName。ClientID %>在外部js中)
  • 4. Using CssClass with a unique(same name as ID) in ASP page and refering to the control as ".controlName" instead of "#controlName"
    5. 在ASP页面中使用具有唯一(相同名称ID)的CssClass，并将其引用为“。”controlName”而不是“# controlName”
  • 在ASP页面中使用具有唯一(相同名称ID)的CssClass，并将其引用为“。”controlName”而不是“# controlName”
  • 5. 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
    6. 使用“[id$=_controlName]”而不是“#controlName”—这涉及到一个小的搜索，并且正在寻找一个以唯一名称结尾的控件—这样开始就不相关了
  • 使用“[id$=_controlName]”而不是“#controlName”—这涉及到一个小的搜索，并且正在寻找一个以唯一名称结尾的控件—这样开始就不相关了