使用JSON结果填充下拉列表 – 使用MVC3，JQuery，Ajax，JSON级联DropDown
我有一个使用mvc的级联溺水。 如果您在第一个下拉列表中选择一个国家/地区，则应该相应地填充第二个国家/地区的州。
目前，一切似乎都很好，我得到Json的回应（看到它使用F12工具），它看起来像[{ "stateId":"01", "StateName": "arizona" } , { "stateId" : "02", "StateName":"California" }, etc..] ..
我想知道如何用这些数据填充我的second-dropdown 。 我的第二个下拉列表的ID是“ StateID ”。 任何帮助将不胜感激。
以下是用于从服务器生成JSON响应的代码：
[HttpPost] public JsonResult GetStates(string CountryID) { using (mdb) { var statesResults = from q in mdb.GetStates(CountryID) select new Models.StatesDTO { StateID = q.StateID, StateName = q.StateName }; locations.statesList = stateResults.ToList(); } JsonResult result = new JsonResult(); result.Data = locations.statesList; return result; }
下面是客户端HTML，我的剃刀代码和我的脚本。 我想在“ success ：”中编写一些代码，以便使用JSON数据填充States dropdown 。
$(function () { $("select#CountryID").change(function (evt) { if ($("select#CountryID").val() != "-1") { $.ajax({ url: "/Home/GetStates", type: 'POST', data: { CountryID: $("select#CountryID").val() }, success: function () { alert("Data retrieval successful"); }, error: function (xhr) { alert("Something seems Wrong"); } }); } }); });
首先，在jQuery事件处理函数中， this指的是触发事件的元素，因此您可以用$(this)替换$("select#CountryID")的其他调用。 虽然在可能的情况下你应该直接访问元素属性，而不是使用jQuery函数，所以你可以简单地执行this.value而不是$(this).val()或$("select#CountryID").val() 。
然后，在AJAX调用success函数中，您需要创建一系列元素。 这可以使用基本的jQuery()函数（或$()为$()来完成。 这看起来像这样：
$.ajax({ success: function(states) { // states is your JSON array var $select = $('#StateID'); $.each(states, function(i, state) { $('
这是一个jsFiddle演示 。
相关的jQuery文档：
-
jQuery.each() -
jQuery()
在我的项目中，我正在这样做，它在下面
我的控制员
public JsonResult State(int countryId) { var stateList = CityRepository.GetList(countryId); return Json(stateList, JsonRequestBehavior.AllowGet); }
在模型中
public IQueryable GetList(int CountryID) { var statelist = db.States.Where(x => x.CountryID == CountryID).ToList().Select(item => new State { ID = item.ID, StateName = item.StateName }).AsQueryable(); return statelist; }
在视野中
我想这会对你有所帮助……
步骤1：
-
首先，我们需要一个定义存储数据属性的模型类。
public class ApplicationForm { public string Name { get; set; } public string State { get; set; } public string District { get; set; } }第2步：
-
现在，我们需要一个初始控制器，它将通过打包ViewBag.StateName中的状态列表来返回Index视图。
public ActionResult Index() { Liststate = new List (); state.Add(new SelectListItem { Text = "Bihar", Value = "Bihar" }); state.Add(new SelectListItem { Text = "Jharkhand", Value = "Jharkhand" }); ViewBag.StateName = new SelectList(state, "Value", "Text"); return View(); } 在上面的控制器中，我们有一个List，其中包含附加到ViewBag.StateName的状态。 我们可以使用Linq查询或其他东西从数据库获取状态列表并将其打包到ViewBag.StateName，让我们使用内存数据。
第3步：
-
一旦我们有了控制器，我们就可以添加它的视图并开始创建一个Razor表单。
@Html.ValidationSummary("Please correct the errors and try again.") @using (Html.BeginForm()) { }您可以看到我在每个输入控件（两个DropDownList和一个TextBox）中添加了正确的标签和validation字段，并在顶部添加了validation总结。 注意，我使用的是HTML而不是Razor helper这是因为当我们使用jQuery进行JSON调用时，将返回预先填充的选项标记的HTML标记。 现在，让我们在上面的视图页面中添加jQuery代码。
第4步：
下面是jQuery代码，使用参数（选择状态名称）对DDL命名控制器的DistrictList方法进行JSON调用。 DistrictList方法将返回JSON数据。 使用返回的JSON数据，我们构建标记HTML标记并将此HTML标记附加到DOM控件的“区域”。
@Scripts.Render("~/bundles/jquery")请确保您在标记之前使用jQuery库引用。
第5步：
-
在上面的jQuery代码中，我们使用参数对DDL命名控制器的DistrictList方法进行JSON调用。 这是将返回JSON数据的DistrictList方法代码。
public JsonResult DistrictList(string Id) { var district = from s in District.GetDistrict() where s.StateName == Id select s; return Json(new SelectList(district.ToArray(), "StateName", "DistrictName"), JsonRequestBehavior.AllowGet); }请注意，DistrictList方法将接受jQuery JSON调用发送的字符串类型的’Id’（它应该是’Id’always）参数。 在方法内部，我在linq查询中使用’Id’参数来获取匹配区域的列表，并且在概念上，在区域数据列表中应该有一个状态字段。 另请注意，在linq查询中我正在调用方法调用District.GetDistrict（）。
第6步：
在上面的District.GetDistrict（）方法调用中，District是一个具有GetDistrict（）方法的模型。 我在linq查询中使用GetDistrict（）方法，因此此方法应为IQueryable类型。 这是型号代码。
public class District { public string StateName { get; set; } public string DistrictName { get; set; } public static IQueryableGetDistrict() { return new List { new District { StateName = "Bihar", DistrictName = "Motihari" }, new District { StateName = "Bihar", DistrictName = "Muzaffarpur" }, new District { StateName = "Bihar", DistrictName = "Patna" }, new District { StateName = "Jharkhand", DistrictName = "Bokaro" }, new District { StateName = "Jharkhand", DistrictName = "Ranchi" }, }.AsQueryable(); } } 第7步：
您可以在此处运行应用程序，因为级联下拉列表现在已准备就绪。 当用户单击提交按钮时，我将进行一些validation工作。 所以，我将添加POST版本的另一个动作结果。
[HttpPost] public ActionResult Index(ApplicationForm formdata) { if (formdata.Name == null) { ModelState.AddModelError("Name", "Name is required field."); } if (formdata.State == null) { ModelState.AddModelError("State", "State is required field."); } if (formdata.District == null) { ModelState.AddModelError("District", "District is required field."); } if (!ModelState.IsValid) { //Populate the list again Liststate = new List (); state.Add(new SelectListItem { Text = "Bihar", Value = "Bihar" }); state.Add(new SelectListItem { Text = "Jharkhand", Value = "Jharkhand" }); ViewBag.StateName = new SelectList(state, "Value", "Text"); return View("Index"); } //TODO: Database Insertion return RedirectToAction("Index", "Home"); }
在ajax调用中尝试这个：
$.ajax({ url: "/Home/GetStates", type: 'POST', data: { CountryID: $("select#CountryID").val() }, success: function (data) { alert("Data retrieval successful"); var items = ""; $.each(data, function (i, val) { items += ""; }); $("select#StateID").empty().html(items); }, error: function (xhr) { alert("Something seems Wrong"); } });
编辑1
success: function (data) { $.each(data, function (i, val) { $('select#StateID').append( $("") .attr("value", val.stateId) .text(val.StateName)); }); },
我知道这篇文章已经有一年了，但我找到了，所以你也可以。 我使用以下解决方案，它工作得很好。 强类型而无需编写单行Javascript。
mvc4ajaxdropdownlist.codeplex.com
您可以通过Visual Studio下载它作为NuGet包。
您应该考虑使用一些客户端视图引擎将模型（在您的情况下从API返回的JSON）绑定到模板（SELECT的HTML代码）。 对于此用例，Angular和React可能很复杂，但JQuery视图引擎使您可以使用类似MVC的方法轻松地将JSON模型加载到模板中：
在JavaScript中生成原始HTML更加清晰。 请在此处查看详细信息： https ： //jocapc.github.io/jquery-view-engine/docs/ajax-dropdown