jump to navigation

ASP.NET 4.0 and ClientID Mode September 20, 2009

Posted by fofo in ASP.NET 4.0, C#, c# 4.0, Visual Studio 2010.
Tags: ,
trackback

In this post I will be continuing my series of posts regarding ASP.NET 4.0 enhancements.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″
tagprefix=”uc1″ %>

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:

<div>

<span id=”WebUserControl11_Label1″>what is your name?</span>
<input name=”WebUserControl11$TextBox1″ type=”text” id=”WebUserControl11_TextBox1″ />

</div>

This is how the controls take their name. The first part is the name of the parent control and the second part is the name of the control itself. If you have many nested elements you end up with messy control names.If you wanted to access these controls in external Javascript files, you had no other alternative but to use these names.

8) Switch to the WebUserControl.ascx file in VS 2010, and change the ids of the label and textbox control. For example

<asp:Label ID=”namelabel”
<asp:TextBox ID=”txtlabel”

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.

Add to FacebookAdd to NewsvineAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Furl

About these ads

Comments»

1. ASP.NET 4.0 and ClientID Mode « DOT NET RULES Scripts Rss - September 20, 2009

[...] here: ASP.NET 4.0 and ClientID Mode « DOT NET RULES By admin | category: asp.net script | tags: asp, better-way, clientidmode, controls, [...]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,792 other followers

%d bloggers like this: