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

任何提示？

Answer 1

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

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

然后：

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

Answer 2

正如其他人提到的，你可以将类选择器传递给jQuery，但这有点乱。我更喜欢使用jQuery attribute ends with selector。鉴于生成的ID是控件的展平层次结构，您可以使用＆＃34;结束＆＃34;选择器来找到你的元素。

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

呈现时，生成的ID会变成这样（如果在主页的内容持有者中）：

<input id="ctl00_contentplaceholder_txtText" />

要找到此控件：

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

在转发器中使用时要小心。

Answer 3

在WebForm / HTML页面....

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

在Jquery

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

100％当然为我工作......

Answer 4

尝试将其放入变量名称：

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

$(txtTestID).val();

我不确定<%=是否喜欢双引号内。不使用单引号时，我总是有混合行为。

Answer 5

使用ASP.NET 4并将ClientIDMode设置为“Predictable”时，您可以根据层次结构预测ID。或者将其设置为“静态”，因此asp.net不会搞砸它。

这在使用外部JS文件方案时非常有用。

Answer 6

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

<%= txtTest.ClientID %> 应该有效但不在单独的javascript中服务器端脚本未执行的文件。

我能找到的解决方案是：

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

使用类可以在任何地方检索值。这是最好的解决方案之一（通常是最好的）

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

aspx

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

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

您还可以在外部js文件中使用ClientID并使用解决方法。 信息不严谨，只有在您真正需要时才使用。我通常在使用Telerik时执行此操作。

在aspx中：

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

在js文件中：

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

所以HTML变为

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

并且js可以将其命名为

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

此解决方案的问题在于您需要非常小心，以避免在页面的ids上出现问题。请勿在控制器中使用Static模式。

作为州MSDN：

ClientID值设置为ID属性的值。如果 control是一个命名容器，控件用作顶部为其包含的任何控件命名容器的层次结构。

shaans's answer的链接是检查有关ClientIDMode的额外信息的绝佳位置。

Answer 7

要避免渲染ID的问题，请改用类。在渲染过程中不会改变：

function contatoModal() {

//alert("Test");

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

}

HTML：

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

Answer 8

在 input 中添加一个 css 类，然后在 jQuery 中使用这个类来获取 input 元素将解决这个问题。