将选定的下拉列表值传递给控制器​​操作，然后根据值填充另一个下拉列表

Question

我正在尝试从列表中选择制造商，然后根据用户选择的制造商填充模型列表。

查看：

<div class="form-group">
        @Html.LabelFor(model => model.Manufacturer.ManufacturerName, "Model",
            htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-5">
            @Html.DropDownList("ManufacturerID", (List<SelectListItem>)ViewBag.Manufacturers,
                htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Manufacturer.ManufacturerName, "",
                new { @class = "text-danger", onchange = "PopulateModels()" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Model.ModelName, "Model",
            htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-5">
            @Html.DropDownList("ModelID", (List<SelectListItem>)ViewBag.Models,
                htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Model.ModelName, "",
                new { @class = "text-danger" })
        </div>
    </div>

    <script>
         function PopulateModels()
         {
              var url = '@Html.Raw(Url.Action("GetModelList", "FaultController", new { manufacturer="ManufacturerID" }))';
              window.location = url;
         }
    </script>

控制器：

public List<SelectListItem> GetModelList(Manufacturer manufacturer)
    {
        List<SelectListItem> modelList = new List<SelectListItem>();

        var models = db.Models.Where(m => m.ManufacturerID == manufacturer.ManufacturerID);

        foreach (Model model in models)
        {
            modelList.Add(new SelectListItem
            {
                Text = model.ModelName,
                Value = model.ModelID.ToString()
            });
        }

        var sortedModelList = (from model in modelList
                               orderby model.Text
                               select model).ToList();

        return sortedModelList;
    }

public ActionResult Create(...)
    {
        .
        .
        .

        ViewBag.Models = new List<SelectListItem>();
        ViewBag.Manufacturers = GetManufacturerList();
    }

As you can see, the ViewBag for Models is initially empty, when a manufacturer is selected I want this ViewBag to be updated with all of the models that hold that manufacturer.

我觉得我已经很接近了，但不知道下一步该做什么，朝着正确的方向前进会很棒。我也不确定到目前为止我所做的是否完全正确，因此如果有人能发现我忽略的任何内容或任何关于如何改进我的代码的建议，我将不胜感激。

我希望这是有道理的，任何帮助表示赞赏，在此先感谢。

更新代码：

查看：

<div class="form-group">
        @Html.LabelFor(model => model.Manufacturer.ManufacturerName, "Model",
            htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-5">
            @Html.DropDownList("ManufacturerID", (List<SelectListItem>)ViewBag.Manufacturers,
                htmlAttributes: new { @class = "form-control" , @id= "Manufacturers" })
            @Html.ValidationMessageFor(model => model.Manufacturer.ManufacturerName, "",
                new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Model.ModelName, "Model",
            htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-5">
            @Html.DropDownList("ModelID", (List<SelectListItem>)ViewBag.Models,
                htmlAttributes: new { @class = "form-control" , @id = "Models"})
            @Html.ValidationMessageFor(model => model.Model.ModelName, "",
                new { @class = "text-danger" })
        </div>
    </div>

    <script type="text/javascript">
         $(function(){
          $("#Manufacturers").change(function(){
             var v= $(this).val();
             $("#Models").empty();
             $.getJSON("@Url.Action("GetModels","Fault")?id="+v,function(data){
                 $.each(data,function(a,b){
                   $("#Models").append('<option value="'+b.Value+'">'+b.Text+'</option>');
                 });
             });
          });

        });
    </script>

控制器：

public ActionResult GetModels(int id)
    {
        var models = db.Models.Where(m => m.ManufacturerID == id)
                       .Select(x => new SelectListItem
                       {
                           Value = x.ModelID.ToString(),
                           Text = x.ModelName
                       }).ToList();
        return Json(models, JsonRequestBehavior.AllowGet);

    }

Answer 1

您当前的代码正在使浏览器导航到其他操作方法。但理想情况下，您需要使用 ajax 获取这些数据，并使用它为第二个下拉菜单构建 SELECT 选项。

所以为第一个 dropdiwn 设置一个更改事件处理程序。

$(function(){
  $("#ManufacturerID").change(function(){
     var v= $(this).val();
     $("#Models").empty();
     $.getJSON("@Url.Action("GetModels","YourControlleName")?id="+v,function(data){
         $.each(data,function(a,b){
           $("#Models").append('<option value="'+b.Value+'">'+b.Text+'</option>');
         });
     });
  }); 

});

现在您有一个GetModels 操作方法，它接受 Id 参数中的制造商 ID 并返回相应的型号。

public ActionResult GetModels(int id)
{
   var models = db.Models.Where(m => m.ManufacturerID == id)
                  .Select(x=>new SelectListItem { Value=x.Id.ToString(),
                                                  Text=x.Name}).ToList();
   return Json(models,JsonRequestBehavior.AllowGet);

}

Here 是一个可用的 dotnetfiddle，其中包含供您参考的虚拟数据。