设置 runat=server 时输入名称和 id 发生变化

Question

在我的表单中，我需要插入“文本”类型的不同输入。输入必须是带有名称和 ID 的 html 控件。因为我将此表单发送到外部 url。

对于验证，我在所有输入中执行 runat=server，然后我可以使用 requiredfieldvalidator。

但问题是当我在访问页面后查看源代码时，名称和 ID 都已更改。 例如

<input id="first_name" class="formright" type="text" name="first_name" runat="server" />

改成

<input name="ctl00$cphContent$first_name" type="text" id="ctl00_cphContent_first_name" class="formright">

我必须使用 html 控件，因为外部 postbackurl 会查看名称和 id 值来查找控件。所以我不能使用asp控件。正因为如此，我使用了带有 runat=server 的 html 控件

感谢您的帮助

Answer 1

这是因为您使用的是 MasterPages。

内容页中包含的控件采用基于母版页层次结构的动态 ID，以避免 ID 重复。

如果您需要在客户端脚本中引用控件 ID 和名称，可以使用<%= first_name.ClientID %>。

如果您使用的是 .NET4，则可以使用 ClientIDMode="Static" 使生成的 ID 保持一致，尽管这会带来其自身的 ID 冲突警告，例如，在页面上使用同一用户控件的多个实例时。 Rick Strahl 概述了这些 here。

但是，如果您使用的是 ASP.NET 验证器，那么一切都应该没问题。而不是使用 HTML input 你应该使用 ASP.NET TextBox control:

<asp:TextBox id="first_name" runat="server" CssClass="formright" />

Answer 2

ClientIDMode="Static"

这有助于锁定任何 runat="server" 控件的 ID，但它不会锁定 html 输入元素的 'name' 属性。

在这种情况下，在输入中使用 runat="server" 属性的唯一原因是使用 .Net 验证，我建议使用外部 JS 库（例如 jQuery）来处理此问题。

但是，如果您像我一样需要更改 value 属性，那么我能看到的唯一解决方法是一个相当混乱的解决方法。如果从输入中删除 runat="server"，则可以在 value="" 属性中放置服务器控件，例如文字。

例如：

<input id="first_name" class="formright" type="text" name="first_name" value="<asp:Literal id="litFirstNameValue" runat="server" />"  />

请不要因为这种糟糕的编码习惯而对我采取行动，它是作为最后的解决方法来防止名称属性更改为 .Net 样式名称。

还有其他人知道改名的另一种方法吗？ （表单元素未定义为 runat="server"，但它嵌入在正常的 .Net 表单中，这就是服务器将其附加到主表单树的原因）

Answer 3

ClientIDMode 仅影响 ID。如果您还需要管理名称属性，那么它是没用的。就我而言，我使用 jQuery 在客户端解决了这个问题。

$(function(){

    $("#inputname").prop("name",$("#inputname").prop("id"));

});

Answer 4

在控件中添加ClientIDMode="Static"，例如

<asp:TextBox ID="first_name" runat="server" ClientIDMode="Static" />

这是 .NET 4 中的新功能。Official documentation。

Answer 5

您可以在asp页面中进行验证：

 <asp:Label runat="server" AssociatedControlID="txtFullName" CssClass="hidden"></asp:Label>
        <asp:TextBox runat="server" ID="txtFullName" CssClass="user" MaxLength="25"></asp:TextBox>
        <asp:RegularExpressionValidator
            ID="regFullName"
            runat="server"
            CssClass="has-error"
            ControlToValidate="txtFullName"
            ValidationExpression="[a-zA-Z-'\s]+"
            ValidationGroup="ValidationGroupName"
            Display="Dynamic"
            OnServerValidate="regFullName">
        </asp:RegularExpressionValidator>

如果你想在 JS 中进行验证，你可以试试这个答案： How can I access runat="server" ASP element using javascript?

或者，如果您想在客户端使用此 ID，请执行以下操作：

protected override void OnPreRender(EventArgs e)
{
    first_name.ClientIDMode = ClientIDMode.Static;
}

Answer 6

这里的答案与@saplumbaga 相同，但使用的是纯 Javascript：

• 这会修复每个输入：

  window.addEventListener("load", function () {
      var fix = function(el) { el.setAttribute("name", el.getAttribute("id")); };
      var els = document.getElementsByTagName("input");
      for (var i = 0; i < els.length; i++) {
          fix(els[i]);
      }
      els = document.getElementsByTagName("select");
      for (var i = 0; i < els.length; i++) {
          fix(els[i]);
      }
      els = document.getElementsByTagName("textarea");
      for (var i = 0; i < els.length; i++) {
          fix(els[i]);
      }
  });
  

• 对于单个输入：

  window.addEventListener("load", function () {
      var el = document.getElementById("MyID");
      el.setAttribute("name", el.getAttribute("id"));
  });