我正在尝试使用 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" />
有什么建议吗？
【问题讨论】：
标签： javascript jquery asp.net runatserver
<%= txtTest.ClientID %> 应该可以工作，但不能在不执行服务器端脚本的单独 javascript 文件中工作。另一种可能性是使用类选择器：
<input runat="server" id="txtTest" value="test" class="txtTest" />
然后：
var value = $('.txtTest').val();
【讨论】：
正如其他人所提到的，您可以将类选择器传递给 jQuery，但这有点混乱。我更喜欢使用jQuery attribute ends with selector。鉴于生成的 ID 是扁平化的控件层次结构，您可以使用“ends with”选择器来查找您的元素。
<input runat="server" id="txtText" />
渲染时，生成的 ID 变成这样（如果在母版页的内容占位符内）：
<input id="ctl00_contentplaceholder_txtText" />
要找到这个控件：
$("input[id$='txtText']")
在中继器中使用它时要小心。
【讨论】：
在 WebForm / HTML 页面中......
<asp:TextBox ID="txtUserName" runat="server" Class="form-control"></asp:TextBox>
在 Jquery 中
var UserName = $("[id*=txtUserName]").val();
alert(UserName);
100% 肯定它对我有用....
【讨论】：
尝试将其放入变量名中：
var txtTestID = '#' + '<%=txtTest.ClientID %>';
$(txtTestID).val();
我不确定<%= 是否喜欢在双引号内。不使用单引号时，我的行为总是很复杂。
【讨论】：
当使用 ASP.NET 4 并且 ClientIDMode 设置为“Predictable”时，您可以根据层次结构预测 ID。或者将其设置为“静态”，这样 asp.net 就不会搞砸了。
这在使用外部 JS 文件场景时非常有用。
【讨论】：
正如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();
Static
所以 HTML 变成了
<input runat="server" id="txtTest" value="test" ClientIDMode="Static" />
js 可以按照它的名字来调用它
var value = $('#txtTest').val();
此解决方案的问题是您需要非常小心避免页面的ids 重复。尽量不要在控制器中使用Static 模式。
正如 MSDN 所述：
ClientID 值设置为 ID 属性的值。如果 控件是一个命名容器，控件用作顶部 它包含的任何控件的命名容器层次结构。
shaans's answer 的链接是查看有关 ClientIDMode 的额外信息的好地方。
Cleaner HTML Markup with ASP.NET 4 Web Forms - Client IDs (VS 2010 and .NET 4.0 Series)
【讨论】：
为避免渲染 ID 出现问题，请改用类。这在渲染过程中不会改变：
function contatoModal() {
//alert("Test");
alert($(".txtTest").val());
}
HTML：
< input runat="server" id="txtTest" value="test" class="txtText" />
【讨论】：
txtTest，在 HTML 中不同：txtText - 错字？
在输入中添加一个css类，然后在jQuery中使用这个类来获取输入元素将解决这个问题。
【讨论】：