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 State :
SQL Table Country :
Step 2: After Creating City,State,Country Table add The ADO.NET Entity Modal
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
SEE MORE
- Auto Refresh Partial View in ASP.NET MVC
- What is ASP.NET Core
- Difference between TempData keep() And Peek() in Asp.Net MVC
- Difference between viewbag,viewdata and tempdata in asp.net mvc
- ASP.NET MVC With AngularJS
- Retrieving Data Using Form Collection and Inserting Into ASP.Net MVC
- MVC CRUD Operations Using Entity Framework
- Search Functionality in ASP.NET MVC
- How to create a User Registration page using asp.net mvc
- Store Multiple Checkbox state from cookie using Jquery
- Cascading Dropdownlist using Ajax in Asp.Net Mvc with city state country
- Insert, Update, Delete In GridView Using ASP.Net C#
- Binding Dropdownlist With Database In Asp.Net MVC
- Search and Filter data in Gridview using Asp.net MVC
- Select Insert, Update And Delete With ASP.NET MVC
- Display Data in GridView Using Asp.net MVC
- Validation in ASP.NET MVC Razor view
- CRUD Operation Using 3-Tier Architecture In ASP.NET
- How to get Connection String from Web.Config in Asp.Net C#
- Login page using 3-Tier Architecture in ASP.Net
- Asp.Net Image Upload in 3-Tier Architecture and store in sql database
Nice Content For Developers