30

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

4

13 回答 13

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" />
于 2008-11-15T18:00:45.587 回答
24

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

<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.2.6.min.js") %>' ></script>
于 2008-11-19T01:59:27.537 回答
20

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

于 2009-03-18T20:24:27.517 回答
15

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

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

于 2008-11-15T17:58:04.217 回答
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" />
于 2010-02-26T17:10:22.823 回答
5

引用 MasterPage 头部的 Jquery .js 文件如下:

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

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

然后你可以写像

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

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

于 2008-11-15T20:03:12.873 回答
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));
于 2008-11-15T18:20:42.067 回答
1

看看这篇文章:

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

还解释了如何在 Visual Studio 中为 jQuery 获取智能感知。

于 2008-11-15T19:33:17.927 回答
1

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

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

标签 ID在哪里lbl,标签中显示的文本是“Hello”

于 2012-01-17T16:58:02.560 回答
1

当页面与母版页面一起呈现时,控件 ID 在页面呈现时会发生变化,因此我们不能像这样在 jQuery 中引用它们#controlid。相反,我们应该尝试使用input[id$=controlid]. 如果控件呈现为输入控件,或者作为锚标记a[id$=controlid]在 jQuery 中使用。

于 2012-09-16T09:55:44.037 回答
0

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

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

于 2009-07-24T14:02:04.787 回答
0

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 是否以相同的方式“结束”。

于 2012-03-27T20:54:39.030 回答
0
  • 问题 --> 使用 Site.Master 页面时,控件 ID 名称(对于 ASP 控件)获取以它们为前缀的 ContentPlaceHolderID。(请注意,这对于非 asp 控件来说不是问题,因为它们不会被“重新解释”——即它们只是以书面形式出现)

  • 解决方案:

      1. 最简单的 --> 将 ClientIDMode="Static" 添加到 aspx 页面中的 asp 控件定义(或使用属性设置)
    • 替代方案包括:
      1. 在 js 代码中硬编码 ContentPlaceHolderID 名称,例如“#ContentPlaceHolder1_controlName” - eek!!!!
      1. 在 ASP 页面中使用 <%= controlName.ClientID %> - 再加上,将它分配给一个变量(或变量对象)。然后可以在外部 js 页面中使用变量(或对象点表示法)(注意:不能在外部 js 中使用 <%= controlName.ClientID %>)
      1. Using CssClass with a unique(same name as ID) in ASP page and refering to the control as ".controlName" instead of "#controlName"
      1. 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
于 2017-12-19T19:48:09.483 回答