Question

我有一个使用mvc的级联溺水。如果您在第一个下拉列表中选择一个国家/地区，则应该相应地填充第二个国家/地区的州。

目前，一切似乎都很好，我得到了Json的响应（使用F12工具看到它），它看起来像[{ "stateId":"01", "StateName": "arizona" } , { "stateId" : "02", "StateName":"California" }, etc..] ..

我想知道如何使用这些数据填充second-dropdown。我的第二个下拉列表是“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数据填充状态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内部引用触发事件的元素，因此您可以将$("select#CountryID")的其他调用替换为$(this)。虽然在可能的情况下，您应该直接访问元素属性，而不是使用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 demo。

相关的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();
}
```
在上面的控制器中，我们有一个List，其中包含附加到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 helper，这是因为当我们使用jQuery进行JSON调用时，将返回预先填充的选项标记的HTML标记。现在，让我们在上面的视图页面中添加jQuery代码。

第4步：

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

  @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代码中，我们使用参数对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 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可能很复杂，但here.使您可以使用类似MVC的方法轻松地将JSON模型加载到模板中：

{{1}}

在JavaScript中生成原始HTML更加清晰。详情请见JQuery view engine

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);
}

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

8 个答案: