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

— June 3, 2019 in MVC • 12 comments

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

  1. Auto Refresh Partial View in ASP.NET MVC
  2. What is ASP.NET Core
  3. Difference between TempData keep() And Peek() in Asp.Net MVC
  4. Difference between viewbag,viewdata and tempdata in asp.net mvc
  5. ASP.NET MVC With AngularJS
  6. Retrieving Data Using Form Collection and Inserting Into ASP.Net MVC
  7. MVC CRUD Operations Using Entity Framework
  8. Search Functionality in ASP.NET MVC
  9. How to create a User Registration page using asp.net mvc
  10. Store Multiple Checkbox state from cookie using Jquery
  11. Cascading Dropdownlist using Ajax in Asp.Net Mvc with city state country
  12. Insert, Update, Delete In GridView Using ASP.Net C#
  13. Binding Dropdownlist With Database In Asp.Net MVC
  14. Search and Filter data in Gridview using Asp.net MVC
  15. Select Insert, Update And Delete With ASP.NET MVC
  16. Display Data in GridView Using Asp.net MVC
  17. Validation in ASP.NET MVC Razor view
  18. CRUD Operation Using 3-Tier Architecture In ASP.NET
  19. How to get Connection String from Web.Config in Asp.Net C#
  20. Login page using 3-Tier Architecture in ASP.Net
  21. Asp.Net Image Upload in 3-Tier Architecture and store in sql database