Hi iammann,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
List<Country> countries = new List<Country>();
countries.Add(new Country { CountryName = "USA", CountryId = 1 });
countries.Add(new Country { CountryName = "India", CountryId = 2 });
countries.Add(new Country { CountryName = "Canada", CountryId = 3 });
ViewData["Country"] = countries;
List<State> states = new List<State>();
states.Add(new State { StateId = 1, StateName = "Alabama", CountryId = 1 });
states.Add(new State { StateId = 2, StateName = "Arizona", CountryId = 1 });
states.Add(new State { StateId = 3, StateName = "Alaska", CountryId = 1 });
states.Add(new State { StateId = 4, StateName = "Maharashtra", CountryId = 2 });
states.Add(new State { StateId = 5, StateName = "Gujarat", CountryId = 2 });
states.Add(new State { StateId = 6, StateName = "Goa", CountryId = 2 });
states.Add(new State { StateId = 7, StateName = "Ontario", CountryId = 3 });
states.Add(new State { StateId = 8, StateName = "Quebec", CountryId = 3 });
states.Add(new State { StateId = 9, StateName = "Manitoba", CountryId = 3 });
ViewData["State"] = states;
return View();
}
public JsonResult getPersonDetails()
{
List<Person> persons = new List<Person>();
persons.Add(new Person { PersonName = "Test 1", CountryId = 1, StateId = 1 });
persons.Add(new Person { PersonName = "Test 2", CountryId = 2, StateId = 3 });
persons.Add(new Person { PersonName = "Test 3", CountryId = 3, StateId = 9 });
return Json(persons, JsonRequestBehavior.AllowGet);
}
public JsonResult StateList(string countryId)
{
List<State> states = new List<State>();
states.Add(new State { StateId = 1, StateName = "Alabama", CountryId = 1 });
states.Add(new State { StateId = 2, StateName = "Arizona", CountryId = 1 });
states.Add(new State { StateId = 3, StateName = "Alaska", CountryId = 1 });
states.Add(new State { StateId = 4, StateName = "Maharashtra", CountryId = 2 });
states.Add(new State { StateId = 5, StateName = "Gujarat", CountryId = 2 });
states.Add(new State { StateId = 6, StateName = "Goa", CountryId = 2 });
states.Add(new State { StateId = 7, StateName = "Ontario", CountryId = 3 });
states.Add(new State { StateId = 8, StateName = "Quebec", CountryId = 3 });
states.Add(new State { StateId = 9, StateName = "Manitoba", CountryId = 3 });
return Json(states.Where(x => x.CountryId == Convert.ToInt32(countryId)));
}
public class Country
{
public int CountryId { get; set; }
public string CountryName { get; set; }
}
public class State
{
public int StateId { get; set; }
public string StateName { get; set; }
public int CountryId { get; set; }
}
public class Person
{
public string PersonName { get; set; }
public int StateId { get; set; }
public int CountryId { get; set; }
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h2>Person Details</h2>
@using (Html.BeginForm())
{
<table>
<tr>
<td>Person Name</td>
<td>Country</td>
<td>State</td>
</tr>
</table>
}
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var CountryOptions = @Html.Raw(Json.Encode(ViewData["Country"]));
var StateOptions = @Html.Raw(Json.Encode(ViewData["State"]));
$.ajax({
url: '@Url.Action("getPersonDetails", "Home")',
data: {},
type: 'GET',
success: function (data) {
var tr;
var country='<option value="">Select Country</option>';
var State='<option value="">Select State</option>';
for (var e=0; e < CountryOptions.length; e++)
{
var lt = CountryOptions[e];
country += '<option value="'+lt["CountryId"]+'">'+lt["CountryName"]+' </option>';
}
for (var e=0; e < StateOptions.length; e++)
{
var lt = StateOptions[e];
State += '<option value="'+lt["StateId"]+'">'+lt["StateName"]+' </option>';
}
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + data[i].PersonName + "</td>");
tr.append("<td> <select id='ddlCountries" + data[i].CountryId + "' onchange='Change(this)' >" + country + "</select></td>");
tr.append("<td> <select id='ddlStates" + data[i].StateId + "' >" + State + "</select></td>");
$('table').append(tr);
}
}
});
});
function Change(element) {
var countryId= $(element).find('option:selected').val();
var state= $(element).closest('tr').find('[id*=ddlStates]').empty();
$(state).html('<option value="">Select State</option>');
$.ajax({
url: '@Url.Action("StateList", "Home")',
data: {countryId:+countryId},
type: 'POST',
success: function (data) {
var items = '<option>Select State</option>';
$.each(data, function (i, state) {
items += "<option value='" + state.StateId + "'>" + state.StateName + "</option>";
});
$(state).html(items);
},
error:function (response) {
alert(response.responseText);
}
});
}
</script>
</body>
</html>
Screenshot
