javascript adds body_0$ to ID selector

Question

I am doing a form validation using and the javascript works with just input fields but not Textboxes. I use:

 var _firstname;
 var box;

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

with a front end of :

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

When I debug the code, it adds a body_0$ to the front of the ID (ie: body_0$firstname), so I'm guessing that's why its always popping up with the "You must enter a first name" alert. Is there a work around?

score 2 · Accepted Answer · edited May 23 '17 at 11:59

No, JavaScript does not do that. It's the ASP.NET WebForms runtime that does it. the ID attribute you are providing is used by the server-side and is not output "as-is" to the client.

In its default mode, WebForms ~~mangles~~ decorates id attributes with the hierarchical structure of runat="server" element ids. This is good for WebForms, because you can reuse IDs in repeaters, panels and such without creating duplicate IDs on the client. However, it os not really good for anything else, like the browser or the struggling front-end developer.

This old question from 2009 might help:

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

Solution

From ASP.NET 4.0, it is possible to select the ClientIDMode. Set it to Predictable or Static like this:

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

Just be careful NOT to do this when you are reusing or repeating server-side controls, as this would create multiple elements with the same client-side id! (updated after dman2306's comment)

Read more about ClientIDMode on MSDN

so there is no way to translate an id on the front end to Javascript without ASP changing the ID? — Keith, Mar 07 '16 at 14:36
There is a `ClientIDMode` setting on the `Page` object. I have updated my answer. — Anders Marzi Tornblad, Mar 07 '16 at 14:37
Be careful though, when you set it to static you need to ensure you don't have duplicates. If you have this control inside an `INamingContainer` such as a repeater or grid, you will end up with duplicate IDs and things will not work as you expect. This is why ASP.NET does what it does to your IDs so it ensures uniqueness. — dmeglio, Mar 07 '16 at 14:57

score 1 · Answer 2 · answered Mar 07 '16 at 14:20

1

If your actual issue is not getting the ID's value, what about using this?

box = $("[id*=" + 'firstname' + "]").val();

it will look for any & all IDs containing the string 'firstname'

Although in your code it just runs through and shows the alert anyway. And your assignment to box is the control itself, not the value.

answered Mar 07 '16 at 14:20

VictorySaber

3,084
1
27
45

You don't have a conditional wrapper around the alert(). You assign to box, and then you call alert(). You need something like if (box === 'undefined') { alert(); } – VictorySaber Mar 07 '16 at 14:29

javascript adds body_0$ to ID selector

2 Answers2