25

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.

For the validation I do runat=server in all inputs and then I can use 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

<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

I appreciate any help

Xm7X
  • 861
  • 1
  • 11
  • 23
Ozkan
  • 2,011
  • 6
  • 29
  • 43

6 Answers6

28

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.

If you need to reference the control IDs and names in client-side script, you can use <%= 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.

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:TextBox id="first_name" runat="server" CssClass="formright" />
Town
  • 14,706
  • 3
  • 48
  • 72
  • 1
    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 – Ozkan Apr 26 '11 at 15:10
  • @Ozkan: ASP.NET controls just render as standard HTML controls on the client anyway, so your `asp:TextBox` will still be rendered as an HTML `input` with `ID` and `name` attributes. – Town Apr 26 '11 at 15:12
  • 1
    @Town how can i set a `name` for a `asp:TextBox` then? i tried it, the ids and names changes also... and `clientIDMode` is also not possible because we are using framework 3.5. – Ozkan Apr 26 '11 at 15:29
  • @Ozkan: you can just specify a `name` attribute in the same way as you would with an HTML control - anything you specify that isn't a property of TextBox will be rendered as-is. – Town Apr 26 '11 at 15:32
  • @Town I tried it, the ids and names changes also to a different one unfortunately.. – Ozkan Apr 26 '11 at 15:36
  • @Ozkan: Is the problem that your RequiredFieldValidator isn't working? Or is that you're expecting specific IDs which you're not getting on account of the IDs being dynamically created? If it's the latter, then use `ClientIDMode="static"`. – Town Apr 26 '11 at 15:38
  • @Town my validators work fine, no problem with that. the problem is actually the ids and the names that are changed what i want is that they remain the same. And `clientIDMode` is also not possible because we are using framework 3.5 – Ozkan Apr 26 '11 at 15:45
  • @Ozkan: are you only using runat="server" so you can use the validation? Could you just use client-side validation such as jQuery validate? That way the IDs would be consistent... – Town Apr 26 '11 at 16:05
  • @Town yes that is what i am going to do right now. i'll keep you all updated about this – Ozkan Apr 28 '11 at 08:24
  • Finally i used Javascript validation and for the postback button i used a asp:Button:``` http://www.aspadvice.com/blogs/joteke/archive/2006/04/30/17118.aspx – Ozkan Apr 29 '11 at 07:20
20
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.

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.

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.

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.

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)

Radderz
  • 2,770
  • 4
  • 28
  • 40
13

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.

$(function(){

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

});
Chad
  • 1,531
  • 3
  • 20
  • 46
saplumbaga
  • 141
  • 1
  • 5
  • 1
    This works for me, I've added a pure javascript version because I always avoid jQuery when possible. – Apolo Mar 01 '16 at 10:43
  • @Apolo although the intention was good, you should write your own answer for that, editing other answer's to add significative different content is discouraged. Please read http://meta.stackexchange.com/questions/11474/what-is-the-etiquette-for-modifying-posts – Jcl Mar 01 '16 at 11:32
  • Your link's accepted answer state : "You edit to make things better, clearer, more effective -- never to change meaning." - I was not changing the meaning, just putting another version (some would say better and more effective) of the same algorithm. – Apolo Mar 02 '16 at 14:28
  • anyway, I posted my own answer – Apolo Mar 02 '16 at 14:36
7

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

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

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

Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208
3

You can do validation in the asp page:

 <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?

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

protected override void OnPreRender(EventArgs e)
{
    first_name.ClientIDMode = ClientIDMode.Static;
}
Community
  • 1
  • 1
Nofar Eliasi
  • 109
  • 5
0

Here is the same answer as @saplumbaga but in pure 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"));
});
Apolo
  • 3,844
  • 1
  • 21
  • 51