如何在主页面上使用JQuery?

时间:2008-11-15 17:28:51

标签: asp.net jquery master-pages

只要没有涉及母版页,我就可以得到简单的例子来正常工作。我想要做的就是点击一个按钮,使用母版页在.js文件中用javascript说“hello world”。非常感谢任何帮助:)

13 个答案:

答案 0 :(得分:26)

修改

正如@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" />

答案 1 :(得分:24)

如果您的网站在其他文件夹中包含内容页面,则使用src路径中的Page ResolveUrl方法将确保始终可以找到您的js文件:

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

答案 2 :(得分:20)

确保在母版页中添加了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添加到标记中,这有助于提高可读性并使重构变得更加容易。

答案 3 :(得分:15)

只需将<script type="text/javascript" src="jquery.js" />标记移动到母版页中的head标记即可。然后你可以在所有内容页面中使用jquery。

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

答案 4 :(得分:7)

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

母版页:

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

答案 5 :(得分:5)

在MasterPage的头部引用Jquery .js文件,如下所示:

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

(某些浏览器不喜欢以/&gt;结尾)

然后你可以写像

这样的东西
$('#<%= myBtn.ClientID%>').show() 

在您的javascript中确保在客户端代码中引用ASP.Net控件时使用ClientId。这将处理控件的名称和ID的任何“错误”。

答案 6 :(得分:1)

母版页:

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

答案 7 :(得分:1)

看看这篇文章:

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

还解释了如何在Visual Studio中获取jQuery的intellisense。

答案 8 :(得分:1)

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

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

其中lbl是标签ID,标签中显示的文字是'Hello'

答案 9 :(得分:1)

当页面与母版页一起呈现时,控件ID会在页面渲染时被更改,因此我们无法像j #controlid那样在jQuery中引用它们。相反,我们应该尝试使用input[id$=controlid]。如果控件呈现为输入控件,或者如果作为锚标记在jQuery中使用a[id$=controlid]

答案 10 :(得分:0)

我也从最简单的例子开始,没有运气。我最后不得不在母版页的<head>部分添加jquery .js文件之外。这是我可以在Firefox中使用任何东西的唯一方法(还没有尝试过其他浏览器)。

我还必须使用绝对地址引用.js文件。不完全确定那个是什么。

答案 11 :(得分:0)

Adam Lassek与使用jQuery选择器相关联,但我认为它值得明确地指出他们的类选择元素,而不是他们的id。

e.g。而不是$("#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是否以相同的方式结束。

答案 12 :(得分:0)

  • 问题 - &gt;使用Site.Master页面时,控件ID名称(对于ASP控件)获取前缀为ContentPlaceHolderID。  (注意这不是非asp控件的问题,因为它们没有被'重新解释' - 即它们只是以书面形式出现)

  • 解:

      1. 最简单 - &gt;将ClientIDMode =“Static”添加到aspx页面
      2. 中的asp控件定义(或使用属性设置)
    • 替代方案包括:
      1. 在js代码中硬编码ContentPlaceHolderID名称,例如“#ContentPlaceHolder1_controlName” - eek !!!!
      1. 使用&lt;%= controlName.ClientID%&gt;在ASP页面中 - 加上,将其分配给变量(或变量对象)。然后可以在外部js页面中使用变量(或对象点表示法) (注意:不能在外部js中使用&lt;%= controlName.ClientID%&gt;)
      1. 在ASP页面中使用带有唯一(与ID相同)的CssClass,并将控件称为“.controlName”而不是“#controlName”
      1. 使用“[id $ = _ controlName]”而不是“#controlName” - 这涉及一个小搜索,并且正在寻找以唯一名称结尾的控件 - 这种方式与开始无关