Mike Brind (http://www.mikesdotnetting.com) had an interesting take on Ajax Cascading Drop Downs

I posted on the topic HERE and Mike emailed me his idea. I thought it was a great post and offered to repost it here as a guest post. Keep your eye on his blog.


jQuery Templates enable easy client-side generation of html. When combined with JSON data or other JavaScript objects, jQuery Templates provide a way to create a dynamic data-driven site without any server-side code whatsoever. However, in this article I will look at how they can be used to produce cascading select lists in a Razor Web Pages site.

jQuery Templates are an official jQuery plugin. That means that they are maintained as part of the jQuery Project. They are still in Beta at the moment, but will be included as part of the core jQuery library in the next major release, which will be jQuery 1.5. In much the same way as the WebMatrix WebGrid helper is used to generate html (in this case a

) on the server, jQuery Templates allow you to generate html using client side script. Where they differ from the WebGrid helper is that you can define the html that they generate. You are not restricted to outputting a
. On the other hand, they share a major similarity with the WebGrid helper. As part of the template you define, you can add binding expressions which act as placeholders for data. It’s probably a good idea at this point to have a look at a typical template.

Since I intend to illustrate cascading dropdown lists later, I’m going to re-use the data source I created for my original Cascading Dropdown Lists article from a couple of years ago. The data relates to cars, and each car has a number of properties:

  • Make
  • Model
  • Year
  • Colour
  • Number of Doors
  • Mileage
  • Price

A typical template for displaying cars might look like this:

The template appears in a

Basic Template

The file defines its Layout page, which includes references to two JavaScript files hosted on Microsoft's AJAX Content Delivery Network (CDN):


Following that, there are two

The first three template definitions cater for the select lists: one for the Make, one for the Model and the final one for the Colour selector. The final template is the one that was used in the previous example to display the car details. the JavaScript block is where the action happens:

When the page loads, the second and third select lists are disabled so that they can't be used. But the first select list is populated with data retrieved by a jQuery getJSON call to the GetCarMakes method in CarService.cs. The getJSON call is actually routed to the GetCarMakes file which calls the CarService and converts the data to JSON in exactly the same way as the earlier GetAllCars method:

@{
    var data = CarService.GetCarMakes();
    Json.Write(data, Response.Output);
}

At the same time, an event handler is bound to the onchange event of the select list, which calls another JavaScript method - getModels(). This function is executed when a Make is selected, and enables the Models select list prior to fetching the data for it. Then the data is bound to the template and the resulting

@{
    var data = CarService.GetColoursByModel(UrlData[0]);
    Json.Write(data, Response.Output);
}

And once a colour is selected, all three values: Make, Model and Colour are passed in the URL to the GetCarsByColour method:

The code for the GetCarsByColour method:

@{
    var data = CarService.GetCarListByColour(UrlData[0], UrlData[1], UrlData[2]);
    Json.Write(data, Response.Output);
}

Finally, the resulting data is bound to the final template, providing the listing of selected cars as seen in the previous image.

I included the word "Razor" in the title of this post, and in truth, the only line of Razor code in the CascadingDropDowns.cshtml file is that which references the Layout page. The file could just as easily have been a plain .html file, and it would have still worked in just the same way - given access to a source of JSON data. So where would you get such a source - apart from creating your own service that uses the JSONHelper? Well, one source could well be an OData feed, such as that provided by Netflix.com.

jQuery Templates provide an extraordinarily versatile client-side html generation mechanism, especially when combined with data binding. Although the cascading select lists paradigm has a number of tried and tested solutions, jQuery Templates provides a neat new twist.

You can download the sample Web Pages site from here.