級聯下拉列表 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_Name，但 Car_drive 不同。 因此，當用戶單擊第一個下拉列表時，他們將看到 Honda、Acura、Toyota...但如果他們是 select Honda，則第二個下拉框將顯示 2wheeldrive 和 4wheeldrive。

我的 Controller 看起來像這樣：

 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 的東西，但我不斷收到錯誤消息，說 SelectableItem 缺少引用。 任何有助於實現這一點的幫助都會很棒。

更新我已將此添加到我的 controller

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

現在需要一些幫助來編寫腳本以從 controller 獲取此信息。

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

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，它更干凈，也更容易添加新內容。

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 的Car_Name請求。

讓您的 ActionMethod 返回JsonResult 。

然后您在客戶端捕獲該信息，並解析數據以將 select 選項插入到您的下拉Car_Drive中。

這就是您需要做的，分解成易於遵循的小塊。