Foliotek Developer Blog

Extending jQuery to Select ASP Controls

If you have worked with JavaScript in an ASP.NET Web Forms environment, you almost certainly have been frustrated that this markup:

<textbox id="txtPhoneNumber" runat="server"></textbox>  

renders out as something like:

<input id="ctl00_ctl00_ctl00_main_Content_txtPhoneNumber" name="ctl00$ctl00$ctl00$main$Content$txtPhoneNumber" type="text"></input>  

The fastest and easiest way to get a reference to a DOM element in JavaScript is using the ID attribute and document.getElementById(). Unfortunately, the ID attribute generated by the server is unpredictable and based on the server naming containers. There are a couple ways of that I have previously dealt with that problem, but both have problems.

Old Solutions

Accessing the ClientID of the server control

If you use inline code inside <% %> tags, you can access the ClientID directly from the .aspx page.

var goodID = ''; // = 'ctl00_ctl00_ctl00_main_HeaderTabs_txtPhoneNumber'  
var badID = 'txtPhoneNumber'; // The text box does not have this ID, it will not work  
var uglyID = 'ctl00_ctl00_ctl00_main_Content_txtPhoneNumber'; // DO NOT hardcode the generated ID into your code!  

This is not ideal because you cannot reference the ClientID from outside of the page, so you cannot keep your JavaScript in external files.

2. Setting attributes on control and accessing with jQuery selectors

jQuery has an excellent selector API that can easily grab an element if you know attributes on it. So, if there were a couple controls defined as:

<textbox cssclass="txtPhoneNumber" id="txtPhoneNumber" runat="server"></textbox>  
<textbox clientid="txtAddress" id="txtAddress" runat="server"></textbox>  

You could access them with jQuery:

$(".txtPhoneNumber").keyup(…); // This works  
$("[ClientID='txtAddress']").keyup(…); // This works

$("#txtPhoneNumber").keyup(…); // This still DOESN’T work  
$("#txtAddress").keyup(…); // This still DOESN’T work  

This is not ideal because it requires adding extra attributes onto any server control that you want to access with JavaScript.

Original jQuery Solution

I first happened upon a solution to the same problem over on John Sheehan’s blog. This looked promising, but did not work the current latest release of jQuery (1.3). Another contributer to this blog, Tim Banks, updated the code in to work with the newer version.

However, I found an error in Internet Explorer and a more reliable way to get the ClientID would be to use the jQuery attribute selector and match based on an “id” attribute that ends with the Server ID. So,I wrote a JavaScript function called $asp that returned a jQuery collection. This function worked well and was implemented in the latest Foliotek release.

function $asp(serverID) {  
    return $("[id$='" + serverID+ "']");  

// Once this function is included,you can call it and get back a jQuery collection  

Updated jQuery and Sizzle Solution

It seemed like it would be better if the solution actually extended the selector engine rather than using a function to select objects. This would fit better into a jQuery development paradigm, allow more complex selectors, and also allow the selector to be used in other library functions, like “filter” or “find”. Also, it would be nice to be able to use the tag name in the selector to give a performance improvement, since getElementsByTagName is a fast operation that will narrow the element collection.

So, I returned to the selector, fixed the IE bug and made sure it worked with the now latest version of jQuery (1.3.2). This short function extends the Sizzle selector engine to return an element that has an ID that ends with the ID that is passed in the parenthesis after the “:asp()” selector.

View this code on github:

This function allows access to server controls without adding additional markup and without the JavaScript existing on the .aspx page.

  • Note: There is a potential limitation if you had one control with the ID="txtPhoneNumber" and another with ID="mytxtPhoneNumber". Both elements end with "txtPhoneNumber" and the selector would not necessarily return the correct value. This solution is not perfect in that sense, but the benefits it provides over other methods (cleaner markup and ability to use external JavaScript files) make it a good alternative.