使用 JSON 结果填充下拉列表 - 使用 MVC3、JQuery、Ajax、JSON 级联下拉列表

Question

我有一个使用 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 。

<script type="text/javascript">
    $(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"); }
                });
            }
        });
    });
</script> 

Answer 1

首先，在 jQuery 事件处理函数中， this指的是触发事件的元素，因此您可以用$(this)替换对$("select#CountryID")的额外调用。 尽管在可能的情况下，您应该直接访问元素属性，而不是使用 jQuery 函数，因此您可以简单地执行this.value而不是$(this).val()或$("select#CountryID").val() 。

然后，在您的 AJAX 调用success函数中，您需要创建一系列<option>元素。 这可以使用基本的jQuery()函数（或简称$()来完成。 这看起来像这样：

$.ajax({
    success: function(states) {
        // states is your JSON array
        var $select = $('#StateID');
        $.each(states, function(i, state) {
            $('<option>', {
                value: state.stateId
            }).html(state.StateName).appendTo($select);
        });
    }
});

这是一个jsFiddle 演示。

相关的 jQuery 文档：

• jQuery.each()
• jQuery()

Answer 2

在我的项目中，我是这样做的，它在下面

在我的控制器中

public JsonResult State(int countryId)
{               
    var stateList = CityRepository.GetList(countryId);
    return Json(stateList, JsonRequestBehavior.AllowGet);
}

在模型中

public IQueryable<Models.State> 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;
}

在视图中

<script type="text/javascript">
   function cascadingdropdown() {
       $("#stateID").empty();
       $("#stateID").append("<option value='0'>--Select State--</option>");
       var countryID = $('#countryID').val();
       var Url="@Url.Content("~/City/State")";
       $.ajax({
           url:Url,
           dataType: 'json',
           data: { countryId: countryID },
           success: function (data) {                
               $("#stateID").empty();
               $("#stateID").append("<option value='0'>--Select State--</option>");
               $.each(data, function (index, optiondata) {                  
                   $("#stateID").append("<option value='" + optiondata.ID + "'>" + optiondata.StateName + "</option>");
               });
           }
       });
   }     
</script>

我想这会帮助你......

Answer 3

第1步：

• 首先，我们需要一个模型类来定义存储数据的属性。

   public class ApplicationForm { public string Name { get; set; } public string State { get; set; } public string District { get; set; } }

  第2步：

• 现在，我们需要一个初始控制器，它将通过在 ViewBag.StateName 中打包状态列表来返回索引视图。

   public ActionResult Index() { List<SelectListItem> state = new List<SelectListItem>(); 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(); }

  在上面的控制器中，我们有一个包含附加到 ViewBag.StateName 的状态的列表。 我们可以使用 Linq 查询或其他东西从数据库中获取状态列表并将其打包到 ViewBag.StateName，让我们使用内存数据。

  第 3 步：

• 一旦我们有了控制器，我们就可以添加它的视图并开始创建一个 Razor 表单。

   @Html.ValidationSummary("Please correct the errors and try again.") @using (Html.BeginForm()) { <fieldset> <legend>DropDownList</legend> @Html.Label("Name") @Html.TextBox("Name") @Html.ValidationMessage("Name", "*") @Html.Label("State") @Html.DropDownList("State", ViewBag.StateName as SelectList, "Select a State", new { id = "State" }) @Html.ValidationMessage("State", "*") @Html.Label("District") <select id="District" name="District"></select> @Html.ValidationMessage("District", "*") <p> <input type="submit" value="Create" id="SubmitId" /> </p> </fieldset> }

  您可以看到我为每个输入控件（两个 DropDownList 和一个 TextBox）添加了适当的标签和验证字段，并在顶部添加了一个验证摘要。 请注意，我使用的是 HTML 而不是 Razor 助手，这是因为当我们使用 jQuery 进行 JSON 调用时，将返回预填充选项标签的 HTML 标记。 现在，让我们在上面的视图页面中添加 jQuery 代码。

  第四步：

  这是使用参数（选择的状态名称）对 DDL 命名控制器的 DistrictList 方法进行 JSON 调用的 jQuery 代码。 DistrictList 方法将返回 JSON 数据。 使用返回的 JSON 数据，我们正在构建标签 HTML 标记并将此 HTML 标记附加到 DOM 控件“District”。

   @Scripts.Render("~/bundles/jquery") <script type="text/jscript"> $(function () { $('#State').change(function () { $.getJSON('/DDL/DistrictList/' + $('#State').val(), function (data) { var items = '<option>Select a District</option>'; $.each(data, function (i, district) { items += "<option value='" + district.Value + "'>" + district.Text + "</option>"; }); $('#District').html(items); }); }); }); </script>

  请确保在标记之前使用 jQuery 库引用。

  第 5 步：

