Asp.net: jQuery and ClientID

Every ASP.NET control has the ID property, which is not the HTML id attribute. The HTML id attribute is automatically generated by the ASP.NET engine. Since javascript has become a must-use tool, this behavior in ASP.NET can cause some hassle to the developers. There are a couple of ways to handle this situation.

The most common approach that is suggested in the web is to use some inline ASP.NET code inside the actual JavaScript code that prints the ClientID of our control of interest. For example:

jQuery('#').click();

This apporach is very simple and practical, but (let’s face it) it is not pretty at all. Also, it messes up with the intellisense of Visual Studio.

A more elegant approach that uses the power of jQuery is to write the selector with a filter. If you see the generated id attributes they all end with the ID property of every control. So, the filter you write can be like this:

<script type="text/javascript">
    jQuery("input[id$=Button1]").click();
</script>

The above code will click the Button1. One problem here is that you may have many user controls with buttons and all of them have the ID=Button1. If this is case, all buttons that have their server id set as Button1 will be clicked! A similar conflict will occur in items that are inside of a a Repeater or a GridView. You could fashion a more complex filter, but I don’t think that you cannot avoid this at 100%.

Some developers prefer to save their ClientID values in JavaScript variables and then use these variables to their jQuery selector.
Server Side Code (Page_Load event)

Page.ClientScript.RegisterStartupScript(Me.GetType(), "jsRegControls", "var button1= '" & Button1.ClientID & "';, True)

Markup

<script type="text/javascript">
    jQuery('#'+button1).click();
</script>

This approach seems pretty and safe, but you have to create a variable for every item you want to add. The more you use this approach, there is an extra workload to add variables for every control you want to use to your client side scripts. If we automated this process, things will be really nice again! I found this article that addresses the same problem. The author, James Gregory, provides a simple library that generates an array of values mapping the ASP.NET ID of a control with its clientID value. The code is very simple, it repeats all controls of a page and creating a array declaration for JavaScript. You can use it like this:

var ClientIDs = { //Here is the auto-generated array of ClientIDs
   txtUsername = 'ctrl0_txtUsername',
   txtPassword = 'ctrl0_txtPassword'
};
 
function validate() {
   var username = jQuery(ClientIDs.txtUsername).value;
   var password = jQuery(ClientIDs.txtPassword).value;
}

The code is for ASP.NET 1.1, but it is a matter of seconds to convert it to your target framework. You might want to read the original article and the check the source code before you start using it. In most cases it works like a charm. One drawback here is that the produced JavaScript can be really big. The size is not really a drawback, since your productivity gets a good boost. Also, there is no handle in duplicate entries. If two user controls that are in the same page have both a button with ID=Button1, there will be a conflict. How to handle this situation is up to you.

Finally, asp.net 4.0 gives a few options on this subject. Here is an article that talks about how asp.net 4.0 handles this issue.

Speak Your Mind

*


*