ASP.NET 4.0 solution for the ClientID problem

Hi all, Ever needed a solution for the ugly naming of your server side controls?

Ever wanted to be able to control the id's ASP.NET automatically generates for you? Ever viewed the source of you aspx page and saw control with id like this: "ctl00_MB_btnExit" ?  This is the post for you!

The solution is very simple and all you have to do is simply wait! (For the next release of ASP.NET and VS.NET 2010)

As a brief introduction lets explain what is the problem in the first place:

Whenever we place a control (A server control actually) in our page and this server control implements the Interface INamingContrainer all the controls ID's within this control will have a special effect on their ID's. Their ID's will be build from the INamingContrainer control itself + the original ID of the control in side. This happens for ensuring each control on the Page will have a unique ID (For ASP.NET to work properly). If this INamingContrainer control himself is in another INamingContrainer control the ID will be the concatenation of this hierarchy. So we will get an ID in the form of: FirstContainer_SecondContainer_OurControlID. Now imagine a web application that works with master pages and GridView controls, we will get a very ugly and KB consumer in our client side HTML. (By the way , To easily understand what it does think of it as a Control namespace.)

The problem gets even worse if you are not specifying an ID for this INamingContrainer control. In this case the runtime will automatically assign a container ID for you (Like ctrl100 etc).

Why do we even care you ask? well for many reasons, one of them is when we have a low bandwidth we don't want a performance problem because of these ID's for example.

So how will ASP.NET 4.0 solves the problem: They added to each control (actually to every control's parent, The System.Web.UI.Control) a nice property by the name : "ClientIdMode". This property will have 4 options:

1. Legacy.

2. Static.

3. Predictable.

4. Inherit.

The Legacy option is very simple. It means that the same "algorithm" for creating the ID's is just like the previous framework versions, for example:

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

will be rendered to:

<input id="ctl00_someMasterPage_ctl00_txtName" name="ctl00$someMasterPage$ctl00$txtName" />

The Static option means: You want it, you got it!!!! It will render the exact ID as you wrote it. No container ID will be appended to the ID.This means that a programmer must be very careful with this option.

The Inherit option is the default option for all controls. This means that when rendering the controls ID it will look it up in his parent.

The Predictable option is used to be able to predict the ID when writing our code. (Since this is the problem in the first place). It will be used mostly when using DataBound control such as GridView.When using this option we will use another property by the name:"ClientIDRowSuffix"

Setting up the ClientIdMode:

Instead of having to specify this new property on each and every control we can specify it in several places:

1. In out Page directive such as:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" ClientIdMode="Some Option" %>

2. Do it for all our pages using the web.config file:

<system.web>
  <pages clientIdMode="Predictable"></pages>
</system.web>

Nice right?

Enjoy