Today I’m going to show you how to go about creating cascading dropdown lists using JSON in MVC2. Hold onto your hats, its time to begin!
Learning ASP.NET MVC2 I thought I'd start with a relatively simple web application, this application is for keeping track of service usage across the company's physical sites (ie. Electricity, Gas, Waste, etc.).
Now first things first, I setup the Database and LinqToSql classes for my app. The table structure is MeterTypes > MeterCollections > MeterUsages. Where a MeterType is the top level (ie. Electricity, Gas, Waste, etc.) the MeterCollections are the next level down (a MeterType may contain many of these, for Electricity I have Peak and Off-Peak) and MeterUsage is the actual usage on a meter for that MeterCollection.
OK, lets get coding… We will be looking at the Create Page for the MeterUsage object, I started with the create template MVC2 gave me for this object (half of the fields are just textboxes anyway)
Inside the Controller is where the request is handled, Now we need the data for the first list so we may as well get this here. This simply gets all the MeterTypes in the Database and converts them to SelectListItems (this is to make it easier on the page)
Markup, Basic use of the Html.DropDownList() function for MeterTypes (this is where using SelectListItems comes in handy. Also added a default option “—Select –”. Then the MeterCollection Dropdown is a little different as this one actually maps to a property on my MeterUsage object so I used the Html.DropDownListFor() function and gave it an empty list so it would create the dropdown list but not have any items (they will be populated with Ajax.
It also builds up the html for inside the dropdown list using a JQuery for each loop.
Now the last part is our GetList function to return JSON, so back to the controllers.
And just like that you have a Cascading DropDown List in MVC2 using Ajax.