ASP NET control client id in JavaScript
Link for all dot net and sql server video tutorial playlists
/ kudvenkat
Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
/ @aarvikitchen5572
In this video we will discuss when to use ASP.NET control's ClientID instead of ID in JavaScript.
Every ASP.NET server side control has ID property. At runtime the ID property is converted to id attribute and the resulting HTML is sent to the client browser.
For example, we have an ASP.NET TextBox control with ID="TextBox1" on the page.
[asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]
When the webform is rendered, it would produce the following HTML
[input name="TextBox1" type="text" id="TextBox1" /]
Notice that the id attribute value in the generated HTML is same as the ID property value.
An aspx page with the following HTML and JavaScript works as expected. When the page is rendered keyboard focus is set to TextBox1 control.
[asp:TextBox ID="TextBox1" runat="server"]
[/asp:TextBox]
[script type="text/javascript"]
document.getElementById('TextBox1').focus();
[/script]
What if you have a master page
In realworld, most asp.net web applications have master pages. If you have a master page and if the control is present inside a content control, the generated ID attribute value of the control will be different from ID property value
1. Add a master page to your project. Name it MyMaster.master.
2. Right click on the master page, and select "Add Content Page" from the context menu.
3. In the content page you just added, copy and paste the following HTML and JavaScript in content control with ID="Content2"
[asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]
[script type="text/javascript"]
document.getElementById('TextBox1').focus();
[/script]
When you view the content page in the browser, you will get the following JavaScript error
Error: Unable to get property 'focus' of undefined or null reference
Why is the JavaScript code not able to find textbox with id="TextBox1"
This is because at runtime, ASP.NET has generated a different id attribute value. To see the generated id attribute value, view the page source in the browser.
[input name="ctl00$ContentPlaceHolder1$TextBox1" type="text"
id="ContentPlaceHolder1_TextBox1" /]
[script type="text/javascript"]
document.getElementById('TextBox1').focus();
[/script]
If the asp.net control is present inside another container control, the generated id attribute value will be different. Here are a few examples of container controls
Content control
UserControl
GridView
There are several ways we can make this work
1. Use the computed id attribute value in the script as shown below. The downside of this approach is that, if someone changes the ContentPlaceHolder ID in the master page, your script will break again.
[asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]
[script type="text/javascript"]
document.getElementById('ContentPlaceHolder1_TextBox1').focus();
[/script]
2. Set ClientIDMode="Static" on the TextBox control. This will ensure that the generated id attribute value matches the server side ID property. With this approach you will have to make sure that no other control on the web page has the same ID.
[asp:TextBox ID="TextBox1" ClientIDMode="Static" runat="server"]
[/asp:TextBox]
[script type="text/javascript"]
document.getElementById('TextBox1').focus();
[/script]
3. Use ClientID property of the server control in your script.
[asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]
[script type="text/javascript"]
document.getElementById('[%=TextBox1.ClientID%]').focus();
[/script]
What if the TextBox is present in the MasterPage
If the TextBox is present in the MasterPage and not in the Content page, then the generated ID attribute value of the control will be the same as ID property. So in this case you can use document.getElementById('TextBox1')
Summary :
If the ASP.NET control is not present inside any other container control, then the generated ID attribute value of the control will be the same as ID property. So in this case you can use document.getElementById('TextBox1')
If the ASP.NET control is present inside any other container control, then the generated ID attribute value of the control will be different from ID property value. So in this case you have to use document.getElementById('[%=TextBox1.ClientID%]')
On this page of the site you can watch the video online ASP NET control client id in JavaScript with a duration of hours minute second in good quality, which was uploaded by the user kudvenkat 10 March 2015, share the link with friends and acquaintances, this video has already been watched 23,183 times on youtube and it was liked by 138 viewers. Enjoy your viewing!
