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

Getting ID from asp.net runat server in jQuery

提问by Michel Ayres

I'm trying make some stuff in jQuery using ASP.NET. But the ID from runat="server"is not the same as the id used in HTML.

我正在尝试使用 ASP.NET 在 jQuery 中制作一些东西。但是 from 的 ID 与runat="server"HTML 中使用的 ID 不同。

I used to use this to get the ID from this situation:

我曾经使用它来从这种情况中获取 ID：

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

But in this case, it does not work. I'm clueless as to why.

但在这种情况下，它不起作用。我不知道为什么。

Javascript

Javascript

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

HTML

HTML

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

Any tips?

有小费吗？

回答by Darin Dimitrov

<%= txtTest.ClientID %>should work but not in a separate javascript file where server side scripts do not execute. Another possibility is to use a class selector:

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

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

and then:

进而：

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

回答by Alex

As others have mentioned, you can pass a class selector to jQuery, but that is a bit messy. I prefer to use the jQuery attribute ends with selector. Given that a generated ID is a flattened hierarchy of controls, you can use the "ends with" selector to find your element.

正如其他人提到的，您可以将类选择器传递给 jQuery，但这有点麻烦。我更喜欢使用jQuery 属性以 selector 结尾。鉴于生成的 ID 是一个扁平化的控件层次结构，您可以使用“结尾为”选择器来查找您的元素。

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

When rendered, the generated ID becomes something like this (if within a masterpage's content place holder):

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

<input id="ctl00_contentplaceholder_txtText" />

To find this control:

要找到此控件：

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

Take caution when using this within a repeater.

在中继器中使用时要小心。

回答by Ahsan Aftab

In WebForm / HTML Page....

在 WebForm / HTML 页面中....

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

In Jquery

在jQuery中

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

100% Sure its Working for me....

100% 确定它对我有用....

回答by Joel Etherton

Try putting it into a variable name:

尝试将其放入变量名中：

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

$(txtTestID).val();

I'm not sure if the <%=likes being inside double quotes. I've always had mixed behaviors when not using the single quote.

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

回答by shaans

When using ASP.NET 4 and the ClientIDMode is set to “Predictable”, you can predict the ID based on hierarchy. Or set it set to “Static”, so asp.net wont mess it up.

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

ScottGu's article on it 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

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

And this is extremely useful when using external JS file scenarios.

这在使用外部 JS 文件场景时非常有用。

回答by Michel Ayres

As Darin Dimitrovsaid in his answer:

正如达林·季米特洛夫 (Darin Dimitrov)在他的回答中所说：

<%= txtTest.ClientID %>should work but not in a separate javascript file where server side scripts do not execute.

<%= txtTest.ClientID %>应该可以工作，但不能在服务器端脚本不执行的单独 javascript 文件中工作。

The solutions that I could find for those are:

我可以找到的解决方案是：

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

---

---

• Use classinstead of ID

• 使用class代替ID

Using class you can retrieve the value anywhere. This is one of the best solutions (usually the best)

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

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

---

---

• Use ClientIDcode in the aspx

• 在ClientID代码中使用aspx

You can always call ClientIDin the aspx, but if you are working with some kind of structure, this isn't the best solution. I like to use this method when I'm testing something.

您可以随时调用ClientIDaspx，但如果您正在使用某种结构，这不是最佳解决方案。当我测试某些东西时，我喜欢使用这种方法。

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

You can also use ClientIDin a external js file with a workaround. IT'S NOT PRETTY, use only if you really need it. I usually do this when I use Telerik.

您还可以ClientID通过变通方法在外部 js 文件中使用。它并不漂亮，仅在您确实需要时才使用。我通常在使用Telerik.

In the aspx:

在aspx中：

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

In the js file:

在js文件中：

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

---

---

• Use Control.ClientIDMode PropertyStatic

• 使用Control.ClientIDMode 属性Static

so the HTML becomes

所以 HTML 变成

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

and the js can call it as it is named of

并且js可以调用它，因为它被命名为

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

The problem with this solution is that you need to be verycareful to avoid duplicity on the idsof your page. Try never use Staticmode in a controller.

此解决方案的问题在于您需要非常小心，以避免ids页面上的重复。尽量不要Static在控制器中使用模式。

As states MSDN:

正如 MSDN 所述：

The ClientID value is set to the value of the ID property. If the control is a naming container, the control is used as the top of the hierarchy of naming containers for any controls that it contains.

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

---

---

The link of shaans's answeris a awesome place to check extra information about ClientIDMode.

shaans 的回答链接是一个很棒的地方，可以检查有关 ClientIDMode 的额外信息。

Cleaner HTML Markup with ASP.NET 4 Web Forms - Client IDs (VS 2010 and .NET 4.0 Series)

使用 ASP.NET 4 Web 窗体的更清洁的 HTML 标记 - 客户端 ID（VS 2010 和 .NET 4.0 系列）

回答by Curt

To avoid issues with rendered ID's, use a class instead. This won't change during rendering:

为避免呈现 ID 的问题，请改用类。这在渲染期间不会改变：

function contatoModal() {

//alert("Test");

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

}

HTML:

HTML：

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