Meatball's Guide to .NET » ASP.NET http://rogerpence.com/blog A dogma-free guide to making real-world sense of .NET Wed, 23 Jun 2010 16:15:35 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Using jQuery to work with ASP.NET-munged HTML elements http://rogerpence.com/blog/index.php/archives/263 http://rogerpence.com/blog/index.php/archives/263#comments Tue, 06 Oct 2009 21:13:00 +0000 admin http://rogerpence.com/blog/?p=263 ASP.NET (pre-ASP.NET 4.0, that is) makes it a point of munging control IDs by forcing a fully-qualified naming scheme on both the resulting HTML element’s ID and Name attributes. For example, a TextBox named textboxName, when placed in a user control used on a content page with a master page gets rendered like this at runtime:

Figure 1. HTML element with munged ID and Name attributes.
  1<input name="ctl00$ContentPlaceHolder1$ctl00$textboxName" 
  2       id="ctl00_ContentPlaceHolder1_ctl00_textboxName" 
  3	      type="text" />
Show copy-friendly code

It’s often desirable to dynamically associate either behaviors or cosmetic styling to these elements, but because of the munged ID, locating these elements, especially with bare-naked CSS selected is challenging (unless you hard-code special case CSS class names).

jQuery makes the selection of such elements quite easy. Because the munged IDs always end with the control’s base name, you know that the resulting HTML ID will end with that control name. Here’s how to use jQuery to select these elements based on the ending value of their ID.

First, add a reference to jQuery in the master page’s <head> section. (In this example, I’m pulling jQuery from the Microsoft Ajax Content Delivery Network.)

Figure 2. Add a reference to jQuery in the section of the master page.
  1<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" 
  2        type="text/javascript"></script>
Show copy-friendly code

To locate an HTML element with a munged ID, use the jQuery AttributeEndsWith selector. This selector finds all elements where the given ID ends with a specific value.

Figure 3. Add this JavaScript to the content page.
  1<script type="text/javascript">
  2    $( function() {
  3        $( "input[ id$='textboxName']" ).val( "prove this." );
  4    });
  5</script>
Show copy-friendly code

The example above selects the input element that ends with “textboxName” and sets its value to ‘”prove this.”

jQuery’s AttributeEndsWith performs a brute-force traversal of all of the tags specified (and applies a regular expression against the ending value provided) so this technique may have some potential performance issues, but my experience with it hasn’t shown any glaring degradation.

rp

]]> http://rogerpence.com/blog/index.php/archives/263/feed 1