Hi rani,
I have created a sample that full-fill your requirement.
Refer the below sample code. You need to bind the record from database.
Models
State Model
namespace Cascading_DropDownList.Models
{
public class State
{
public string StateName { get; set; }
public string CountryName { get; set; }
public static IQueryable<State> GetState()
{
return new List<State>
{
new State { CountryName = "USA", StateName = "Alabama" },
new State { CountryName = "USA", StateName = "Arizona" },
new State { CountryName = "USA", StateName = "Alaska" },
new State { CountryName = "India", StateName = "Maharashtra" },
new State { CountryName = "India", StateName = "Gujarat" },
new State { CountryName = "India", StateName = "Goa" },
new State { CountryName = "Canada", StateName = "Ontario" },
new State { CountryName = "Canada", StateName = "Quebec" },
new State { CountryName = "Canada", StateName = "Manitoba" }
}.AsQueryable();
}
}
}
City Model
namespace Cascading_DropDownList.Models
{
public class City
{
public string CityName { get; set; }
public string StateName { get; set; }
public static IQueryable<City> GetCity()
{
return new List<City>
{
new City { StateName = "Alabama", CityName = "Abbeville" },
new City { StateName = "Alabama", CityName = "Argo" },
new City { StateName = "Arizona", CityName = "Buckeye" },
new City { StateName = "Arizona", CityName = "Carefree" },
new City { StateName = "Alaska", CityName = "Juneau" },
new City { StateName = "Alaska", CityName = "Sitka" },
new City { StateName = "Maharashtra", CityName = "Mumbai" },
new City { StateName = "Maharashtra", CityName = "Pune" },
new City { StateName = "Gujarat", CityName = "Ahmedabad" },
new City { StateName = "Gujarat", CityName = "Gandhinagar" },
new City { StateName = "Goa", CityName = "Panjim" },
new City { StateName = "Goa", CityName = "Vasco" },
new City { StateName = "Ontario", CityName = "Ottawa" },
new City { StateName = "Ontario", CityName = "Port Hope" },
new City { StateName = "Quebec", CityName = "Chandler" },
new City { StateName = "Quebec", CityName = "Princeville" },
new City { StateName = "Manitoba", CityName = "Carman" },
new City { StateName = "Manitoba", CityName = "Roblin" }
}.AsQueryable();
}
}
}
Controllers
HomeController
namespace Cascading_DropDownList.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
List<SelectListItem> country = new List<SelectListItem>();
country.Add(new SelectListItem { Text = "USA", Value = "USA" });
country.Add(new SelectListItem { Text = "India", Value = "India" });
country.Add(new SelectListItem { Text = "Canada", Value = "Canada" });
ViewData["CountryName"] = new SelectList(country, "Value", "Text");
return View();
}
public JsonResult StateList(string id)
{
var states = from s in State.GetState()
where s.CountryName == id
select s;
return Json(new SelectList(states.ToArray(), "CountryName", "StateName"), JsonRequestBehavior.AllowGet);
}
public JsonResult CityList(string id)
{
var cities = from s in City.GetCity()
where s.StateName == id
select s;
return Json(new SelectList(cities.ToArray(), "StateName", "CityName"), JsonRequestBehavior.AllowGet);
}
}
}
View -> Home
Index.aspx
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Cascading_DropDownList.Models.Cascading>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Cascading DropDownList</title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/jscript">
$(function () {
$('#ddlCountry').change(function () {
$.getJSON('/Home/StateList/' + $('#ddlCountry option:selected')[0].textContent, function (data) {
var items = '<option>Select State</option>';
$.each(data, function (i, state) {
items += "<option value='" + state.Value + "'>" + state.Text + "</option>";
});
$('#ddlState').html(items);
});
});
$('#ddlState').change(function () {
$.getJSON('/Home/CityList/' + $('#ddlState option:selected')[0].textContent, function (data) {
var items = '<option>Select City</option>';
$.each(data, function (i, city) {
items += "<option value='" + city.Value + "'>" + city.Text + "</option>";
});
$('#ddlCity').html(items);
});
});
});
</script>
</head>
<body>
<% using (Html.BeginForm())
{ %>
<fieldset style="width: 15%;">
<legend>Cascading DropDownList</legend>
<table>
<tr>
<td>
<%= Html.Label("Country : ")%>
</td>
<td>
<%= Html.DropDownList("Country", ViewData["CountryName"] as SelectList, "Select Country", new { id = "ddlCountry" })%>
</td>
</tr>
<tr>
<td>
<%= Html.Label("State : ")%>
</td>
<td>
<select id="ddlState" name="State">
</select>
</td>
</tr>
<tr>
<td>
<%= Html.Label("City : ")%>
</td>
<td>
<select id="ddlCity" name="City">
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Save" id="btnSave" />
</td>
</tr>
</table>
</fieldset>
<% } %>
</body>
</html>
Screenshot
