我想在ASP.NET中使用MVC 4剃刀级联多个Dropdown列表

Question

在这个MVC应用程序中，我创建了级联下拉列表，即它将首先填充国家/地区列表，并在选择国家/地区后调用jquery的onchange事件，它将从控制器获取更多状态，这些状态进一步通过edmx实体模型从数据库中获取这些数据。使用ajax请求来调用JSON方法。选择状态后，新的下拉列表将被激活以选择城市。每当我从下拉列表中选择国家时，都会弹出一个警告框，并指出状态检索失败。[object] [object]我没有在表之间创建关系，因为有必要使用外键

位置控制器：-

 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcApplication3.Controllers { public class LocationController : Controller { // // GET: /Location/ public ActionResult Index() { TestDBEntities db = new TestDBEntities(); ViewBag.Country = new SelectList(db.tblCountries, "CountryID", "CountryName"); return View(); } public JsonResult GetState(string id) { List<SelectListItem> states = new List<SelectListItem>(); 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<tblState> Getstatevalue(int CountryId) { TestDBEntities db = new TestDBEntities(); return db.tblStates.Where(m => m.CountryID == CountryId).ToList(); } public JsonResult GetCity(string id) { List<SelectListItem> cities = new List<SelectListItem>(); 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); } public IList<tblCity> Getcityvalue(int StateId) { TestDBEntities db = new TestDBEntities(); return db.tblCities.Where(m => m.StateID == StateId).ToList(); } } } 

Index.cshtml视图

 @{ ViewBag.Title = "Index"; } <h2>Index</h2> @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> } 

JavaScript代码：

 <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> 

当我在其中选择一个国家/地区时，没有州会被加载或填充到州/省的下拉列表中。