Cascading Dropdown List With MVC And AJAX | C# Online Compiler

Cascading Dropdown List With MVC And AJAX by Bhaumik Patel

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace Ashish
{
	public class City
	{
		public int ID { get; set; }
		public string Name { get; set; }
	}
	public class Locality
	{
		public int ID { get; set; }
		public int CityID { get; set; }
		public string Name { get; set; }
	}
	public class SubLocality
	{
		public int ID { get; set; }
		public int LocalityID { get; set; }
		public string Name { get; set; }
	}
	
	public class Repository
	{
		public static List<City> FetchCities()
		{
			List<City> cities = new List<City>();
			cities.Add(new City() { ID = 1, Name = "Faridabaad" });
			cities.Add(new City() { ID = 2, Name = "Greater Noida" });
			return cities;
		}
		public static List<Locality> FetchLocalities()
		{
			List<Locality> localities = new List<Locality>();
			localities.Add(new Locality() { ID = 1, CityID = 1, Name = "East Faridabaad" });
			localities.Add(new Locality() { ID = 2, CityID = 1, Name = "West Faridabaad" });
			localities.Add(new Locality() { ID = 3, CityID = 2, Name = "East Noida" });
			localities.Add(new Locality() { ID = 4, CityID = 2, Name = "West Noida" });
			return localities;
		}
		public static List<SubLocality> FetchSubLocalities()
		{
			List<SubLocality> subLocalities = new List<SubLocality>();
			subLocalities.Add(new SubLocality() { ID = 1, LocalityID = 1, Name = "East Faridabaad Region 1" });
			subLocalities.Add(new SubLocality() { ID = 2, LocalityID = 1, Name = "East Faridabaad Region 2" });
			subLocalities.Add(new SubLocality() { ID = 3, LocalityID = 2, Name = "West Faridabaad Region 1" });
			subLocalities.Add(new SubLocality() { ID = 4, LocalityID = 2, Name = "West Faridabaad Region 2" });
			subLocalities.Add(new SubLocality() { ID = 5, LocalityID = 3, Name = "East Noida Region 1" });
			subLocalities.Add(new SubLocality() { ID = 6, LocalityID = 3, Name = "East Noida Region 2" });
			subLocalities.Add(new SubLocality() { ID = 7, LocalityID = 4, Name = "West Noida Region 1" });
			subLocalities.Add(new SubLocality() { ID = 8, LocalityID = 4, Name = "West Noida Region 2" });
			return subLocalities;
		}
	}
	
	public class ViewModel
	{
		[Required(ErrorMessage = "Please select a city")]
		[Display(Name = "City")]
		public int? SelectedCity { get; set; }
		[Required(ErrorMessage = "Please select a locality")]
		[Display(Name = "Locality")]
		public int? SelectedLocality { get; set; }
		[Required(ErrorMessage = "Please select a sub locality")]
		[Display(Name = "Sub Locality")]
		public int? SelectedSubLocality { get; set; }
		public SelectList CityList { get; set; }
		public SelectList LocalityList { get; set; }
		public SelectList SubLocalityList { get; set; }
	}
	
	

}

Model

​x
 
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
​
namespace Ashish
{
    public class City
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }
    public class Locality
    {
        public int ID { get; set; }
        public int CityID { get; set; }
        public string Name { get; set; }
    }
    public class SubLocality
    {
        public int ID { get; set; }
        public int LocalityID { get; set; }
        public string Name { get; set; }
    }
    
    public class Repository
    {
        public static List<City> FetchCities()
        {
            List<City> cities = new List<City>();
            cities.Add(new City() { ID = 1, Name = "Faridabaad" });
            cities.Add(new City() { ID = 2, Name = "Greater Noida" });
            return cities;
        }
        public static List<Locality> FetchLocalities()
        {
            List<Locality> localities = new List<Locality>();
            localities.Add(new Locality() { ID = 1, CityID = 1, Name = "East Faridabaad" });
            localities.Add(new Locality() { ID = 2, CityID = 1, Name = "West Faridabaad" });
            localities.Add(new Locality() { ID = 3, CityID = 2, Name = "East Noida" });
            localities.Add(new Locality() { ID = 4, CityID = 2, Name = "West Noida" });
            return localities;
        }
        public static List<SubLocality> FetchSubLocalities()
        {
            List<SubLocality> subLocalities = new List<SubLocality>();
            subLocalities.Add(new SubLocality() { ID = 1, LocalityID = 1, Name = "East Faridabaad Region 1" });
            subLocalities.Add(new SubLocality() { ID = 2, LocalityID = 1, Name = "East Faridabaad Region 2" });
            subLocalities.Add(new SubLocality() { ID = 3, LocalityID = 2, Name = "West Faridabaad Region 1" });
            subLocalities.Add(new SubLocality() { ID = 4, LocalityID = 2, Name = "West Faridabaad Region 2" });
            subLocalities.Add(new SubLocality() { ID = 5, LocalityID = 3, Name = "East Noida Region 1" });
            subLocalities.Add(new SubLocality() { ID = 6, LocalityID = 3, Name = "East Noida Region 2" });
            subLocalities.Add(new SubLocality() { ID = 7, LocalityID = 4, Name = "West Noida Region 1" });
            subLocalities.Add(new SubLocality() { ID = 8, LocalityID = 4, Name = "West Noida Region 2" });
            return subLocalities;
        }
    }
    
    public class ViewModel
    {
        [Required(ErrorMessage = "Please select a city")]
        [Display(Name = "City")]
        public int? SelectedCity { get; set; }
        [Required(ErrorMessage = "Please select a locality")]
        [Display(Name = "Locality")]
        public int? SelectedLocality { get; set; }
        [Required(ErrorMessage = "Please select a sub locality")]
        [Display(Name = "Sub Locality")]
        public int? SelectedSubLocality { get; set; }
        public SelectList CityList { get; set; }
        public SelectList LocalityList { get; set; }
        public SelectList SubLocalityList { get; set; }
    }
    
    
