ClientIDMode on Asp.Net 4.0

Accessing the control’s id at runtime, when the page being used is the master page, has been a persistent issue, especially when we are trying to access the control’s id(Client Id) using Javascript.

When we are adding the content to our aspx page, it resembles :

<asp:Content ID=”Content1″ ContentPlaceHolderID=”MindfireContent” Runat=”Server”>
<asp:Textbox ID=”txtMindfire” runat=”server” Text=”Proud to be Mindfireans” />
</asp:Content>

At runtime time or after Page Render the textbox will render as

Common Approach which we all are following to get the Control’s id (Client Id of the control) on Javascript function

When we trying to access the control’s id in our javascript function, We are following two approaches.

1. Calling javascript from the server side and passing control’s client id as parameter
2. Writing server side code on javascript to get the control’s id directly in Javascript

Both of the approaches are not good practice if you will consider the performance and standard of your application but we dont have any other way.So we have one property named as ClientIDMode on DotNet Framework 4.0.By using this property, the user can decide what should be the control id at runtime or after the page renders.

There are four types of ClientIDMode

1. AutoID
2. Static
3. Predictable
4. Inherit

Note: Given below are few examples for each type of ClientIDMode which shows how to access the Control’s id (Client id) through Javascript function and how the Control renders for each type.

1. AutoID

This is the existing behavior as in ASP.NET 1.x-3.x.

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" language="javascript">
        function ClientIdExample() {
            var id = document.getElementById('<%=txtMinfire.ClientID%>');
            alert(id);
        }
        window.onload = ClientIdExample
    </script>
</asp:Content>
 
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="divMindfire">
        <asp:TextBox ID="txtMinfire" ClientIDMode="AutoID" Text="Proud to be Mindfireans"
            runat="server" />
    </div>
</asp:Content> 

After Page Renders

<input name="ctl00$MainContent$txtMinfire" type="text" value="Proud to be Mindfireans" id="ctl00_MainContent_txtMinfire" />

2. Static

This option forces the control’s ClientID to use its ID value directly.This is most commonly used but the major drawback is with same control with multiple instances(like multiple instances of a usercontrol).If there are several instances of the same naming container so client ID naming conflict.

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" language="javascript">
        function ClientIdExample() {
            var id = document.getElementById('txtMinfire');
            alert(id);
        }
        window.onload = ClientIdExample
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="divMindfire">
        <asp:TextBox ID="txtMinfire" ClientIDMode="Static" Text="Proud to be Mindfireans"
            runat="server" />
    </div>
</asp:Content>

After Renders

3.Inherit

By default all the control’s ClientIDMode is Inherit,it only places the inherited control id for each controls within the masterpage

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" language="javascript">
        function ClientIdExample() {
            var id = document.getElementById('MainContent_txtMinfire'); // ContentPlaceHolderID_IDOfTheControl
            alert(id);
        }
        window.onload = ClientIdExample
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="divMindfire">
        <asp:TextBox ID="txtMinfire" ClientIDMode="Inherit" Text="Proud to be Mindfireans"
            runat="server" />
    </div>
</asp:Content>

After Page Renders

4. Predictable

Predictable is the important mode of the Client ID Mode and it is mainly used for controls that are in data-bound controls.We can generate the ClientID value by concatenating the ClientID value of the parent naming container with the ID value of the current control.ClientIDRowSuffix is a property of the control which can be added at the end of a databound control that generates the multiple rows.Best example is the GridView Control where multiple data fileds can be specified and if the ClientIDRowSuffix property is blank then it will automatically add a sequential number at the end of the databound control id.This number begins at zero and is incremented by 1 for each row and each segment is separated by an underscore character (_).

Given below examples demonstrate how the databound control id renders in both the case(without ClientIDRowSuffix and with ClientIDRowSuffix )

<asp:GridView ID="gvMindfire" runat="server" AutoGenerateColumns="false" ClientIDMode="Predictable" >
    <Columns>
        <asp:TemplateField HeaderText="ID">
            <ItemTemplate>
         <asp:Label ID="lblID" runat="server" Text='<%# Eval("ID") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
      <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Company Name">
            <ItemTemplate>
                <asp:Label ID="lblOrganisation" runat="server" Text='<%# Eval("CompName") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Note: ClientIDRowSuffix is blank by default in the above gridview declaration and just follow the given below syntax for adding the ClientIDRowSuffix in the gridview declaration

<asp:GridView ID=”gvMindfire” runat=”server” AutoGenerateColumns=”false” ClientIDMode=”Predictable” ClientIDRowSuffix=”ID” >

Output without ClientIDRowSuffix

<table id="gvMindfire" style="border-collapse: collapse" cellspacing="0" rules="all" border="1">
    <tbody>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Company Name</th>
        </tr>
        <tr>
            <td><span id="gvMindfire_lblID_0">001</span></td>
            <td><span id="gvMindfire_lblName_0">Srikanta</span></td>
            <td><span id="gvMindfire_lblOrganisation_0">Mindfire</span></td>
        </tr>
        <tr>
            <td><span id="gvMindfire_lblID_1">007</span></td>
            <td><span id="gvMindfire_lblName_1">Kaushik</span></td>
             <td><span id="gvMindfire_lblOrganisation_1">Mindfire</span></td>
        </tr>
        .........
        .........
    </tbody>
</table>

Output with ClientIDRowSuffix

<table id="gvMindfire" style="border-collapse: collapse" cellspacing="0" rules="all" border="1">
    <tbody>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Company Name</th>
        </tr>
        <tr>
            <td><span id="gvMindfire_lblID_001">001</span></td>
            <td><span id="gvMindfire_lblName_001">Srikanta</span></td>
            <td><span id="gvMindfire_lblOrganisation_001">Mindfire</span></td>
        </tr>
        <tr>
            <td><span id="gvMindfire_lblID_007">007</span></td>
            <td><span id="gvMindfire_lblName_007">Kaushik</span></td>
             <td><span id="gvMindfire_lblOrganisation_007">Mindfire</span></td>
        </tr>
        ......
    </tbody>
</table>

You can set ClientIDMode property in 3 ways

1.Application Level2.Page Level

3.Control Level

Setting ClientIDMode at Application Level

You need to set it at System.Web section of Web.config<system.web>
<pages clientIDMode=”Static”>
</pages>
</system.web>

Setting ClientIDMode at Page Level

<%@ Page Language=”C#” ClientIDMode =”Inherit” AutoEventWireup=”true” CodeBehind=”Mindfire.aspx.cs” Inherits=”Mindfire” %>

Setting ClientIDMode at Control Level

Each and every server control in ASP.NET 4.0 has this property and the default value is inherit.

<asp:TestBox id=”txtMindfire” runat=”server” ClientIDMode =”Static”> </asp:TextBox>

Hope you find this helpful.Happy Coding !!!

Srikanta Barik , Dot Net Developer, Mindfire Solutions.

Related Tags: .NET4.0, ASP.NET, NET

Author : Srikanta Barik

ClientIDMode on Asp.Net 4.0

Leave a Reply

Subscribe With Us