Click here to Skip to main content
15,867,704 members
Articles / Web Development / ASP.NET

Client Ids Generation with ASP.NET 4.0

Rate me:
Please Sign up or sign in to vote.
4.78/5 (34 votes)
10 Sep 2010CPOL7 min read 89.6K   42   27
This article discusses about one of the new features "Client ID generation" of ASP.NET 4.0

Table of Contents

Introduction

From the past few days, I started exploring ASP.NET 4.0 webforms enhancement. I really found some exciting enhancements in ASP.NET 4.0 and am sure, this is all going to be make web development simple and will provide more flexibility to us. So I started picking the most exciting features of ASP.NET 4.0 one by one. Earlier, I wrote on URL Routing, you can go through to the link given below:

As form the Title, you know that here I am going to discuss how we can control the generation of Client Ids of ASP.NET Server controls in ASP.NET 4.0. This Client Ids was another thing that was earlier a mystery for me, but later I identified the algorithm that is used to generate the ClientIds for the server controls by the .NET engine, but they have never been user friendly.

Prerequisite

  • Visual Studio 2010

Why Client Ids

Client Ids have always been a problem for us. But now a days, in new age applications, we are moving more towards the client side programming in new Rich Internet applications. Many new technologies and the way of programming have evolved in the last few years to make very rich UI like JQuery, JSon, Dojo.

In DOM, to access a control, client id plays a pivotal role. So Microsoft is also trying to make our life easier by providing the capability to have control over the client id generation which will ensure easy, simple and less error prone RIA development.

Client Ids Earlier

So let's discuss how the ClientIds were generated earlier. First, I will start with normal control, say textbox control or a label. So here the client Ids that are generated were starting with prefix of all the naming containers from top to bottom separated as underscore. And actually this was a good idea to generate the unique id at client side. But as I discussed, ClientIds are the key part of new age development. Let's look at the example for a simple textbox server control. My aspx looks like:

Normal Page

Fig: Normal Page

So from the above picture, we can see that my label and textbox are inside a contentplaceholder. Now let's look at the ClientId:

View Source - Normal Page

Fig: View Source - Normal Page

Now here client Id is ctl00_ContentPlaceHolder1_myTextBox. If we go one by one, the ctl00 is the counter, the next one is ID of contentplaceholder and next id of textbox.

So one thing, as you move the control to some other part, the Client Id will get changed as well.

So although we know the ID is going to be unique on the page, but still you don't have any control over itFrown. .NET engine will generate the ClientIds according to its algorithm for you ).

So this is all about of the simple controls. Now lets talk about some data controls, like gridview, listview, dropdown, etc. Here in these controls, what we do is we just bind the datasource to the control. And at runtime based on the data, the number of rows(controls) are generated. So what about the client Ids here. Here also, the Client Ids are being generated in the same way as I already discussed with prefix of rownumber. So let's have a look at the example.

This is my aspx code for GridView. Here I am showing ID, Book Name and Price:

Page with data control

Fig: Page with data control

So in the above example, I have taken a gridview. And in this, I have three labels in different ItemTemplates. The gridview is in contentplaceholder.

Now look to the ClientIds:

View Source - Page with data control

Fig: View Source - Page with data control

You can see the id is like ctl00_ContentPlaceHolder1_gridviewBooks_ctl02_lblID. So here if we go one by one, first the counter the contentplaceholder id again rowcounter generated in sequence for every row by .NET engine to make it unique and last label ID.

So it becomes very uneasy to use.

But as in new era web development, when we doing lots of work at client side, the Client ids become a key part in web development.

Control Client Ids Generation with ASP.NET 4.0

ASP.NET 4.0 provides the power to control Client Ids generation. For that, it provides the new property ClientIDMode property to handle this. This property enables us to specify how the Client Ids will be generated for the controls. This provides four options:

  • AutoID
  • Static
  • Predictable
  • Inherit

