14

我有一个使用 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：”中编写一些代码，以便dropdown使用 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 () { alert("Data retrieval successful"); },
                    error: function (xhr) { alert("Something seems Wrong"); }
                });
            }
        });
    });
</script>
4

8 回答 8

18

首先，在 jQuery 事件处理函数内部this指的是触发事件的元素，因此您可以将额外的调用替换$("select#CountryID")为$(this). 尽管在可能的情况下您应该直接访问元素属性，而不是使用 jQuery 函数，所以您可以简单地使用this.value而不是$(this).val()or $("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 文档：

于 2013-01-15T13:56:04.563 回答
13

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

iN MY 控制器

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>

我想这会对你有所帮助......

于 2013-01-15T13:52:08.637 回答
4

第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 代码。

    第4步：

    这是 jQuery 代码使用参数（选择的状态名称）对名为控制器的 DistrictList 方法的 DDL 进行 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 代码中，我们使用参数对名为控制器的 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”参数来获取匹配地区的列表，从概念上讲，在地区数据列表中应该有一个状态字段。另请注意，在 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");
}
于 2014-03-14T10:08:30.560 回答
1

在 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));
  });
},
于 2013-01-15T13:55:47.450 回答
0 
<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>
于 2014-03-14T10:04:35.703 回答
0

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

mvc4ajaxdropdownlist.codeplex.com

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

于 2014-08-29T08:36:40.337 回答
0

您应该考虑使用一些将模型（在您的情况下是从 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

于 2017-12-09T11:13:42.680 回答
0

试试这个：

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);
}
于 2018-12-23T09:54:57.580 回答