In this post I will be talking about a new enhancement in ASP.NET 4.0.It is now possible to set the name of your controls ClientID attribute, thanks to the ClientIDMode property. Developers requested a better way of setting names of the web server controls and with the new version of ASP.NET 4.0, this is now a reality.
We can demonstrate this with a new project.I will be using C# and VS 2010.
1) Launch Visual Studio 2010
2) Create a new website, select ASP.NET Web site from the available templates. Save your website by giving it an appropriate name. e.g Clientid
3) Create a master page and add it to the page.Leave the default name.
4) Create a new web user control.Leave the default name.
5) In the WebUserControl.ascx add two web server controls,a label control and a textbox control
6) Add the web user control to the asp.net page by typing in the directives section(top of the page)
<%@ Register src=”WebUserControl.ascx” tagname=”WebUserControl1″
7) Run your application. When the default.aspx page is render by the browser, go to View->Source and you will see something like this:
<span id=”WebUserControl11_Label1″>what is your name?</span>
<input name=”WebUserControl11$TextBox1″ type=”text” id=”WebUserControl11_TextBox1″ />
8) Switch to the WebUserControl.ascx file in VS 2010, and change the ids of the label and textbox control. For example
9) Then we set the ClientIDMode to static for both controls. Save your work and run the application
10) When the default.aspx page is render by the browser, go to View->Source and you will see something like this:
<span id=”namelabel”>what is your name?</span>
<input name=”WebUserControl11$txtlabel” type=”text” id=”txtlabel” />
It is evident that now we have the ID values that we want , and it much easier and handy to use.
The other values for the ClientIDMode are:
- Legacy: This is equivalent to the ClientID property behavior for earlier versions of ASP.NET. This is also the default value.
- Predictable:This is used in data controls that use repeating templates. It uses ID attributes of the parent control’s naming containers, but generated IDs do not have names that contain strings like “ctlxxx”.
- Inherit: This specifies that a control’s ID generation is the same as its parent.