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

In my form I need to insert different inputs of type "text". The inputs must be html controls with name and id's. Because I send this form to a external url.

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

For the validation I do runat=server in all inputs and then I can use requiredfieldvalidator.

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

But the problem is when I look in the source after visiting the page the name and id's are all changed. for example

但问题是，当我在访问页面后查看源文件时，名称和id都被更改了。例如

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

changes to

更改

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

I have to use html controls because the external postbackurl looks at the name and id values to find the control. So I can't use asp controls. It is because of that I used html controls with runat=server

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

I appreciate any help

我很感谢任何帮助

7 个解决方案

#1

This is because you're using MasterPages.

这是因为您正在使用母版。

Controls contained within a content page take on a dynamic ID based on the Master Page hierarchy in order to avoid duplication of IDs.

在内容页中包含的控件将基于主页面层次结构的动态ID，以避免IDs的重复。

If you need to reference the control IDs and names in client-side script, you can use <%= first_name.ClientID %>.

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

If you're using .NET4 you can use ClientIDMode="Static" to make the generated IDs consistent, although this comes with its own ID-conflict caveats when, for example, using multiple instances of the same user control on a page. Rick Strahl outlines those here.

如果您正在使用. net4，您可以使用ClientIDMode="Static"来使生成的id保持一致，尽管当在页面上使用相同用户控件的多个实例时，会有它自己的id冲突警告。瑞克·斯特拉在这里概述了这些。

However, if you're using ASP.NET validators then everything should be fine. Instead of using an HTML input you should use an ASP.NET TextBox control:

但是，如果您使用的是ASP。NET验证器那么一切都应该没问题。与其使用HTML输入，不如使用ASP。网框控制:

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

#2

ClientIDMode="Static"

This usefully locks the ID of any runat="server" control, however it does not lock the 'name' attribute of a html input element.

这可以有效地锁定任何runat=“server”控件的ID，但是它不会锁定html输入元素的“name”属性。

Seeing in this instance the only reason to have the runat="server" attribute on the input is to use .Net validation, I would suggest using an external JS library such as jQuery to handle this.

在这个实例中，在输入中拥有runat="server"属性的惟一原因是使用. net验证，我建议使用jQuery这样的外部JS库来处理这个问题。

If however, like me, you need to alter the value attribute, the only work around I can see is a rather messy one. If you remove the runat="server" from the input, you can place a server control, such as a literal, within the value="" attribute.

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

For example:

例如:

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

Please don't have a go at me for such bad coding practises, it's intended as a last resort workaround to keep the name attribute from changing to a .Net style name.

请不要因为如此糟糕的编码实践而责备我，它是作为最后的解决方案来防止名称属性更改为. net样式名称。

Does anyone else know of another way to fix the name? (The form element is not defined as runat="server", but it's embedded within the normal .Net form, which is why the server is attaching it to the main form tree)

还有人知道另一种方法来改名字吗?(表单元素没有定义为runat="server"，但它嵌入在普通的.Net表单中，这就是为什么服务器要将它附加到主表单树中)

#3

ClientIDMode only affects IDs. if you also need to manage name attribute then it's useless. In my case I solved this on the client side with jQuery.

ClientIDMode仅影响id。如果您还需要管理name属性，那么它是无用的。在我的例子中，我在客户端用jQuery解决了这个问题。

$(function(){

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

});

#4

Add ClientIDMode="Static" to the control, e.g.

将ClientIDMode="Static"添加到控件中，例如。

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

This is new feature in .NET 4. Official documentation.

这是。net 4的新特性。官方文档。

#5

You can do validation in the asp page:

您可以在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>

If you want to validate in JS you can try this answer: How can I access runat="server" ASP element using javascript?

如果您想在JS中进行验证，您可以尝试以下答案:如何使用javascript访问runat="server" ASP元素?

Or if you want to use this id in client side do it like this:

或者如果您想在客户端使用这个id，请这样做:

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

#6

This questions is too big really - you need to look into the basics of how asp.net forms work. Try this article as a starting point.

这个问题实在太大了——你需要了解asp.net表单的基本工作原理。以本文为起点。

Basically after you've put the runat=server in the tag the server takes control of rendering and wiring the inputs up to objects on the server side, so this is expected behaviour.

基本上，在您将runat=server放入标记后，服务器将控制呈现并将输入连接到服务器端上的对象，因此这是预期的行为。

If you are looking to validate on the server side of this page, then post to somewhere else, you'll probably need to recreate the post, on the server side, once the validation is complete.

如果您希望在此页面的服务器端进行验证，然后将post发送到其他地方，那么在验证完成之后，您可能需要在服务器端重新创建post。

#7

Here is the same answer as @saplumbaga but in pure Javascript :

这里的答案和@saplumbaga是一样的，但是在纯Javascript中:

This fix every inputs :

这修正了所有输入:

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]);
    }
});

For a single input :

对于单个输入:

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

#1