dropdown load on selection of other dropdown - asp.net-mvc

Question

I have the dropdown trigger an ajax post that sends the selected value of country dropdown .
model class
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MVC_4___A_Registration_Form.Models
{
public class ModelServices
{
private readonly MyCompanyEntities entities = new MyCompanyEntities();
public IEnumerable<Country> GetCountryList()
{
return entities.Countries.ToList();
}
public IEnumerable<countryState> GetStateByCountry(int CountryID)
{
return entities.countryStates.Where(s => s.CountryId == CountryID).ToList();
}
public IList<EmployeeRegInfo> GetAllEmployeeList()
{
var myQuery = (from e in entities.Employees
join c in entities.Countries on e.Country equals c.CountryId
join s in entities.countryStates on e.State equals s.StateId
select new EmployeeRegInfo()
{
Id = e.Id,
Emp_ID = e.Emp_ID,
Dept = e.Dept,
Name = e.Name,
CountryName = c.County,
StateName = s.State,
City = e.City,
Mobile = e.Mobile
});
return myQuery.ToList();
}
public bool IsEmpAlreadyExist(string EMP_CODE)
{
bool IsRecordExist = false;
var result = (from t in entities.Employees
where t.Emp_ID == EMP_CODE
select t).SingleOrDefault();
if (result != null)
{
IsRecordExist = true;
}
return IsRecordExist;
}
public void AddNewEmployee(Employee emp)
{
entities.Employees.Add(emp);
entities.SaveChanges();
}
}
}
create.cshtml
#model MVC_4___A_Registration_Form.Models.EmployeeRegInfo
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
#ViewBag.ErrorMsg
<table>
<tr>
<td>
#Html.LabelFor(model => model.Emp_ID)
</td>
<td>#Html.EditorFor(model => model.Emp_ID)
#Html.ValidationMessageFor(model => model.Emp_ID)</td>
</tr>
<tr>
<td>
#Html.LabelFor(model => model.Name)
</td>
<td>#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)</td>
</tr>
<tr>
<td>#Html.LabelFor(model => model.Dept)
</td>
<td>#Html.EditorFor(model => model.Dept)
#Html.ValidationMessageFor(model => model.Dept)</td>
</tr>
<tr>
<td>
#Html.LabelFor(model => model.Country)</td>
<td>#Html.DropDownList("Country", ViewBag.Country as SelectList, new { Styles = "width:300px" })</td>
</tr>
<tr>
<td>#Html.LabelFor(model => model.State)
</td>
<td>
<select id="State" name="State" style="width: 200px"></select>
#Html.ValidationMessageFor(model => model.State)</td>
</tr>
<tr>
<td>#Html.LabelFor(model => model.City)</td>
<td>#Html.EditorFor(model => model.City)
#Html.ValidationMessageFor(model => model.City)
</td>
</tr>
<tr>
<td>
#Html.LabelFor(model => model.Mobile)</td>
<td>#Html.EditorFor(model => model.Mobile)
#Html.ValidationMessageFor(model => model.Mobile)
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Add Employee" /></td>
</tr>
</table>
}
<script type="text/javascript">
$(document).ready(function () {
$("#Country").change(function () {
var url = "/ManageEmployee/GetStatesByCountry";
var countryID = $("#Country").val();
$.post(url, { countryID: countryID }, function (data) {
$("#State").empty();
var items;
$.each(data, function (i, states) {
items += "<option value=" + states.StateId + ">" + states.State + "</option>";
});
$("#State").html(items);
});
});
});
</script>
controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_4___A_Registration_Form.Models;
namespace MVC_4___A_Registration_Form.Controllers
{
public class ManageEmployeeController : Controller
{
ModelServices model = new ModelServices();
//
// GET: /ManageEmployee/
public ActionResult Index()
{
IList<EmployeeRegInfo> empList = new List<EmployeeRegInfo>();
empList = model.GetAllEmployeeList();
return View(empList);
}
public ActionResult Create()
{
IEnumerable<Country> country;
country = model.GetCountryList();
ViewBag.Country = new SelectList(country, "CountryId", "County", "CountryId");
return View();
}
[HttpPost]
public ActionResult Create(FormCollection collection)
{
bool checkEmpCodeExist = false;
checkEmpCodeExist = model.IsEmpAlreadyExist(collection["Emp_ID"]);
if (!checkEmpCodeExist)
{
try
{
Employee emp = new Employee();
emp.Emp_ID = collection["Emp_ID"];
emp.Name = collection["Name"];
emp.Dept = collection["Dept"];
emp.Country = Convert.ToInt32(collection["Country"]);
emp.State = Convert.ToInt32(collection["State"]);
emp.City = collection["City"];
emp.Mobile = collection["Mobile"];
model.AddNewEmployee(emp);
return RedirectToAction("Index");
}
catch (Exception ex)
{
return RedirectToAction("Create");
}
}
else
{
ViewBag.ErrorMsg = "Employee Code Already Exist";
return RedirectToAction("Create");
}
}
public JsonResult GetStatesByCountry(int id)
{
var states = model.GetStateByCountry(id);
return Json(states, JsonRequestBehavior.AllowGet);
}
}
}
I want to load state dropdown on selection of country dropdown.But i am unable to do this.
Please help to load state dropdown on selection of country dropdown.
I want to load state dropdown on selection of country dropdown.But i am unable to do this.
Please help to load state dropdown on selection of country dropdown.

Answer 1

Hey I got the answer
some change in ajax code and controller
$(document).ready(function () {
$("#Country").change(function () {
var url = "/ManageEmployee/GetStatesByCountry";
var countryID = $("#Country").val();
$.ajax({
url: url,
data: { id: countryID },
cache: false,
type: "POST",
success: function (data) {
var markup = "<option value='0'>Select City</option>";
for (var x = 0; x < data.length; x++) {
markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
}
$("#State").html(markup).show();
},
error: function (reponse) {
alert("error : " + reponse);
}
});
});
});
[HttpPost]
public JsonResult GetStatesByCountry(string id)
{
int ids = Convert.ToInt32(id);
var states = model.GetStateByCountry(ids);
SelectList obgcity = new SelectList(states, "StateId", "State", 0);
return Json(obgcity);
}