如何在主页面上使用JQuery?

Kei*_*ers 30 asp.net jquery master-pages

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

tva*_*son 26

编辑

正如@Adam在评论中指出的那样,有一个本机jQuery机制基本上与我原来的答案中的hack做同样的事情.使用jQuery你可以做到

 $('[id$=myButton]').click(function(){ alert('button clicked'); }); 
Run Code Online (Sandbox Code Playgroud)

我的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;
    }
}
Run Code Online (Sandbox Code Playgroud)

然后你可以这样做:

jQuery(asp$('myButton','input')).click ( function() { alert('button clicked'); } );
Run Code Online (Sandbox Code Playgroud)

您的子页面上有以下内容

<asp:Button ID="myButton" runat="server" Text="Click Me" />
Run Code Online (Sandbox Code Playgroud)

  • 你是过度工程的.您可以用$('[id $ = myButton]')替换整个函数.单击(function(){alert('button clicked');}); (8认同)

dju*_*uth 24

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

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


Ada*_*sek 20

确保在母版页中添加了jQuery.鉴于你有这个控制:

<asp:Button ID="myButton" runat="server" Text="Submit" />
Run Code Online (Sandbox Code Playgroud)

您可以使用以下方式连接javascript:

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

$(document).ready()在DOM完全加载时触发,并且所有元素都应该在那里.您可以进一步简化此操作

$(function() {});
Run Code Online (Sandbox Code Playgroud)

选择器语法$('[id$=myButton]')根据其id属性搜索元素,但仅匹配字符串的结尾.相反,'[id^=myButton]'将匹配开头,但为了过滤掉不太有用的UniqueID.有许多更有用的选择器可以与jQuery一起使用.全部学习,你的很多工作都将为你完成.

问题是ASP.Net为每个元素创建了一个唯一的id和name属性,这使得查找它们变得困难.过去,您需要将UniqueID属性从服务器传递给javascript,但jQuery使得不必要.

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


giu*_*ius 15

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

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


AFD*_*AFD 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>
Run Code Online (Sandbox Code Playgroud)

内容页:

<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>
Run Code Online (Sandbox Code Playgroud)

按钮在哪里

<asp:Button ID="AlertButton" runat="server" Text="Button" />
Run Code Online (Sandbox Code Playgroud)


Jar*_*red 5

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

<script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script> 
Run Code Online (Sandbox Code Playgroud)

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

那你可以写点东西

$('#<%= myBtn.ClientID%>').show() 
Run Code Online (Sandbox Code Playgroud)

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