​
}

@model Ashish.ViewModel
@{
	Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<style type="text/css">
			div {
				margin: 10px;
			}
			label {
				display: inline-block;
				width: 100px;
			}
			input[type="text"] {
				  box-sizing: border-box;
				width: 200px;
			}
			select {
				width: 200px;
			}
			input[type="submit"] {
				margin-left: 115px;
			}

			.field-validation-error {
				display:block;
				margin-left: 110px;
				color: #ff0000;
			}

		</style>
	</head>
	<body>
		@using (Html.BeginForm())
		{
			<div>
				@Html.LabelFor(m => m.SelectedCity)
				@Html.DropDownListFor(m => m.SelectedCity, Model.CityList, "Please select")
				@Html.ValidationMessageFor(m => m.SelectedCity)
			</div>
			<div>
				@Html.LabelFor(m => m.SelectedLocality)
				@Html.DropDownListFor(m => m.SelectedLocality, Model.LocalityList)
				@Html.ValidationMessageFor(m => m.SelectedLocality)
			</div>
			<div>
				@Html.LabelFor(m => m.SelectedSubLocality)
				@Html.DropDownListFor(m => m.SelectedSubLocality, Model.SubLocalityList)
				@Html.ValidationMessageFor(m => m.SelectedSubLocality)
			</div>	
			
			<input type="submit" value="save" />
		}


		<!-- JS includes -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
		<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
		
		<script type="text/javascript">
			var localityUrl = '@Url.Action("FetchLocalities")';
			var subLocalityUrl = '@Url.Action("FetchSubLocalities")';
			var localities = $('#SelectedLocality');
			var subLocalities = $('#SelectedSubLocality');
			$('#SelectedCity').change(function() {
				localities.empty();
				subLocalities.empty();
				$.getJSON(localityUrl, { ID: $(this).val() },function(data) {
					if (!data) {
						return;
					}
					localities.append($('<option></option>').val('').text('Please select'));
					$.each(data, function(index, item) {
						localities.append($('<option></option>').val(item.Value).text(item.Text));
					});
				});
			})
			$('#SelectedLocality').change(function() {
				subLocalities.empty();
				$.getJSON(subLocalityUrl, { ID: $(this).val() },function(data) {
					if (!data) {
						return;
					}
					subLocalities.append($('<option></option>').val('').text('Please select'));
					$.each(data, function(index, item) {
						subLocalities.append($('<option></option>').val(item.Value).text(item.Text));
					});
				});
			})				  

		</script>
	</body>
</html>

View

 
@model Ashish.ViewModel
@{
    Layout = null;
}
​
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
​
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
​
        <style type="text/css">
            div {
                margin: 10px;
            }
            label {
                display: inline-block;
                width: 100px;
            }
            input[type="text"] {
                  box-sizing: border-box;
                width: 200px;
            }
            select {
                width: 200px;
            }
            input[type="submit"] {
                margin-left: 115px;
            }
​
            .field-validation-error {
                display:block;
                margin-left: 110px;
                color: #ff0000;
            }
​
        </style>
    </head>
    <body>
        @using (Html.BeginForm())
        {
            <div>
                @Html.LabelFor(m => m.SelectedCity)
                @Html.DropDownListFor(m => m.SelectedCity, Model.CityList, "Please select")
                @Html.ValidationMessageFor(m => m.SelectedCity)
            </div>
            <div>
                @Html.LabelFor(m => m.SelectedLocality)
                @Html.DropDownListFor(m => m.SelectedLocality, Model.LocalityList)
                @Html.ValidationMessageFor(m => m.SelectedLocality)
            </div>
            <div>
                @Html.LabelFor(m => m.SelectedSubLocality)
                @Html.DropDownListFor(m => m.SelectedSubLocality, Model.SubLocalityList)
                @Html.ValidationMessageFor(m => m.SelectedSubLocality)
            </div>  
            
            <input type="submit" value="save" />
        }
​
​
        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
        
        <script type="text/javascript">
            var localityUrl = '@Url.Action("FetchLocalities")';
            var subLocalityUrl = '@Url.Action("FetchSubLocalities")';
            var localities = $('#SelectedLocality');
            var subLocalities = $('#SelectedSubLocality');
            $('#SelectedCity').change(function() {
                localities.empty();
                subLocalities.empty();
                $.getJSON(localityUrl, { ID: $(this).val() },function(data) {
                    if (!data) {
                        return;
                    }
                    localities.append($('<option></option>').val('').text('Please select'));
                    $.each(data, function(index, item) {
                        localities.append($('<option></option>').val(item.Value).text(item.Text));
                    });
                });
            })
            $('#SelectedLocality').change(function() {
                subLocalities.empty();
                $.getJSON(subLocalityUrl, { ID: $(this).val() },function(data) {
                    if (!data) {
                        return;
                    }
                    subLocalities.append($('<option></option>').val('').text('Please select'));
                    $.each(data, function(index, item) {
                        subLocalities.append($('<option></option>').val(item.Value).text(item.Text));
                    });
                });
            })                
​
        </script>
    </body>
</html>
​

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

namespace Ashish
{
	public class HomeController : Controller
	{
		[HttpGet]
		public ActionResult Index()
		{
			ViewModel model = new ViewModel();
			ConfigureViewModel(model);
			return View(model);
		}
		
		[HttpPost]
		public ActionResult Index(ViewModel model)
		{
			if (!ModelState.IsValid)
			{
				ConfigureViewModel(model);
				return View(model);
			}
			// save and redirect
			return RedirectToAction("Somewhere");
		}
		
		[HttpGet]
		public JsonResult FetchLocalities(int ID)
		{
			var data = Repository.FetchLocalities()
				.Where(l => l.CityID == ID)
				.Select(l => new { Value = l.ID, Text = l.Name });
			return Json(data, JsonRequestBehavior.AllowGet);
		}
		
		[HttpGet]
		public JsonResult FetchSubLocalities(int ID)
		{
			//int localityID = Repository.FetchLocalities().Where(l => l.ID == ID).Select(l => l.LocalityID).First();
			var data = Repository.FetchSubLocalities()
				.Where(l => l.LocalityID == ID)
				.Select(l => new { Value = l.ID, Text = l.Name });
			return Json(data, JsonRequestBehavior.AllowGet);
		}
		
		private void ConfigureViewModel(ViewModel model)
		{
			List<City> cities = Repository.FetchCities();
			model.CityList = new SelectList(cities, "ID", "Name");
			if (model.SelectedCity.HasValue)
			{
				IEnumerable<Locality> localities = Repository.FetchLocalities().Where(l => l.CityID == model.SelectedCity.Value);
				model.LocalityList = new SelectList(localities, "ID", "Name");
			}
			else
			{
				model.LocalityList = new SelectList(Enumerable.Empty<SelectListItem>());
			}
			if (model.SelectedLocality.HasValue)
			{
				IEnumerable<SubLocality> subLocalities = Repository.FetchSubLocalities().Where(l => l.LocalityID == model.SelectedLocality.Value);
			}
			else
			{
				model.SubLocalityList = new SelectList(Enumerable.Empty<SelectListItem>());
			}
		}
	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
using System.Linq;
​
namespace Ashish
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            ViewModel model = new ViewModel();
            ConfigureViewModel(model);
            return View(model);
        }
        
        [HttpPost]
        public ActionResult Index(ViewModel model)
        {
            if (!ModelState.IsValid)
            {
                ConfigureViewModel(model);
                return View(model);
            }
            // save and redirect
            return RedirectToAction("Somewhere");
        }
        
        [HttpGet]
        public JsonResult FetchLocalities(int ID)
        {
            var data = Repository.FetchLocalities()
                .Where(l => l.CityID == ID)
                .Select(l => new { Value = l.ID, Text = l.Name });
            return Json(data, JsonRequestBehavior.AllowGet);
        }
        
        [HttpGet]
        public JsonResult FetchSubLocalities(int ID)
        {
            //int localityID = Repository.FetchLocalities().Where(l => l.ID == ID).Select(l => l.LocalityID).First();
            var data = Repository.FetchSubLocalities()
                .Where(l => l.LocalityID == ID)
                .Select(l => new { Value = l.ID, Text = l.Name });
            return Json(data, JsonRequestBehavior.AllowGet);
        }
        
        private void ConfigureViewModel(ViewModel model)
        {
            List<City> cities = Repository.FetchCities();
            model.CityList = new SelectList(cities, "ID", "Name");
            if (model.SelectedCity.HasValue)
            {
                IEnumerable<Locality> localities = Repository.FetchLocalities().Where(l => l.CityID == model.SelectedCity.Value);
                model.LocalityList = new SelectList(localities, "ID", "Name");
            }
            else
            {
                model.LocalityList = new SelectList(Enumerable.Empty<SelectListItem>());
            }
            if (model.SelectedLocality.HasValue)
            {
                IEnumerable<SubLocality> subLocalities = Repository.FetchSubLocalities().Where(l => l.LocalityID == model.SelectedLocality.Value);
            }
            else
            {
                model.SubLocalityList = new SelectList(Enumerable.Empty<SelectListItem>());
            }
        }
    }
}

View in Full Screen

View IL Code