We'll discuss them one by one.

AutoID: This property is the same as the earlier version of .NET. Specify this value if you don't want any changes in the Client Id generation from the earlier version as I discussed in ClientIDs in earlier versions.

Static: This means the you want the static id of your control. You should use this property when you know the ID is going to be unique on the page. Here .NET engine will generate the Client Ids as it is, without adding any suffixes or prefixes in it. This mode is mainly used for normal single control. Let's look at the example.

Normal page with ASP.NET 4.0

Fig: Normal page with ASP.NET 4.0

Here as you seen in the picture, I set the ClientIDMode for Label AutoID and for TextBox I set it Static. Now let's see the generated Client Ids:

Brij_634099931624398203_normalpage4.jpg

Fig: View Source: Normal page with ASP.NET 4.0

Now if you see the client ID of Label, it is the same as the earlier one because here I set it to Auto.

But for the TextBox, I set it static. So here the Client Id is the same as the ID that we set it on aspx page. This is the beauty of ASP.NET 4.0. So if we set it to static, the .NET engine won't generate a new client id for the control; it will use the ID of the control as Client ID.

Note: One thing needs to be made sure here, if we set the mode to static then there should be no control on the page with the same id because it will have the same client id on the page and it may be disastrous when we access it from Clientside.

Predictable: This is another mode that I liked for the ClientId generation. When you exactly don't know whether the Id is unique on the page or not, then you can use this property. This value enables us to the predict the client ids on the rendered page. When you set mode to this, you need to set some more properties according to your own choice.

Now I will take the example as above. Now here the aspx code would be like:

Data control page with ASP.NET 4.0

Fig: Data control page with ASP.NET 4.0

Here one thing is we are using datacontrol, then we cannot set it as static because there are going to be multiple controls generated based on the data.

So here we will be using mode as Predictable so that we can predict what will be the id of the control. We need to set one more property ClientIDRowSuffix here. I set it ID means the ID column.

Now let's look at the generated Client Ids:

View Source: Data control page with ASP.NET 4.0

Fig: View Source: Data control page with ASP.NET 4.0

Now here if we look at the ClientID, here it is MainContent_gridviewBooks_lblName_1. So if we look at it deeply, then we find that there is no counter like thing. Here we have first id of contentplaceholder, the id of gridview, the id of label, the suffix id that we set. So it's really predictable Smile and similarly for other rows.

Inherit: This is also value to set to this property. As the name suggests, it means the Id generation of the control will be the same as the parent control. This is the default behavior of the control.

Setting the Property at Various Levels

There are various places where we can set the ClientIDMode property.This can be set at control level, page level as well as application. The behavior will be the same. We can set it at page directive as below:

ClientIDMode at Page level

Fig: ClientIDMode at Page level

To set it at Application level, we need to set it in config file as:

and that will be applied across all the pages in the application.

ClientIDMode at Application level

Fig: ClientIDMode at Application level

Feedback and Suggestions

Feedback is key for improvement. I would request you all to share your feedback and give me some suggestions, which would encourage and help in more and quality writing.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India
Brij is a 3-times Microsoft MVP in ASP.NET/IIS Category and a passionate .NET developer. More than 6 years of experience in IT field, currently serving a MNC as a Tech Lead/Architect.

He is a very passionate .NET developer and have expertise over Web technologies like ASP.NET 2.0/3.5/4.0, jQuery, JSON, Javascript, IIS and related technologies. He is also a Exchange Server (EWS) Specialist. He has great experience in design patterns and N-Tier Architecture.

He is also certified as Microsoft Certified Technologies Specialist-ASP.NET and Microsoft Certified Technologies Specialist-WCF in .NET 4.0. He has also received several awards at various forums and his various articles got listed as "Article of the day" at ASP.NET Microsoft Official Website www.asp.net.

He has done MCA from NIT Durgapur and completed his graduation from Lucknow University.

