Step 1 : Create your Model.
public class Employee
{
[ScaffoldColumn(false)]
public int EmployeeId { get; set; }
public string SelectedStateId { get; set; }
public List<state> States { get; set; }
public string SelectedCityId { get; set; }
public List<city> Citys { get; set; }
}
public class State {
public string ID { get; set; }
public string Name { get; set; }
}
public class City
{
public string ID { get; set; }
public string Name { get; set; }
public string StateID { get; set; }
}
</city></state>
Step 2 : Create your cshtml page.
Create a view from your index action method your controller. Right click => add View.
@model YourNamespace.Models.Employee
<div class="formElements">
@Html.Label("Select State", new { @class = "control-label col-md-2" })
@Html.DropDownListFor(model => model.SelectedStateId, new SelectList(Model.States, "ID", "Name", "Null"), new { @id = "SelectedState" })
</div>
<div class="formElements" style="display:none" id="select-city-div">
</div>
Step 3 : Add the below Javascript into your view created at step 2.
Here we are getting the value of selected state from dropdown and pass value to a method called "GetCities".
<script type="text/javascript">
$('#SelectedState').change(function () {
var selectedStateValue = $('#SelectedState option:selected').val();
if (selectedStateValue == "NULL") {
$('#select-city-div').hide();
}
else {
$.ajax({
type: "GET",
url: "/Employee/GetCities",
data: { stateId: selectedStateValue },
success: function (data) {
$('#select-city-div').show();
$('#select-city-div').html(data);
},
error: function (e, ts, et) {
alert(ts);
}
});
}
});
</script>
Step 4 : Implement the "GetCities" method
public static List<city> listCity = new List<city>();
public void GetData()
{
if (listState.Count() <= 0)
{
listState.Add(new State { Name = "-Please Select-", ID = "NULL" });
listState.Add(new State { Name = "Andhra Pradesh", ID = "0" });
listState.Add(new State { Name = "West Bengal", ID = "1" });
listState.Add(new State { Name = "Maharastra", ID = "2" });
}
if (listCity.Count() <= 0)
{
listCity.Add(new City { Name = "-Please Select-", ID = "NULL" , StateID="0" });
listCity.Add(new City { Name = "Hyderabad", ID = "0", StateID="0"});
listCity.Add(new City { Name = "Vijaywada", ID = "1", StateID="0" });
listCity.Add(new City { Name = "-Please Select-", ID = "NULL", StateID = "1" });
listCity.Add(new City { Name = "Kolkata", ID = "0", StateID = "1" });
listCity.Add(new City { Name = "Durgapur", ID = "1", StateID = "1" });
listCity.Add(new City { Name = "-Please Select-", ID = "NULL", StateID = "2" });
listCity.Add(new City { Name = "Mumbai", ID = "0", StateID = "2" });
listCity.Add(new City { Name = "Pune", ID = "1", StateID = "2" });
}
}
[HttpGet]
public ActionResult GetCities(string stateId)
{
GetData();
var listFilteredCity = listCity.FindAll(x => x.StateID == stateId);
return PartialView("City", listFilteredCity);
}
Step 5 : Add a partial view named as "City.cshtml" and place the below code.
@model IEnumerable<YourNamespace.models.city>
@Html.Label("Select City", new { @class = "control-label col-md-2" })
@Html.DropDownListFor(x=>x.FirstOrDefault().ID, new SelectList(Model, "ID", "Name", "Null"), new { @class = "inputalign", @id = "SelectedCity" })
</oneemployee.models.city>
Step 6 : Enjoy your hard work.
Basically we are rendering a partial view[City.cshtml] based on the State selection through an Ajax call.
In real time scenario we will not be using static list like I have used for List of cities or state. This is just an example. In your case you get the list of country and state from database.