All about Client ID Mode in ASP.NET 4.0


Information

Introduction

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.
view sourceprint?

<asp:panel id="pnl" runat="server" cssclass="newStyle1"
ClientIDMode ="Static"> </asp:panel>

Setting ClientIDMode at Page Level

view sourceprint?
<%@ Page Language="C#" ClientIDMode ="Inherit"
AutoEventWireup="true"
CodeBehind="Category.aspx.cs"
Inherits="WebApplication3.Cat" %>

Setting ClientIDMode at Application Level

You need to set it at System.Web section of Web.config
view sourceprint?

<system.web>
<pages clientIDMode="Predictable">
</pages>
</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.

view sourceprint?

<asp:GridView runat="server"
ID="gvEmp" AutoGenerateColumns="False"
ClientIDMode ="Predictable" ClientIDRowSuffix="EMPID">
</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

    0 comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)