级联下拉列表 MVC 3 C#

Question

我创建了两个下拉列表，我的目标是使它们级联，即第二个下拉列表依赖于第一个下拉列表。原因是我的数据库的布局如下：

****Car_iD      Car_Name            Car_drive** 
      1           Honda             2 wheel drive
      2           Acura             4wheel drive        
      3           Toyota            2 wheel drive
      4           Honda             4wheelDrive       

如您所见，我有两个相同的Car_Names，但Car_drive不同。因此，当用户单击第一个下拉列表时，他们将看到 Honda、Acura、Toyota......但如果他们选择 Honda，则第二个下拉列表将显示 2wheeldrive 和 4wheeldrive。

我的控制器如下：

 public ActionResult Home()
  {
  ViewData["Car_Name"] = new SelectList(_context.Cars.Select(a => a.Car_Name).Distinct());
   ViewData["Car_drive"] = new SelectList(_context.Cars.Select(a => a.Car_drive).Distinct());
  }

我的视图看起来像这样。

      Choose an Car
               <label for= "Car_Names"></label>
                <%= Html.DropDownList("Car_Name" )%>  

               <label for= "Application_Names"></label>
                <%= Html.DropDownList("Car_drive")%>    
                <input type = "submit" value ="Update" /> 
                 <% using(Html.BeginForm("Home", "Home")) { %>  
                <%}%>       

我已经阅读了很多教程，但没有一个真正接近我的问题。我在MVC Awesome这个项目上实现的很接近，但是我一直收到一个错误，称可选择项目缺少引用。希望能得到关于如何实现它的任何帮助。

更新 我已将此添加到我的控制器中。

    public ActionResult CarNameChange(string Car_Name)
    {
        var car_drive = from env in _context.Cars
                              where env.Car_Name == Car_Name
                              select car_drive;
        return Json(ViewData["Car_Drive"] = car_drive); 
    }

现在需要一些帮助来编写脚本，从控制器获取这些信息。

   <script type = "text/javascript">
   $('#Car_Names').change(function(){
      var selectedName = $(this).val();
       $getJson('@Url.Action("

- user990951

Answer 1

请查看以下链接：http://blogs.msdn.com/b/rickandy/archive/2012/01/09/cascasding-dropdownlist-in-asp-net-mvc.aspx 和 http://msprogrammer.serviciipeweb.ro/2011/02/13/asp-net-mvc-jquery-and-razor-cascading-dropdown-retrieving-partial-views-json-send-objects-handling-errors/。这两个项目都有演示版可供下载以检查代码。

另外，不要使用 ViewData 或 ViewBag，请改用包含 Cars 和 CarDrive 属性的 ViewModel，这样更清晰且易于添加新内容。

- Matija Grcic

---

感谢插件。同时，也很好地回顾了我的http://www.asp.net/mvc/tutorials/javascript/working-with-the-dropdownlist-box-and-jquery/using-the-dropdownlist-helper-with-aspnet-mvc -- 关于ViewModel v. ViewBag - ViewBag很好用且易于更新。毕竟它不是模型，而是关于模型的元数据。 - RickAndMSFT

Answer 2

使用一些客户端jQuery脚本，使您的“Car_Name”下拉菜单在某人更改选择时触发事件。

//Use your DOM identifier here. I don't know what it's called.
$('#car_name').change(function() {
    //Magic here.
});

现在您需要做的是，当触发此事件时，使用Car_Name的值发出AJAX请求。

让您的ActionMethod返回一个JsonResult。

然后在客户端捕获该信息，并解析数据以将选择选项插入到下拉式Car_Drive中。

这就是您需要做的，简单易懂。

- Only Bolivian Here

---

正如 plurby 所提到的，我的博客有一个完整的示例可供下载：http://blogs.msdn.com/b/rickandy/archive/2012/01/09/cascasding-dropdownlist-in-asp-net-mvc.aspx - RickAndMSFT