javascript 将 body_0$ 添加到 ID 选择器

Question

我正在使用 JavaScript 进行表单验证，并且 JavaScript 仅适用于输入字段，但不适用于文本框。我使用:

 var _firstname;
 var box;

 try {
 box = $("#firstname");
 alert("You must enter a first name");
 box.focus();
 return false;
 }catch{
 }

前端为:

  <div>First Name <span class="required">*</span></div>
  <asp:TextBox ID="firstname" name="firstname" runat="server" />

当我调试代码时，它会在 ID 前面添加一个 body_0$ (即:body_0$firstname)，所以我猜测这就是为什么它总是弹出“您必须输入名字”警报的原因。有解决办法吗？

Answer 1

不，JavaScript 不会这样做。这是由ASP.NET WebForms 运行时来完成的。您提供的 ID 属性由服务器端使用，不会“按原样”输出到客户端。

在默认模式下，WebForms mangles 装饰 id 属性具有 runat="server" 的层次结构> 元素 ID。这对于 WebForms 有好处，因为您可以在中继器、面板等中重复使用 ID，而无需在客户端上创建重复的 ID。然而，它对其他任何东西都没有什么好处，比如浏览器或苦苦挣扎的前端开发人员。

2009 年的这个老问题可能会有所帮助:

How to stop ASP.NET from changing IDs in order to use jQuery

解决方案

从 ASP.NET 4.0 开始，可以选择 ClientIDMode。将其设置为 Predictable 或 Static，如下所示:

<%@Page Language="C#"
    CodeBehind="MyFormName.aspx.cs"
    Inherits="MyWebApplication.MyFormName"
    ClientIDMode="Static" 
%> 

当您重用或重复服务器端控件时，请小心不要这样做，因为这会创建具有相同客户端 ID 的多个元素! (在 dman2306 的评论后更新)

Read more about ClientIDMode on MSDN