• 在上面的 jQuery 代码中，我们使用参数对名为控制器的 DistrictList 方法的 DDL 进行 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”）参数。 在该方法中，我在 linq 查询中使用 'Id' 参数来获取匹配区列表，从概念上讲，在区数据列表中应该有一个 state 字段。 另请注意，在 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 IQueryable<District> GetDistrict() { return new List<District> { 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 步：

  您可以在此处运行该应用程序，因为级联下拉列表现已准备就绪。 当用户单击提交按钮时，我将进行一些验证工作。 所以，我将添加另一个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 List<SelectListItem> state = new List<SelectListItem>(); 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"); }

Answer 4

在 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 += "<option value='" + val.stateId + "'>" + val.StateName + "</option>";
    });

    $("select#StateID").empty().html(items);
  },
  error: function (xhr) {
    alert("Something seems Wrong");
  }
});

编辑 1

success: function (data) {

  $.each(data, function (i, val) {
    $('select#StateID').append(
    $("<option></option>")
      .attr("value", val.stateId)
      .text(val.StateName));
  });
},

Answer 5

<script type="text/javascript">
   $(document).ready(function () {
       $("#ddlStateId").change(function () {
           var url = '@Url.Content("~/")' + "Home/Cities_SelectedState";
           var ddlsource = "#ddlStateId";
           var ddltarget = "#ddlCityId";
           $.getJSON(url, { Sel_StateName: $(ddlsource).val() }, function (data) {
               $(ddltarget).empty();
               $.each(data, function (index, optionData) {
                   $(ddltarget).append("<option value='" + optionData.Text + "'>" + optionData.Value + "</option>");
               });
   
           });
       });
   });
</script>

Answer 6

我知道这篇文章已经有一年了，但我找到了它，你也一样。 我使用以下解决方案，效果很好。 强类型无需编写一行 Javascript。

mvc4ajaxdropdownlist.codeplex.com

您可以通过 Visual Studio 将其下载为 NuGet 包。

Answer 7

您应该考虑使用一些客户端视图引擎，将模型（在您的情况下是从 API 返回的 JSON）绑定到模板（用于 SELECT 的 HTML 代码）。 对于这个用例，Angular 和 React 可能会很复杂，但是JQuery 视图引擎使您能够使用类似 MVC 的方法轻松地将 JSON 模型加载到模板中：

<script type="text/javascript">
    $(function () {
        $("select#CountryID").change(function (evt) {

            if ($("select#CountryID").val() != "-1") {

                $.ajax({
                    url: "/Home/GetStates",
                    type: 'POST',
                    data: { CountryID: $("select#CountryID").val() },
                    success: function (response) {
                             $("#stateID").empty();
                             $("#stateID").view(response);
                    },
                    error: function (xhr) { alert("Something seems Wrong"); }
                });
            }
        });
    });
</script> 

在 JavaScript 中生成原始 HTML 要干净得多。 在此处查看详细信息： https : //jocapc.github.io/jquery-view-engine/docs/ajax-dropdown

Answer 8

试试这个：

public JsonResult getdist(int stateid)
{
    var res = objdal.getddl(7, stateid).Select(m => new SelectListItem { Text = m.Name, Value = m.Id.ToString() });
    return Json(res,JsonRequestBehavior.AllowGet);
}