Cascading Dropdownlist using Ajax in Asp.Net Mvc with city state country

In this tutorial we have learn how to populate Cascading Dropdownlist using Ajax in Asp.Net Mvc with city state country.

Step 1: First Create the database and add the table City,State and Country  and give entity relationship between all tree table as mentioned below.

SQL Table City :

SQL Table City

SQL Table State :

SQL Table Sate

SQL Table Country :

SQL Table Country

Step 2:  After Creating City,State,Country Table  add The ADO.NET  Entity Modal

Entity Framework

Step3 :  Add the controller Employee and following code

public class EmployeeController : Controller
{

public ActionResult Index()
{
Database1Entities db = new Database1Entities();

// here country value are pass to view using the viewbag
ViewBag.Country = new SelectList(db.Countries, “CountryID”, “CountryName”);
return View();
}
public JsonResult GetState(string id)
{
List states = new List();
var stateList = this.Getstatevalue(Convert.ToInt32(id));
var stateData = stateList.Select(m => new SelectListItem()
{
Text = m.StateName,
Value = m.StateID.ToString(),
});
return Json(stateData, JsonRequestBehavior.AllowGet);
}
public IList Getstatevalue(int CountryId)
{
Database1Entities db = new Database1Entities();

return db.States.Where(m => m.CountryID == CountryId).ToList();
}

public JsonResult GetCity(string id)
{
List cities = new List();
var cityList = this.Getcityvalue(Convert.ToInt32(id));
var cityData = cityList.Select(m => new SelectListItem()
{
Text = m.CityName,
Value = m.CityID.ToString(),
});
return Json(cityData, JsonRequestBehavior.AllowGet);
}
}

Step 4 : Now need to add razor view, Here Controller Can be Call using the jquery and ajax call as per below mentioned code

using (Html.BeginForm()) {
@Html.ValidationSummary(true)

<fieldset>
<legend>EmployeeData</legend>

<div class=”editor-label”>
@Html.Label(“Country”)<br />
</div>

<div>
@Html.DropDownList(“Country”, ViewBag.Country as SelectList, “– Please Select a Country –“, new { style = “width:150px”,@id=”Country” })
</div>
<div class=”editor-label”>
<br />
@Html.Label(“State”)<br />
</div>
<div>
@Html.DropDownList(“State”, new SelectList(string.Empty, “Value”, “Text”), “– Please select a State –“,
new { style = “width:150px”, @class = “dropdown1″ })
</div>

<div class=”editor-label”>
<br />
@Html.Label(“City”)<br />
</div>
<div>
@Html.DropDownList(“City”, new SelectList(string.Empty, “Value”, “Text”), “– Please select a city –“,
new { style = “width:150px”, @class = “dropdown2″,@id=”City” })
</div>

<p>
<input type=”button” onclick=”ddlInsert()” value=”Submit” />
</p>
</fieldset>
}

Now add JQuery and ajax code to populate City,State,Country dropdownlist dynamically and call action method from the controller using ajax

<script src=”~/Scripts/jquery-1.7.1.js”></script>
<script src=”~/Scripts/jquery-1.7.1.min.js”></script>

<script type=”text/javascript”>
$(document).ready(function () {
// this is Country Dropdown Selectedchange event
$(“#Country”).change(function () {
$(“#State”).empty();
$.ajax({
type: ‘POST’,
url: ‘@Url.Action(“Getstates”)’, // here we are Calling json method
dataType: ‘json’,
data: { id: $(“#Country”).val() },
// Get Selected Country ID.

success: function (states) {
$.each(states, function (i, state) {
$(“#State”).append(‘<option value=”‘ + state.Value + ‘”>’ +
state.Text + ‘</option>’);
});
},
error: function (ex) {
alert(‘ states retrieving fail.’ + ex);
}
});
return false;
})

$(“#State”).change(function () {
$(“#City”).empty();
$.ajax({
type: ‘POST’,
url: ‘@Url.Action(“GetCities”)’, // here we are Calling json method
dataType: ‘json’,
data: { id: $(“#State”).val() },
// Get Selected Country ID.

success: function (cities) {
$.each(cities, function (i, city) {
$(“#City”).append(‘<option value=”‘ + city.Value + ‘”>’ +
city.Text + ‘</option>’);
});
},
error: function (ex) {
alert(‘ city retrieving fail.’ + ex);
}
});
return false;
})
});
</script>

Now run web application and see how to populate Cascading Dropdownlist using Ajax in Asp.Net Mvc with city, state,country

 

Cascading Dropdownlist using Ajax in Asp.Net Mvc with city state country

SEE MORE