August 6th, 2009 - by Golgotha

jQuery, a lightweight (only 19kb in size) JavaScript library has become my new best friend. It’s like mushrooms to Mario. Obviously I’m not alone since Microsoft is now distributing jQuery with Visual Studio (including jQuery intellisense). If you are using the new MVC framework from Microsoft then you will no doubt become familiar with the intricate workings of jQuery.

jQuery is not all that difficult to learn. The biggest thing you have to understand is all the different “selectors” that are available to you. Using selectors developers can query, in a CSS like way, for HTML elements, and then apply “commands” to them.

For example, the below JavaScript uses jQuery to find a <div> element within a page that has a CSS id of “rightSide”, and shows it and “leftSide” and hides it.

javascript
< view plain text >
  1. $('div#rightSide').show();
  2. $('div#leftSide').hide();

As another example, the JavaScript below uses jQuery to find a specific <table> on the page with an id of “datagrid1″, then retrieves every other <tr> row within the datagrid, and sets those <tr> elements to have a CSS class of “even” – which could be used to alternate the background color of each row:

javascript
< view plain text >
  1. $('#datagrid1 tr:nth-child(even)').addClass('even');

This next example gets all links <a> in a specific <div> and attaches an onclick event to them:

javascript
< view plain text >
  1. $('#navBtns a').bind('click', function(event){
  2.      event.preventDefault(); //stop the link from going to href
  3.      //do something
  4. });

Being able to traverse the DOM and locate HTML elements to attach events, behaviors, animations and CSS is priceless. But what about ASP.NET controls like the RadioButtonList, GridView, ListView, Repeater, and many others that we as developers like to bind to? How do we traverse them when they all get their ids auto-generated? That’s what we will look at now! And with jQuery it’s not that hard!

When you add an ASP.NET RadioButtonList control to a page, like below:

  1. <asp:RadioButtonList runat="server" ID="rblCaseControl" />

The browser renders the control to the code below:

radioButtonList screenshot

As you can see, we don’t have control over the generated items id tag. It would not be an easy task to guess what the auto-generated id tags are going to be. There’s simply too many ways it can very depending on if you are using master-pages and or web-controls. The one thing that we do know is that somewhere in the id will be the id we gave to the control; in this case “rblCaseControl”. Lucky for us this is all jQuery needs to go to town. Look at the code below:

javascript
< view plain text >
  1. var rblCaseControl = $('input[type=radio][id*=rblCaseControl]');

This code uses jQuery to get all radio buttons that have “rblCaseControl” somewhere in their id tag. We could get the selected value of the radio button list using this code:

javascript
< view plain text >
  1. var rblCaseControl = $('input[type=radio][id*=rblCaseControl]:checked').val();

With this code we have now found the selected value from our ASP.NET RadioButtonList control using jQuery. Perhaps now we want to send that value to a web method in our codebind page using Ajax? Well we could use jQuery for that too! But, that’s another article.

Further Reading:

  • http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx
  • http://weblogs.asp.net/mikebosch/archive/2008/02/15/asp-net-mvc-submitting-ajax-form-with-jquery.aspx
  • http://www.chadmyers.com/Blog/archive/2007/12/13/using-jquery-with-asp.net-mvc.aspx

9 Responses to “Using jQuery with ASP.NET Controls”

1 Kravvitz

Actually, you don’t even need the loop:

var rblCaseControl = $(‘input[type=radio][id*=rblCaseControl]:checked’).val();

2 Golgotha

Fantastic Kravvitz! Nice one, I will update the post.

3 Golgotha

@Kravvitz – I suppose if we have a result (returned from an Ajax call) and want to select the corresponding radio button we would have to do the loop and set the checked attribute to true. True?

4 Kravvitz

Not necessarily. You could do this:

var val=2;
$(‘input[type=radio][id*=rblCaseControl][value="'+val+'"]‘).attr(‘checked’, ‘checked’);

5 Golgotha

Nice!

6 Ujjwal

hi, I am new to jquery. Thanks for this fantastic article. This article is very userfull for newbies who want to start using jquery in asp.net. I would rate it 10 out of 10. Thanks again.

7 Brad

Very informative, but I saw one typo:
In the paragraph below the diagram showing how .net names the controls, you mention:
“There’s simply too many way it can very…” I believe you mean “vary”.

Can anyone point me to examples of all ASP.net controls used with jQuery? I’m most intested with textboxes, dropdowns and listboxes (with multiselect).

Thanks,
Brad.

8 Imran

How we can bind an event/function while we are in codebehind i.e RegisterStartupScript. Or in other word how we can register script from codebehind if we use jQuery. Could anybody provide me with an example.

Thanks

9 Vinnie

This is very helpful…

My question is how would one reference the properties of the asp server side control, using JQuery. For example, if I had a Asp FileUpload Control, how would I access the properties of this control, such as value, FileContent, PostedFile, FileName, etc.,

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators


Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading