Reference ASP.NET control by ID in JavaScript?

Question

When ASP.NET controls are rendered their ids sometimes change, like if they are in a naming container. Button1 may actually have an id of ctl00_ContentMai

Answer 1

You can get the ID by using document.getElementById method as well.

Answer 2

Oh, and I also found this, in case anyone else is having this problem.

Use a custom jQuery selector for asp.net controls: http://john-sheehan.com/blog/custom-jquery-selector-for-aspnet-webforms/

Answer 3

You can change to ClienIDMode property of the control to 'Static' that will result the same ID that you give the control in the .NET code.

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

will result:

<input name="ctl00$MainContent$TextBox1" type="text" id="TextBox1"> 

so you have the same ID.

Answer 4

Couple of thoughts on this:

1) I've had a lot of luck getting elements by css class instead of id because asp.net ids are not reliable as you stated. I use this function and it performs reasonably well:

function getElementsByClass(searchClass,node,tag) {
 var classElements = new Array();
 if ( node == null )
    {
        node = document;
    }

 if ( tag == null )
    {
        tag = '*';
    }

 var els = node.getElementsByTagName(tag);
 var elsLen = els.length;
 var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

 for (i = 0, j = 0; i < elsLen; i++) 
    {
        if ( pattern.test(els[i].className) ) 
            {
                classElements[j] = els[i];
                j++;
            }
      }
 return classElements;
}

2) jQuery helps here alot. Using jQuery you can reliably get elements where the id ends with a certain string. While this is not "the" reason to use jQuery it's definitely a plus.

3) This will be fixed in asp.net 4.0 so hang in there :-) http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx

Answer 5

I prefer data bound tags in the markup document.getElementById('<%#TextBox1.ClientID %>').value, over the use of the server side tag implementation <% = TextBox1.ClientID %>.

Server side tags prohibit you from adding controls to the dom in the code behind. This need commonly arises as you build out your application and the databound approach may save you from major rewrites.

When using server side tags also know as 'code blocks' performing this common operation

this.Form.Controls.Add(myContorl);

generates this error at run time:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Unfortunately this often only become inherently obvious after you have built out your web site.

When implementing data bound control '<%#TextBox1.ClientID %>' resolve the value of control properties referenced in the markup, in the appropriate place such as the end of Page_Load data bind like this:

Page.DataBind()

Keep in mind Page.DataBind() causes child controls on the page to also DataBind, this may be an unwanted side effect if the page handles the data binding of certain child controls separately. If this is the case, data binding can be performed on the individual control like this:

TextBox1.DataBind()

An applications evolution eventually leads to some sort of base site wide functionality where you may want to add base controls, once you've peppered you website application with server side tags replacing them with databinds becomes problematic, especially when pages have been coded to handle databinding on their own.

Answer 6

For 'ctl00_ContentMain_Button1' - In asp.net when page renders in the browser, first part remains same 'ctl00'. Second part is ID of ContentPlaceHolder used 'ContentMain'. Third is ID of a control 'Button1'

I liked this http://codedotnets.blogspot.in/2012/01/how-get-id-server-control-javascript.html