Question

我有一个jquery选择器的搞笑情况，试图在asp.net LoginView中找到一些东西：

假设我有4个控件，2个普通html <input>和2个<asp:TextBox> es。其中一个位于<asp:Loginview>内。

<asp:LoginView ID="LoginView1" runat="server">
    <LoggedInTemplate>
        <input type="text" id="htmlInput1" />
        <asp:TextBox id="aspTextbox1" runat="server"></asp:TextBox>
    </LoggedInTemplate>
</asp:LoginView>

<input type="text" id="htmlInput2" />
<asp:TextBox id="aspTextbox2" runat="server"></asp:TextBox>

然后让我们说我想对每个人应用一些jquery。猜猜这4个中哪一个不起作用？

 <script>
         $(function () {             
             $("#htmlInput1").datepicker();
             $("#htmlInput2").datepicker();
             $("#aspTextbox1").datepicker();  
             $("#aspTextbox2").datepicker();             
         });
 </script>

由于某种原因，未到达LoginView中的asp.net文本框。我必须先以某种方式选择LoginView吗？

var x = $("LoginView1").....

Answer 1

这是因为服务器端标记在呈现时会被赋予唯一标识符。如果打开页面的渲染源，您将看到元素的id已被修改为包含整个控件层次结构。因此，您的jQuery选择器将不再找到该元素。

但是，因为它们总是 end 具有指定的id，所以您可以使用jQuery attributeEndsWith选择器：

$('[id$="aspTextbox1"]').datepicker();

或者，为CssClass datepicker提供您要执行此操作的所有元素并执行：

$('.datepicker').datepicker();

这可能是一种更简洁，更不突兀的实现方法，因为它允许您使用一行代码在所有这些元素上调用datepicker方法。此外，它允许您通过简单地为同一个类提供新元素来添加 more datepicker元素，而不是每次都必须修改jQuery：

<asp:TextBox id="aspTextbox999" CssClass="datepicker" runat="server" />

Answer 2

原因是ASP.NET在运行时自动生成ID，这与您尝试在jQuery中读取的ID不同。打开viewsource并查看生成的ID。您可以使用该Id，否则如果您使用的是ASP.NET 4.0或更高版本，我认为您可以设置Id可预测。读这个： http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx 对于ASP.NET控件

          $("#"+<%= Control.ClientID %>).val();

在asp.net控件中使用jQuery

2 个答案: