cascading dropdownlists in asp.net MVC4

Title:
Cascading DropDownList in Asp.net MVC

Description:
AS we discussed in about cascading drop down in asp.net ,this articles will also describe the same functionality using model view controller frame work.Before going to read this article ,we should have some basic knowledge on Jquery and MVC patters.

Example:
What we have discussed in previous articles is cascading dropdownlist in asp.net,Required Validations Asp.net MVC4 ,Bind data to dropdownlist in MVC,jquery reference mvc.Now i would like explain how to develop cascading dropdownlist in MVC4.For you need to do the step by step process as per below code

View:

@{
ViewBag.Title = "Cacading Dropdownlist in Asp.net MVC4";
}
@using (Html.BeginForm())
{
<fieldset>
<legend></legend>
@Html.Label("CodeBook")
@Html.DropDownList("CodeBook", ViewBag.CodeBookRes as SelectList, "Select a CodeBook", new { id = "CodeBook" })
@Html.Label("Versions")
<select id="Versions"  name="Versions"></select>
</fieldset>
}

@Scripts.Render("~/bundles/jquery")
<script type="text/jscript">
$(function () {
$('#CodeBook').change(function () {
$.getJSON('/Cascading/VersionResList/' + $('#CodeBook').val(), function (data) {
var Listitems = '<option>please Select CodeBook</option>';
$.each(data, function (i, Versions) {
Listitems += "<option value='" + Versions.Value + "'>" + Versions.Text + "</option>";
});
$('#Versions').html(Listitems);
});
});
});
</script>

MVC4CacadingController:
This controller has two methods one is return the list and other one return the JSON result.The json result will call when make selection of Book dropdown

using CascadingDropdownlistMVC4.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace CascadingDropdownlistMVC4.Controllers
{
public class CascadingController : Controller
{
//
// GET: /Cascading/
public ActionResult Index()
{
List CodeBooks = new List();
CodeBooks.Add(new SelectListItem { Text = "Asp.netMVC", Value = "Asp.netMVC" });
CodeBooks.Add(new SelectListItem { Text = "Sharepoint", Value = "Sharepoint" });
CodeBooks.Add(new SelectListItem { Text = "SqlServer", Value = "SqlServer" });
CodeBooks.Add(new SelectListItem { Text = "Asp.net", Value = "Asp.net" });
CodeBooks.Add(new SelectListItem { Text = "C#.net", Value = "C#.net" });
ViewBag.CodeBookRes = new SelectList(CodeBooks, "Value", "Text");
return View();
}

public JsonResult VersionResList(string Id)
{
var VersionRes = from vs in VersioList.GetVersion()
where vs.Book == Id
select vs;
return Json(new SelectList(VersionRes.ToArray(), "Book", "Version"), JsonRequestBehavior.AllowGet);
}
}
}

Set Proprties:In this class i have created variable and set the propeties

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

namespace CascadingDropdownlistMVC4.Models
{
public class SetProperties
{
public string CodeBooks { get; set; }
public string Versions { get; set; }
}

public class VersionList
{
public string Book { get; set; }
public string Version { get; set; }

public static IQueryable GetVersion()
{
return new List
{
new VersionList { Book= "Asp.netMVC", Version= "MVC3" },
new VersionList { Book= "Asp.netMVC", Version= "MVC4" },
new VersionList { Book= "SqlServer", Version = "2008R2" },
new VersionList { Book= "SqlServer", Version = "2012" },
new VersionList { Book= "Sharepoint", Version= "2010" },
new VersionList { Book= "Sharepoint", Version = "2013" },
new VersionList { Book= "Asp.net", Version = "4.0" },
new VersionList { Book= "Asp.net", Version = "4.5" },
new VersionList { Book= "c#.net", Version = "4.0" },
new VersionList { Book= "C#.net", Version = "4.5" },
}.AsQueryable();
}
}
}