ASP.Net 4.0 ClientId

Pradeep Chandraker
May 13, 2010
12.2k
0
0
Article

In 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 master page, or control inside user control) can result in different client side id generated. To handle this in 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 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 into 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 control or 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 id of each parent naming container with the id of control. In data binding scenario the control id is prefixed with an incremental value. Each segment is separated by underscore (_) character.

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

Retendered HTML:

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 in different pages and in different container controls.

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

Retendered HTML:

Predictable

This algorithm is primarily used for data controls. It concatenates the ID properties of the control's naming containers and in case of data bound controls that generates multiple rows, a sequential number will be added at the end of the ClientId for the uniqueness of control id's but ClientID do not contain prefix 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>