如何在主页面中使用JQuery？

Question

如何在主页面中使用JQuery？

asp.netjquerymaster-pages

30

只要没有主页涉及，我可以成功地获得简单的示例。我想做的就是在使用主页时点击一个按钮，并使用.js文件中的javascript使其显示“hello world”。非常感谢任何帮助 :)

- Keith Myers

13个回答

24

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

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

- djuth

当我将此放入标题标签并运行时，页面出现错误并提供以下信息：无法修改Controls集合，因为控件包含代码块（即<% ... %>）。描述：在当前Web请求执行期间发生未处理的异常。请查看堆栈跟踪以获取有关错误的更多信息以及其在代码中的起源。异常详细信息：System.Web.HttpException：无法修改Controls集合，因为控件包含代码块（即<% ... %>）。 - Sarawut Positwinyu

作为对@Sarawut评论的回答，当您使用主题时，您会遇到他的问题。主题将尝试向头部添加控件，但是当头部中已经有<％...％>标记时，这将失败。为了防止这种情况，您可以通过代码（在母版页中）添加脚本：

Public Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)     Dim lit As New Literal()     lit.Text = String.Format("<script type='text/javascript' src='{0}'><" & "/script>", ResolveUrl("~/Script/jquery-1.6.1.js"))     Page.Header.Controls.Add(lit) End Sub

- Andomar

我不得不改回使用ASP.NET WebForms，并且您的答案解决了我的问题，因为我无法使用MVC 3 Razor语法中的@Url.Content...例如：<script src="@Url.Content（“〜/ Scripts / modernizr-1.7.min.js”）"type="text/javascript"></script>谢谢！ - Tom Stickel

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]'将匹配开头，但为了过滤掉UniqueID，这将没有什么用处。使用jQuery，您可以使用许多更有用的选择器。学习它们所有，你会发现很多工作都已经完成了。

问题在于ASP.Net为每个元素创建唯一的id和name属性，这使得查找它们变得困难。以前需要从服务器传递UniqueID属性到javascript中，但使用jQuery则无需如此。

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

- Adam Lassek

15

将<script type="text/javascript" src="jquery.js" />标签移到主页面的标签中即可。这样，您可以在所有内容页面中使用jQuery。

使用主页和jQuery没有什么神奇之处。

- gius

7

Adam的解决方案是最好的。简单易懂！

母版页面：

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

- Andrei Drynov

5

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

在头部引用以下代码：

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

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

然后，您可以编写类似于

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

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

- Jared

我应该期望这段代码能够正常工作吗？$('#<%= Button1.ClientID%>').click(function() { alert('Hello world!'); });这段代码位于我的.js文件中。我知道我已经正确设置了一切，因为如果我从页面源代码中复制“混淆”的id，它可以正常工作。 - Keith Myers

<% %> 语法只在 .aspx 文件中有效。因此，如果您想使用它，需要将脚本放在 aspx 文件内的 <script> 块中。 - AaronSieb

1

当页面与主页面一起呈现时，控件ID在页面呈现时会发生更改，因此我们无法像这样在jQuery中引用它们#controlid。相反，我们应该尝试使用input[id$=controlid]。如果控件呈现为输入控件或作为锚标记，则在jQuery中使用a[id$=controlid]。

- Nitin Nayyar

1

看看这篇文章：

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

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

- Stefan

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

- Patrick de Kleijn

1

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

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

其中lbl是标签ID，要在标签中显示的文本为“Hello”

- hoodwink

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tvanfosson · Accepted Answer

编辑

正如@Adam在评论中指出的那样，有一个本地的jQuery机制基本上与我原始答案中的hack做的一样。使用jQuery，您可以执行以下操作：

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

我的黑客技巧最初是为了ASP.NET而开发的原型解决方案，后来我将其适用于原始答案。请注意，jQuery在幕后基本上执行相同的操作。我建议使用jQuery方式，而不是实现我的黑客技巧。

原始答案保留以供评论上下文

当您使用主页面时，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" />