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:
<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 in
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 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>
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
ClientIdMode feature in ASP.Net 4.0.