Learning new technologies and sharing knowledge excites him most. Blogging, solving problems at various forums, helping people, keeps him busy entire day.


Visit his Blog: Code Wala

Area of Expertise :
C#, ASP.NET 2.0,3.5,4.0, AJAX, JQuery, JSON, XML, XSLT, ADO.Net, WCF, Active Directory, Exchange Server 2007 (EWS), Java script, Web Services ,Win services, DotnetNuke, WSS 3.0,Sharepoint Designer, SQL Server 2000/2005/2008

Comments and Discussions

 
Questionview source controls id get Pin
Bhagwat Prasad Sharma25-Apr-14 3:33
Bhagwat Prasad Sharma25-Apr-14 3:33 
GeneralMy vote of 4 Pin
anay921323-May-12 2:22
anay921323-May-12 2:22 
QuestionMy vote is 5 Pin
mohamad yousef2-Jan-12 0:36
mohamad yousef2-Jan-12 0:36 
GeneralMy vote of 5 Pin
rohitvermasrt28-Sep-11 0:00
rohitvermasrt28-Sep-11 0:00 
GeneralRe: My vote of 5 Pin
Brij16-Nov-11 6:50
mentorBrij16-Nov-11 6:50 
GeneralThanks Pin
prasadjachak22-Jun-11 9:03
prasadjachak22-Jun-11 9:03 
GeneralRe: Thanks Pin
Brij22-Jun-11 20:44
mentorBrij22-Jun-11 20:44 
GeneralMy vote of 4 Pin
MythYsjh14-Oct-10 22:18
MythYsjh14-Oct-10 22:18 
GeneralRe: My vote of 4 Pin
Brij15-Oct-10 6:29
mentorBrij15-Oct-10 6:29 
GeneralMy vote of 5 Pin
Hiren solanki12-Oct-10 23:08
Hiren solanki12-Oct-10 23:08 
GeneralRe: My vote of 5 Pin
Brij13-Oct-10 7:19
mentorBrij13-Oct-10 7:19 
GeneralMy vote of 5 Pin
Abhinav S7-Oct-10 7:40
Abhinav S7-Oct-10 7:40 
GeneralRe: My vote of 5 Pin
Brij7-Oct-10 8:18
mentorBrij7-Oct-10 8:18 
GeneralMy vote of 5 Pin
thatraja6-Oct-10 23:29
professionalthatraja6-Oct-10 23:29 
GeneralRe: My vote of 5 Pin
Brij7-Oct-10 1:44
mentorBrij7-Oct-10 1:44 
GeneralMy vote of 5 Pin
Petr Pechovic5-Oct-10 11:01
professionalPetr Pechovic5-Oct-10 11:01 
GeneralRe: My vote of 5 Pin
Brij6-Oct-10 16:58
mentorBrij6-Oct-10 16:58 
GeneralMy vote of 5 Pin
sashidhar23-Sep-10 9:11
sashidhar23-Sep-10 9:11 
GeneralRe: My vote of 5 Pin
Brij23-Sep-10 20:35
mentorBrij23-Sep-10 20:35 
GeneralMy vote of 5 Pin
Marcelo Ricardo de Oliveira20-Sep-10 3:08
mvaMarcelo Ricardo de Oliveira20-Sep-10 3:08 
GeneralRe: My vote of 5 Pin
Brij20-Sep-10 5:50
mentorBrij20-Sep-10 5:50 
GeneralMy vote of 4 Pin
sreejith7718-Sep-10 20:23
sreejith7718-Sep-10 20:23 
GeneralRe: My vote of 4 Pin
Brij18-Sep-10 22:24
mentorBrij18-Sep-10 22:24 
GeneralMy vote of 5 PinPopular
Torben7113-Sep-10 21:12
Torben7113-Sep-10 21:12 
GeneralRe: My vote of 5 Pin
Brij13-Sep-10 21:57
mentorBrij13-Sep-10 21:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.