In this previous blog post I demonstrated implementing a Cascading Drop Down in ASP.NET WebForms using jQuery.

I had a couple of emails asking about the differences for using this technique in Microsoft WebMatrix so I thought I’d post a WebMatrix Version.

I also got a great email from Elijah Manor (@elijahmanor is an ASP.NET Insider & MVP) with some improvement suggestions.

Every code post on my blog finds someone out in web land who needs to tell me how they could write it better.

Elijah, however, is the Senior Architect at appendTo, THE jQuery company. I know really great developers that went to appendTo to learn jQuery training – hell I want to go take their jQuery Training.

Elijah is not only a really smart guy, he’s a really GOOD guy and emails not to show off but from a true desire to help – THANKS Elijah.

I’ve added some of Elijah’s suggested improvements and on his prompting will soon convert this code to my very first jQuery Plugin.

You’ll recall the Cascading Drop Down UI.


In the page template we’ll include a reference to the jQuery library.


        My ASP.NET Web Page - @Page.Title
        @RenderSection('header')

Note that , as Elijah suggests, I’m referencing the 1.5 (recent) version of the jQuery library via the Microsoft Content Delivery Network (CDN) Our WebMatrix page looks like this.


@{
    Layout = '~/_SiteLayout.cshtml';
    Page.Title = 'Welcome to my Web Site!';
    var resultvalue = '';
    if (IsPost)
    {
        resultvalue = 'You selected a ' + 
		               Request['TextColor'] + ' ' +
                       Request['TextMake'] + ' ' +
                       Request['TextModel'] + ', nice choice.';
    }
}
@section header {

<!--
$(function ()
{
   $('#DDListMake').change(function ()
   {
      var selectedvalue = $(this).val();
      $('#TextMake').val(selectedvalue);
      $( '#DDListModels' ).empty()
      $( '#DDListColors' ).empty()
      $.getJSON('Service.cshtml?op=Make&amp;Make=' + $('#DDListMake').val(), 
	                                                 function (data)
      {
         $.each(data, function (key, item)
         {
         $('#DDListModels' ).append( $('<option />', 
		                     {value: item.value, text: item.value}));
         });
      });
      $('#ButtonSubmit').attr('disabled', true);
      $('#DDListColors').attr('disabled', true);
      $('#DDListModels').removeAttr('disabled');

   });

   $('#DDListModels').change(function () {
      var selectedvalue = $(this).val();
      $('#TextModel').val(selectedvalue);
      $( '#DDListColors' ).empty()
      $.getJSON('Service.cshtml?op=Model&amp;Model=' + 
	                           $('#DDListMake').val() + '-' +
                               $('#DDListModels').val(), function (data)
      {
         $.each(data, function (key, item)
         {
         $('#DDListColors').append($('<option />', 
		 {value: item.value, text: item.value}));
         });
         $('#ButtonSubmit').attr('disabled', true);
         $('#DDListColors').removeAttr('disabled');
      });
    });

 $('#DDListColors').change(function () {
     var selectedvalue = $(this).val();
     $('#TextColor').val(selectedvalue);
     $('#ButtonSubmit').removeAttr('disabled');
 });

});
// -->
}

 ASP.NET Web Pages [WebMatrix] &amp; jQuery Cascading Drop Down.
<form method='post'>
<div id='SelectionContainer'>
<select id='DDListMake' style='width: 200px;' name='DDListMake'>
		<option selected='selected' value='Select...'>Select...</option>		
		<option value='Ford'>Ford</option>		
		<option value='Cadilac'>Cadilac</option>		
		<option value='Toyota'>Toyota</option>		
		<option value='Jeep'>Jeep</option>		
		<option value='Mazda'>Mazda</option>	
</select>
<input id='TextMake' name='TextMake' type='hidden' />
<select id='DDListModels' style='width: 200px;' disabled='disabled' 
        name='DDListModels'>
</select>
<input id='TextModel' name='TextModel' type='hidden' />
<select id='DDListColors' style='width: 200px;' disabled='disabled' 
        name='DDListColors'>
</select>
<input id='TextColor' name='TextColor' type='hidden' />

<input id='ButtonSubmit' disabled='disabled' type='submit' value='Submit' />
<div id='ResultsArea'>
        @resultvalue</div>
</div>
</form>

Note the code tweaks that Elijah suggested,

A cleaner way to empty the Drop Down Lists.


      $( '#DDListModels' ).empty()

And a cleaner way to Insert Items.



  $('#DDListColors').append($('', {value: item.value, text: item.value}));


You’ll see that I’m still uysing a hidden fidn to store the Drop Down List’s Selected value.

This makes it easy to retruve the slected values when the page is submitted.


  if (IsPost)
    {
        resultvalue = 'You selected a ' + 
		               Request['TextColor'] + ' ' +
                       Request['TextMake'] + ' ' +
                       Request['TextModel'] + ', nice choice.';
    }

You can download a working version of the Source Code [ HERE ].