We have been using
ClientID’s in ASP.NET 2.0/3.5 that makes each control to generate the unique
client side id attribute to that page or
browser. But these ID’s were long and randomly generated. Developers who work
on Client-Side programming that uses Java Script, JQuery or Ajax have been
suffering a lot spending considerable amount of time when it they need to reference
those ClientID’s in the client side scripts.
Now the good news is
that, ASP.NET 4.0 comes with new ClientIDMode property, gives full control to
the developer on the ClientID’s generated by ASP.NET controls.
ClientIDMode can
take the following four possible values
- AutoID - ASP.NET generate IDs as it does in v3.5 and earlier versions.
- Static - ASP.NET use exactly the same ID given to the server control for its client-side ID.
- Predictable - ASP.NET try to generate IDs that are guessable from looking at the structure of the page.
- Inherit - ASP.NET generate a client-side ID for the page or control using the same ClientIDMode as its parent. i.e. the client ID gets inherited from the parent control.
You can set this
property in 3 ways
1.Control Level
2.Page Level
3.Application Level
Setting ClientIDMode at
Control Level
Each and every
server control in ASP.NET 4.0 has this property and the default value is
inherit.
1.<asp:panel id="pnl" runat="server"
cssclass="newStyle1"
2.ClientIDMode ="Static">
</asp:panel>
Setting ClientIDMode at Page
Level
1.<%@ Page Language="C#" ClientIDMode ="Inherit"
2.AutoEventWireup="true"
3.CodeBehind="Category.aspx.cs"
4.Inherits="WebApplication3.Cat" %>
Setting ClientIDMode at
Application Level
You need to set it at System.Web section of Web.config
1.<system.web>
2.<pages clientIDMode="Predictable">
3.</pages>
4.</system.web>
ClientIDRowSuffix
Another interesting
feature of the ClientID improvement in ASP.NET 4.0 is the ClientIDRowSuffix
.This can be applied to DataBound or List controls. This is used to take
control on how ID values for template controls in databound controls are
generated. This requires that the
ClientIDMode is set to Predictable.
1.<asp:GridView runat="server"
2.ID="gvEmp" AutoGenerateColumns="False"
3.ClientIDMode ="Predictable" ClientIDRowSuffix="EMPID">
4.</asp:GridView>
Best Practices
- Add ClientIDMode = "Static" in application level web.config
- Using ClientIDMode = "AutoId" will work the best even in worst cases.
- Add ClientIDMode = "Predictable" to each List Control Children Item Template of Databound Controls.
- When ever naming conflicts occurs Override ClientIDMode to Predictable
- When working with Web Server Control Development leave at default behavior i.e. Inherit from parent
- Override if and only if necessary that might be in individual sub controls
