HighOnCoding.com: Understanding ClientIDMode Mode Feature in ASP.net 4.0

Understanding ClientIDMode Mode Feature in ASP.net 4.0

AzamSharp
Published Date: 4/10/2010 12:51:13 PM
Views: 1833

Abstract:
In ASP.net 1.X and ASP.NET 2.0 the ID generated for ASP.net control was dependent on the parent control. This results in unpredictable control IDs which were hard to manage specially when accessing them using client-side scripting. In this article we are going to demonstrate how to create manageable control IDs using new features in ASP.net 4.0.
Understanding the Problem of Auto Generated Control IDs:

In order to truly understand the new feature of ASP.net 4.0 we must first examine the problem faced by developers when using the previous frameworks. Let's implement the page where we have a single GridView control inside a ContentPlaceHolder control. The implementation of the page is shown below:

The GridView is populated on the server side using Linq to SQL but feel free to use any data access strategy you prefer. The BindData method is shown below which is responsible for populating the gridview control.

When the application is executed a page is displayed which list all the customers in the database. The screen shot of the result is shown below.

Let's take a look at the source of the page and examine the ID generated for the GridView control.

As you can see the ID generated for the GridView is not the one that you initially assigned. The GridView ID is generated using the ID of the parent control which in this case is a ContentPlaceHolder control.

Although you can access the GridView control by using gvCustomers on the server-side but on the client side you have to give the complete ID of the GridView control which is ContentPlaceHolder1_gvCustomers. This creates a big problem when you want to access the same control using JavaScript but the ID of the control keeps on changing when used on different pages of the same application.

In the next section we are going to demonstrate how to use the ASP.net 4.0 framework to resolve these issues.

Using ClientIDMode Feature of ASP.net 4.0:

The client ID mode feature of ASP.net 4.0 gives the developer a little bit more control over how the ID will be generated. By default all ASP.net controls uses the Inherit as the ClientIDMode.

Static Mode:

As the name suggests the static mode can be used to give a constant ID to the ASP.net control. Simply assign ClientIDMode property equal to Static in your control and it will start generating the ID using the static mode.

The implementation below shows how to use the ClientIDMode equal to static for the GridView control.

Now run the application and examine the ID generated by the GridView control. The screenshot below shows that the GridView ID has no affect from the parent control ID.

Let's make things a little bit more interesting by adding a TemplateField column to our GridView control. The implementation is shown below:

As you can see in the code above we have added a new TextBox control inside the GridView control. Since the default mode of all ASP.net controls is set to inherit this will cause all TextBox controls to create the same ID as shown in the screenshot below:

You might be expecting that the page will result in an error but no error is generated and you will have multiple controls having the same ID. This is not a good practice because it is now extremely hard to select a particular control from inside the GridView control. If you are using JQuery to select the "txtName" element using the ID then it will return you the first occurrence of the element with the ID "txtName".

In the next section we are going to fix the problem of creating multiple controls with the same ID using the predictable option of the ClientIDMode property.

Predictable Mode:

Predictable mode allows to create IDs that are dependent on the ClientIDRowSuffix property of the parent control. If you do not provide a value for the ClientIDRowSuffix then the RowIndex will be used as ClientIDRowSuffix. Take a look at the implementation below where we have set the client ID mode property of the TextBox control to Predictable.

If you run the above code and view the source of the page you will notice that the index number of the row is concatenated with the ID of the TextBox control.

Although the above approach creates unique ID for the TextBox control inside the GridView control but they are still not developer friendly. For this reason you can assign a property from the data source to the ClientIDRowSuffix field. It is a good practice to use a unique ID as a value for the ClientIDRowSuffix so all the controls generated have unique IDs. In the code below we are using the CustomerID as the ClientIDRowSuffix which will be appended with the ID of the TextBox control.

If you run the above page you will notice that now the TextBox ID is a combination of txtName and the CustomerID which is available in the data source assigned to the GridView control.

Conclusion:

In this article we learned how to use the client ID mode property available in ASP.net 4.0. The client of the mode property gives us flexibility to define the ID which will be assigned to the ASP.net control.

Comments/Feedbacks


	Subject: Nice, this will help a bunch! Name: Joe Williams Date: 7/23/2010 5:36:04 AM Comment: This will help me a lot with trying to incorporate more JQuery commands in my ASP.net code. It might also help reduce the number of times I have to create javascript dynamically and passing in the ClientID from the code behind. I will just statically write the javascript on the page, now that I will know what the client control ID will be. Thanks for the post!