If you want to select a particular element to get the value or to process it, first you would select that element by id – as no two elements can have the same id in a valid HTML. Let us assume you have the following ASP.Net TextBox server control in your WebForm. We are taking asp:TextBox control here but the concept is still applicable to all ASP.Net server controls.
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
It should be noted this ID attribute is different from that of id attribute which is being used at client side in javascript/jQuery – note the difference in case. To process this TextBox control at the client side using javascript/jQuery, we need to give the correct id value in order to select this element.
In the above ASP.Net server control, we have given the ID attribute value as txtName. The generated id value does not need to be same as that of this ID value. The generated id value could be something like ctl00_ContentPlaceHolder1_txtName or ContentPlaceHolder1_txtName, when you have this TextBox control in a Master/content page.
Before seeing the available options of selecting the element by id, let us revisit some of the fundamentals so that it would be easier to understand.
When you access ASP.Net web page, following are the sequence of events happen at high level
- User request the ASP.Net Web page by typing the URL. The request is forwarded to the web server.
- The web server(IIS in our case), then forwards the request to ASP.Net. ASP.Net converts all the server controls to HTML elements as browsers could understand only HTML elements. If you have used ClientID like below , the generation of id value happens at this step.
<%= txtName.ClientID %>
Please remember that any code wrapped inside <%= Any code %> is a ASP.Net code executed at the server side.
- The HTML page is constructed with the id value generated and sent back to the requesting client.
Options to get the id of any ASP.Net server Control
Option 1 : Using ClientID property of the ASP.Net server Control
You can use the expression <%= txtName.ClientID %> to get the id the ASP.Net server control
When used with javascript, you can use like below
document.getElementById('# <%= txtName.ClientID %>');
document.getElementById function in javascript will return you the element if you pass the id. When you pass a string starting with #, it means that you are passing the id to identify the element (the id is the string followed by #). This is a generic selector pattern which can be used with javascript and jQuery.
If you are using jQuery, you can use like below
$('# <%= txtName.ClientID %>')
$ is a jQuery function which could be used in many ways. Here it is being used to select the element by passing the id of HTML element.
Pros:
This will work irrespective of whether you use Master Pages in your application or not.
Cons:
This expression is evaluated by ASP.Net when parsing the aspx page. So this will work only when used in aspx page. You cannot use this expression if you are using this code in separate js file.
Option 2: Use Static ClientIDMode in ASP.Net server control
You can make the ASP.Net to use the same id that you give in ID attribute when you set the ClientIDMode attribute value to Static
<asp:TextBox ID="txtName" runat="server" ClientIDMode="Static"></asp:TextBox>
Now, the generated id will be txtName only – the same value that we give in ID attribute.
When used with javascript, you can use like below
document.getElementById('#txtName');
If you are using jQuery, you can use like below
$('#txtName');
Even if you use the expression <%= txtName.ClientID %> with ClientIDMode=”Static”, the impact is the same. Your generated id will be same as that of ID value that you give in ASP.Net server control- txtName in our case.
This clientMode property is introduced from .Net framework 4.0 only. So you cant use this option in previous versions of .Net
If you like this article, please subscribe to my mailing list in the below form