ASP.Net 4.0 ClientId

In the older version of ASP.Net, the Framework modifies ClientId and until runtime, you do not know what the client-side ID would be, this makes the client-side programming very difficult. Also modifying the page (for example, you add a master page or control inside user control) can result in different client-side IDs generated. To handle this in the old version of ASP.Net you use <%= Control.ClientID %> in client-side code (Javascript) to get the client-side ID of the control.

Until ASP.NET 4.0, the algorithm for generating the client-side id has been to concatenate the parent control/ container id (if any) with the control id, and in the case of repeated controls (like a grid), to add a prefix and a sequential number. This has always guaranteed that the client-side IDs are unique.

Now with the new feature added to ASP.Net 4.0, you can control the client-side ID generated by Framework at design time.

ASP.Net 4.0 provides four algorithms to generate the ClientId for controls. You can select which algorithm to use by setting the ClientIdMode property at the control page or application level.

Below are the descriptions of each of the algorithms.

AutoId

This is equivalent to the algorithm for generating ClientID that was used in older versions of ASP.NET. The ClientId is generated by concatenating the id of each parent naming container with the id of control. In the data binding scenario, the control ID is prefixed with an incremental value. Each segment is separated by an underscore (_) character.

<asp:TextBox ID="txtName" runat="server" ClientIDMode="AutoID"></asp:TextBox>

Retendered HTML

<input name="ctl00$MainContent$txtName" type="text" id="ctl00_MainContent_txtName" />

Static

This specifies that the ClientID value will be the same as the ID, without concatenating the IDs of parent naming containers. This can be useful in user controls, as we use user control on different pages and in different container controls.

<asp:TextBox ID="txtName" runat="server" ClientIDMode="Static"></asp:TextBox>

Retendered HTML

<input name="ctl00$MainContent$txtName" type="text" id="txtName" />

Predictable

This algorithm is primarily used for data control. It concatenates the ID properties of the control's naming containers and in case of data-bound controls that generate multiple rows, a sequential number will be added at the end of the ClientId for the uniqueness of control ID but ClientID does not contain prefixes like "ctlxxx".

<asp:GridView ID="Subject" runat="server" AutoGenerateColumns="false" ClientIDMode="Predictable">
    <Columns>
        <asp:TemplateField HeaderText="SubjectId">
            <ItemTemplate>
                <asp:Label ID="SubjectId" runat="server" Text='<%# Eval("SubjectId") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="SubjectName">
            <ItemTemplate>
                <asp:Label ID="SubjectName" runat="server" Text='<%# Eval("SubjectId") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Retendered HTML

<table cellspacing="0" rules="all" border="1" id="MainContent_Subject" style="border-collapse:collapse;">
    <tr>
        <th scope="col">SubjectId</th><th scope="col">SubjectName</th>
    </tr>
    <tr>
        <td>
            <span id="MainContent_Subject_SubjectId_0">100</span>
        </td><td>
            <span id="MainContent_Subject_SubjectName_0">100</span>
        </td>
    </tr>
    <tr>
        <td>
            <span id="MainContent_Subject_SubjectId_1">101</span>
        </td><td>
            <span id="MainContent_Subject_SubjectName_1">101</span>
        </td>
    </tr>
</table>

The Predictable algorithm works with the ClientIDRowSuffix property of the control. You can set the ClientIDRowSuffix property to the name of a data field, and the value of that field is used as the suffix for the generated ClientID. Normally we use the primary key of a data record as the ClientIDRowSuffix value.

<asp:GridView ID="Subject" runat="server" AutoGenerateColumns="false" ClientIDMode="Predictable" ClientIDRowSuffix="SubjectId">
    <Columns>
        <asp:TemplateField HeaderText="SubjectId">
            <ItemTemplate>
                <asp:Label ID="SubjectId" runat="server" Text='<%# Eval("SubjectId") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="SubjectName">
            <ItemTemplate>
                <asp:Label ID="SubjectName" runat="server" Text='<%# Eval("SubjectId") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Retendered HTML

<table cellspacing="0" rules="all" border="1" id="MainContent_Subject" style="border-collapse:collapse;">
    <tr>
        <th scope="col">SubjectId</th><th scope="col">SubjectName</th>
    </tr>
    <tr>
        <td>
            <span id="MainContent_Subject_SubjectId_100">100</span>
        </td><td>
            <span id="MainContent_Subject_SubjectName_100">100</span>
        </td>
    </tr>
    <tr>
        <td>
            <span id="MainContent_Subject_SubjectId_101">101</span>
        </td><td>
            <span id="MainContent_Subject_SubjectName_101">101</span>
        </td>
    </tr>
</table>

Inherit

This is the default algorithm for controls. The control inherits the ClientIdMode settings of its parent control.

In this article, we have seen how you can make use of the ClientIdMode feature in ASP.Net 4.0.