Cascading dropdownlists | C# Online Compiler

Cascading dropdownlists by Anonymous

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 Coordinates
	{
		public int CityID
		{
			get;
			set;
		}

		public float Latitude
		{
			get;
			set;
		}

		public float Longitude
		{
			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 static List<Coordinates> FetchCoordinates()
		{
			List<Coordinates> coordinates = new List<Coordinates>()
			{new Coordinates()
			{CityID = 1, Latitude = 100.00F, Longitude = 100.00F}, new Coordinates()
			{CityID = 2, Latitude = 200.00F, Longitude = 200.00F}};
			return coordinates;
		}
	}

	public class ViewModel
	{
		[Required(ErrorMessage = "Please enter a project name")]
		[Display(Name = "Project")]
		public string ProjectName
		{
			get;
			set;
		}

		[Required(ErrorMessage = "Please enter a developer name")]
		[Display(Name = "Developer")]
		public string DeveloperName
		{
			get;
			set;
		}

		[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;
		}
	}

	ity {
	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 Coordinates
    {
        public int CityID
        {
            get;
            set;
        }
​
        public float Latitude
        {
            get;
            set;
        }
​
        public float Longitude
        {
            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 static List<Coordinates> FetchCoordinates()
        {
            List<Coordinates> coordinates = new List<Coordinates>()
            {new Coordinates()
            {CityID = 1, Latitude = 100.00F, Longitude = 100.00F}, new Coordinates()
            {CityID = 2, Latitude = 200.00F, Longitude = 200.00F}};
            return coordinates;
        }
    }
​
    public class ViewModel
    {
        [Required(ErrorMessage = "Please enter a project name")]
        [Display(Name = "Project")]
        public string ProjectName
        {
            get;
            set;
        }
​
        [Required(ErrorMessage = "Please enter a developer name")]
        [Display(Name = "Developer")]
        public string DeveloperName
        {
            get;
            set;
        }
​
        [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;
        }
    }
​
    ity {
    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.ProjectName)
				@Html.TextBoxFor(m => m.ProjectName)
				@Html.ValidationMessageFor(m => m.ProjectName)
			</div>
			<div>
				@Html.LabelFor(m => m.DeveloperName)
				@Html.TextBoxFor(m => m.DeveloperName)
				@Html.ValidationMessageFor(m => m.DeveloperName)
			</div>
			<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="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.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 coodinatesUrl = '@Url.Action("FetchCoordinates")';
			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));
					});
				});
				$.getJSON(coodinatesUrl, { ID: $(this).val() }, function(data) {
					console.log(data);
				});
			})
			$('#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.ProjectName)
                @Html.TextBoxFor(m => m.ProjectName)
                @Html.ValidationMessageFor(m => m.ProjectName)
            </div>
            <div>
                @Html.LabelFor(m => m.DeveloperName)
                @Html.TextBoxFor(m => m.DeveloperName)
                @Html.ValidationMessageFor(m => m.DeveloperName)
            </div>
            <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="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.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 coodinatesUrl = '@Url.Action("FetchCoordinates")';
            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));
                    });
                });
                $.getJSON(coodinatesUrl, { ID: $(this).val() }, function(data) {
                    console.log(data);
                });
            })
            $('#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();
			//model.SelectedCity = 2;
			//model.SelectedLocality = 3;
			//model.SelectedSubLocality = 6;
			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 FetchCoordinates(int ID)
		{
			var data = Repository.FetchCoordinates().Where(c => c.CityID == ID).FirstOrDefault();
			return Json(data, JsonRequestBehavior.AllowGet);
		}

		[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);
				model.SubLocalityList = new SelectList(subLocalities, "ID", "Name");
			}
			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();
            //model.SelectedCity = 2;
            //model.SelectedLocality = 3;
            //model.SelectedSubLocality = 6;
            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 FetchCoordinates(int ID)
        {
            var data = Repository.FetchCoordinates().Where(c => c.CityID == ID).FirstOrDefault();
            return Json(data, JsonRequestBehavior.AllowGet);
        }
​
        [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);
                model.SubLocalityList = new SelectList(subLocalities, "ID", "Name");
            }
            else
            {
                model.SubLocalityList = new SelectList(Enumerable.Empty<SelectListItem>());
            }
        }
    }
}

View in Full Screen

Last Run:	9:01:29 am
Compile:	0.141s
Execute:	0s
Memory:	32kb
CPU:	0.016s

View IL Code