在jQuery中从asp.net runat服务器获取ID

Question

我正在尝试使用ASP.NET和jQuery开发一些功能。但是使用runat="server"的 ID 与 HTML 中使用的 ID 不同。

我曾经使用以下方法来获取此情况下的ID：

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

但在这种情况下，它不起作用。我对原因一无所知。

Javascript

/* Modal */
function contatoModal() {
    //alert("Test");
    alert($("#<%=txtTest.ClientID%>").val());
}

HTML

< input runat="server" id="txtTest" value="test" />

有什么提示吗？

- Michel Ayres

---

它实际上输出文本框的ID和<%=txtTest.ClientID %>的内容是什么？ - Richard Dalton

Answer 1

<%= txtTest.ClientID %>应该可以工作，但在单独的JavaScript文件中不起作用，因为服务器端脚本不会执行。另一种可能是使用类选择器：

<input runat="server" id="txtTest" value="test" class="txtTest" />

接下来：

var value = $('.txtTest').val();

- Darin Dimitrov

---

哇！太棒了...我把我的函数放在我的ascx页面中，现在它可以工作了。类部分我知道（但还是谢谢你的提示），并且它在一个单独的JavaScript文件中（作为类）也可以工作。没有办法在我的function.js页面上运行它吗？script_path: script/function.js ascx_path: components/contact.ascx。 - Michel Ayres

无法将asp.net id代码放入JS文件中，因为asp.net不会在其中查找并赋值。 - RealityDysfunction

Answer 2

在WebForm/HTML页面中....

<asp:TextBox ID="txtUserName" runat="server" Class="form-control"></asp:TextBox>  

在Jquery中

var UserName = $("[id*=txtUserName]").val();
alert(UserName);

我百分之百确定这对我起作用了...

- Ahsan Aftab

---

这个方法是用于... Asp.net 控件...<asp:TextBox ID="txtUserName" runat="server" ></asp:TextBox> - Ahsan Aftab

如果您想选择ID包含给定字符串的元素，则可以使用以下代码：这个答案可行。 - Eran Meir

Answer 3

正如其他人提到的那样，你可以将类选择器传递给jQuery，但这有点混乱。我更喜欢使用jQuery属性结束选择器。考虑到生成的ID是一个扁平化的控件层次结构，你可以使用“以...结尾”的选择器来找到你的元素。

<input runat="server" id="txtText" />

在渲染时，生成的ID会变成类似这样的形式（如果在母版页的内容占位符中）：

<input id="ctl00_contentplaceholder_txtText" />

要找到此控件：

$("input[id$='txtText']")

在使用这个功能时，请注意在重复器内使用的情况。

- Alex

Answer 4

尝试将其放入变量名称中：

var txtTestID = '#' + '<%=txtTest.ClientID %>';

$(txtTestID).val();

我不确定<%=是否喜欢在双引号内部。如果不使用单引号，我一直有着混合的行为。

- Joel Etherton

---

这个也不行。和我的示例一样，但还是谢谢你的提示 =D PS：这次我用了单引号。=X - Michel Ayres

Answer 5

正文：

如Darin Dimitrov在他的回答中所说：

<%= txtTest.ClientID %>应该可以工作，但不适用于单独的JavaScript文件，因为服务器端脚本不会执行。

我能找到的解决方案是：

<input runat="server" id="txtTest" value="test" class="txtTest" />

---

使用`class`而不是`ID`。使用类，您可以在任何地方检索值。这是最好的解决方案之一（通常是最佳的）。

var value = $('.txtTest').val();

---

• 在aspx中使用ClientID代码

您可以始终在aspx中调用ClientID，但如果您正在使用某种结构，则这不是最佳解决方案。当我测试某些内容时，我喜欢使用此方法。

var value = $('#<%=txtTest.ClientID%>').val();

您也可以通过一个解决方法在外部js文件中使用ClientID。但是这不太美观，只有在确实需要时才使用。我通常在使用Telerik时这样做。

在aspx中：

var id = <%=txtTest.ClientID%>;

在 js 文件中：

var value = $('#'+id).val();

---

使用 Control.ClientIDMode Property 属性设置为 Static，这样HTML就变成了：

<input runat="server" id="txtTest" value="test" ClientIDMode="Static" />

这句话的翻译是：“js可以按照它的名称调用它”。

var value = $('#txtTest').val();

这种解决方案的问题在于你需要非常小心，避免页面上的id重复。尽量不要在控制器中使用“Static”模式。

正如MSDN所述：

“ClientID”值设置为“ID”属性的值。如果控件是命名容器，则该控件用作它包含的任何控件的命名容器层次结构的顶部。

---

“shaans's answer的链接是一个很棒的地方，可以查看有关ClientIDMode的额外信息。”

“使用ASP.NET 4 Web Forms - Client IDs（VS 2010和.NET 4.0系列）清理HTML标记”

- Michel Ayres

Answer 6

当使用ASP.NET 4并将ClientIDMode设置为“Predictable”时，您可以基于层次结构预测ID。或者将其设置为“Static”，这样asp.net就不会搞砸它。

关于此的ScottGu文章：http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx 在使用外部JS文件的情况下，这非常有用。

- shaans

Answer 7

为避免渲染 ID 的问题，请改用类。这样在渲染过程中不会发生变化：

function contatoModal() {

//alert("Test");

alert($(".txtTest").val());

}

HTML：

< input runat="server" id="txtTest" value="test" class="txtText" />

- Curtis

---

也要补充一句，看起来更整洁。 - Curtis

可能不会按预期工作：jQuery中的类为txtTest，而在HTML中为txtText - 打字错误？ - hc_dev

Answer 8

将css类添加到输入框中，然后在jQuery中使用此类来获取输入元素将解决问题。

- ferry7ft

---

我们期望在提问中看到代码尝试。同样地，我们可以在回答中使用代码来进行说明。 - hc_dev