ClientIdMode Property

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.
There are four types of ClientIDMode

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

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>

 

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

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

 

 

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>

 

 

You can set ClientIDMode property in 3 ways

1.Application Level
2.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>