Making use of jQuery Ajax calls in ASP.NET MVC can boost application’s performance. This way, you can GET or POST partial pieces of data from or to application server, without the need to send or retrieve back the entire page. This post will show you how use jQuery to load and fill a DropDown list asynchronously, with data come from the server. More over, we will see how to GET and display a partial view using the ajax method. To see all these interesting and quite useful techniques we are going to build an MVC application where the user is supposed to search for laptops. When the page is loaded for the first time, a DropDown list (Master) will be filled asynchronously with some random Manufacturers, such as “DELL” or “APPLE”. Selecting one of these manufacturers will cause a new jQuery Ajax call to fill a second DropDown list (Detail) which is going to display the laptop series/categories for the respective Manufacturer. Finally, when the user picks a category from the second list, an ajax call will fetch a Partial View from the server, displaying all the available laptops according both to the selected Manufacturer and the category.
I will be showing only the parts you need to know in order to support the above functionality rather than guiding you step by step. Feel free to download the entire solution from the link you will find at the bottom of the page. I have created an MVC application using the Internet Application template in Visual Studio 2012. First of all we need to create the Model for our data. For simplicity we won’t use data from database but some mock data retrieved from “generate” methods. Create a C# class named Manufacturer as follow.

The ManCode property will be used as the Value property of a DropDown list while the ManName will be the displaying text. The GetManufacturers() static method generates some mock manufacturer objects.
In the same way create a Category class in the Models folder as follow.

The ManCode property of the Category class is the foreign key to the Manufacture’s respective property. Having these simple classes we can start building the controller. We can use the default HomeController VS generated for us. Remove all the code inside the controller, leaving only the Index() Action method.

Simple enough to understand, the action checks if the request is an AjaxRequest and if so returns in JSON format a SelectList filled with the manufactures. We need a similar method to return all the laptop categories (or series of products if you wish) according to the selected manufacturer. This methods requires the selected value from the master DropDown list, that is the “ManCode”.

As you can see it’s a very simple layout. It consist from two select HTML elements that we are going to fill with jQuery Ajax calls to our previously created methods and a “divLaptops” div, that will display a partial View. Pay attention to the last three lines of the above code. We are going to use two javascript files to fill the select lists and of course we need the jQuery library too. Make sure you have the respective jQuery version on your Scrips folder and add two javascript files, named GetManufacturer and manufacturerCategory respectively. Let’s see the GetManufacturer script first.

The most important part is remember to assign the manufacturer.Value of a manufacturer JSON object to the value property of the select’s option element and the manufacturer.Text property as the select element’s text property. If you want to understand this better here’s how “data” variable looks like in debug mode, after retrieved from server.
At this moment if you run your application you should see at least the Master DropDown list filled with all manufacturers. Now let’s look the second javascript file, manufacturerCategory. First we need to ensure that this Detail list is hidden when the page loads. Then we need to bind the Change event of the Master DropDown list to an ajax call that will eventually fill our second list. Here’s the code.

We also passed the “ManCode” property value from the Master select list. Notice that the ManufacturersID is the first’s select list ID so the $(‘#ManufacturersID’).val() will return it’s selected value. Now that we have both the manufacturer and the category selected, we would like to display some products based on this selection. First of all let’s add a new Model class named “Laptop” as follow.

A laptop product belongs to a specific Category and has also a Name and a Price property. The GetProducts() method returns some mock laptop objects. We will use a Partial View to display a list of Laptop objects retrieved from server. Right click the Views/Home/ folder and add a new Partial View named GetLaptops. Paste the following code.

This action checks the category value passed and returns a list of laptops that belong to this category. Notice that you have to pass the Laptop objects to the Partial View. We will call this action through a jQuery Ajax call when the user selects a category from the Detail DropDown list, so go and add the following highlighted code inside the manufacturerCategory javascript file.

If you build and run your application you should see the result in the GIF image at the start of this post. That’s it, we saw how to asynchronously fill Dropdown lists in MVC and how to render a Partial View through Ajax call. You can download the entire solution we built from here. I hope you enjoyed the post! Make sure you follow this blog to get notified for new posts.

The purpose of this blog is to broaden my education, promote experimentation and enhance my professional development. Albert Einstein once said that “If you can’t explain it simply, you don’t understand it well enough” and I strongly believe him!