MIKE

ASP.NET MVC Cascading DropDownList with jQuery

Here a simple example of cascading drop down list in ASP.NET MVC with jQuery.

First you need models. I chosed to do this example using a Country and State dropdown, so I’m going to build to Models (Country and State) with a little bit of fake data.

Lets start with the Country Model and Fake Data

using System.Collections.Generic;
using System.Linq;

namespace CascadingDDLjQueryDemo.Models
{
    public class Country
    {
        public string CountryCode { get; set; }
        public string CountryName { get; set; }

        public static IQueryable GetCountries()
        {
            return new List
            {
                new Country {
                    CountryCode = "CA",
                    CountryName = "Canada"
                },
                new Country{
                    CountryCode = "US",
                    CountryName = "United-States"
                }
            }.AsQueryable();
        }
    }
}

And now the State Model and Fake Data

using System.Collections.Generic;
using System.Linq;

namespace CascadingDDLjQueryDemo.Models
{
    public class State
    {
        public string CountryCode { get; set; }
        public int StateID { get; set; }
        public string StateName { get; set; }

        public static IQueryable GetStates()
        {
            return new List
            {
                new State
                    {
                        CountryCode = "CA",
                        StateID=1,
                        StateName = "Ontario"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=2,
                        StateName = "Quebec"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=3,
                        StateName = "Nova Scotia"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=4,
                        StateName = "New Brunswick"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=5,
                        StateName = "Manitoba"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=6,
                        StateName = "British Columbia"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=7,
                        StateName = "Prince Edward Island"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=8,
                        StateName = "Saskatchewan"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=9,
                        StateName = "Alberta"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=10,
                        StateName = "Newfoundland and Labrador"
                    },
                new State
                    {
                        CountryCode = "US",
                        StateID=11,
                        StateName = "New-York"
                    },
                new State
                    {
                        CountryCode = "US",
                        StateID=12,
                        StateName = "California"
                    },
                new State
                    {
                        CountryCode = "US",
                        StateID=13,
                        StateName = "Washington"
                    },
                new State
                    {
                        CountryCode = "US",
                        StateID=14,
                        StateName = "Vermont"
                    }
            }.AsQueryable();
        }
    }
}

We can now add List methods in the controller. I chosed to return both Json and View so I could decide to make a page CountryList and use the same method.

using System.Linq;
using System.Web.Mvc;
using CascadingDDLjQueryDemo.Models;

namespace CascadingDDLjQueryDemo.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult CountryList()
        {
            IQueryable countries =
                Country.GetCountries();

            if(HttpContext.Request.IsAjaxRequest())
                return Json(new SelectList(
                                countries,
                                "CountryCode",
                                "CountryName")
                            );

            return View(countries);
        }

        public ActionResult StateList(string CountryCode)
        {
            IQueryable states = State.GetStates()
                .Where(x => x.CountryCode == CountryCode);

            if (HttpContext.Request.IsAjaxRequest())
                return Json(new SelectList(
                                states,
                                "StateID",
                                "StateName")
                            );

            return View(states);
        }
    }
}

And now we require Routes to access this data

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace CascadingDDLjQueryDemo
{
    // Note: For instructions on enabling IIS6 or IIS7 classic mode,
    // visit http://go.microsoft.com/?LinkId=9394801

    public class MvcApplication : System.Web.HttpApplication
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "StatesList",
                "Home/States/List/{CountryCode}",
                new { controller = "Home", action = "StateList", CountryCode = "" }
            );

            routes.MapRoute(
                "CountriesList",
                "Home/Countries/List",
                new { controller = "Home", action = "CountryList" }
            );

            routes.MapRoute(
                "Default",
                "{controller}/{action}/{id}",
                new { controller = "Home", action = "Index", id = "" }
            );

        }

        protected void Application_Start()
        {
            RegisterRoutes(RouteTable.Routes);
        }
    }
}

The Javavascript

$(function() {
        $.getJSON("/Home/Countries/List", function(data) {
            var items = "
---------------------

";
            $.each(data, function(i, country) {
                items += "
" + country.Text + "

";
            });
            $("#Countries").html(items);
        });

        $("#Countries").change(function() {
            $.getJSON("/Home/States/List/" + $("#Countries > option:selected").attr("value"), function(data) {
                var items = "
---------------------

";
                $.each(data, function(i, state) {
                    items += "
" + state.Text + "

";
                });
                $("#States").html(items);
            });
        });
    });

And finally, the Index View.

ASP.NET MVC Cascading DropDownList using jQuery

Countries


        States

You can find the source code here.

Posted in: ASP.NET, C#.NET, Developement, LINQ, MVC

This entry was posted on Saturday, May 30th, 2009 at 6:50 pm and is filed under ASP.NET, C#.NET, Developement, LINQ, MVC. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.