ASP.NET control client id in JavaScript

Suggested Videos
Part 7 - Disable ASP.NET button after click to prevent double clicking
Part 8 - JavaScript to automatically tab to next textbox
Part 9 - RegisterStartupScript and RegisterClientScriptBlock methods



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>

At this point your content page should look as shown below.

<%@ Page Title="" Language="C#" MasterPageFile="~/MyMatser.Master"

         AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"

         Inherits="Demo.WebForm1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

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

    <script type="text/javascript">

        document.getElementById('TextBox1').focus();

    </script>

</asp:Content>

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%>')