MVC（Razor）Filter DropDownList

Question

我是MVC和JavaScript的新手，我有一个关于DropDownList的问题。

我建立了一个“汽车租赁”程序，我有一个允许添加新车到库存的视图。

该视图包含2个下拉列表（见下文）：

 <div class="editor-field">
        @Html.DropDownList("ManufacturerId", string.Empty)
        @Html.ValidationMessageFor(model => model.ManufacturerId)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.ModelId)
    </div>
    <div class="editor-field">
        @Html.DropDownList("ModelId", string.Empty)
        @Html.ValidationMessageFor(model => model.ModelId)
    </div>

我希望当用户选择制造商（例如阿尔法罗密欧）时，“模型”列表框将仅显示“Alfa Mito”型号，而不是完整列表......

我的Controller函数使用ViewBag向视图发送模型列表，如下所示：

public ActionResult AddNewCar()
    {
        ViewBag.ManufacturerId = new SelectList(db.Manufacturers, "ManufacturerId", "ManufacturerName");
        ViewBag.ModelId = new SelectList(db.Models, "ModelId", "ModelName");

        ViewBag.BranchId = new SelectList(db.Branchs, "BranchId", "BranchName");

        return View();
    }

请指教。

谢谢，Almog

Answer 1

在下拉更改事件中从jquery调用下面的action方法。

 public List<carmodels> PopulateState(int manufacturerId)
        {
            var carmodelsObj = (from st in dc.Carmodels
                        where st.manufacturerId.Equals(manufacturerId)
                        select st).ToList();

            return (carmodelsObj);

        }

Answer 2

每次第一次下拉列表更改时（使用ModelId），您需要重新填充/填充jquery下拉列表。做以下事项：

• 从变更事件的第一个下拉列表中获取ManufactureId。并放置一个ajax电话重新填充你的第二个下拉列表。

  $("#ManufactureId").change(function() {
  
    var manufacturerId = manufacturer$('#ManufacturerId').val();
  
  
    $.ajax({url: "~/Car/GetCarsByManufacturer", success: function(result){
  
        //re populate your second dropdown here
        //hint: you may use response.id for value
    }});

  }）;
• 在控制器中创建一个基于所选的返回Car Models的函数。 （使用ajax在上一步中调用此函数）。

  public List<carmodels> GetCarsByManufacturer(int manufacturerId)
  {
      var carmodelsObj = (from st in dc.Carmodels
                  where st.manufacturerId.Equals(manufacturerId)
                  select st).ToList();
  
      return (carmodelsObj);
  
  }