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