Cascading Dropdown lists MVC 3 C#

Question

I have created two dropdownlist, what i am trying to do is make them cascade. Such that the second one is dependent on the first. The reason is because my database is laid out like this

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

As you can see I have two Car_Names that are the same but the Car_drive is different. So when the user clicks on the first dropdown list they will see Honda, Acura, Toyota...but if they select Honda the second dropdown box would say 2wheeldrive and 4wheeldrive.

My Controller looks likes this:

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

My View looks like this

      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")) { %>  
                <%}%>       

I have read through so many tutorial but nothing really comes close. I got close on the MVC Awesome stuff but I kept getting errors saying SelectableItem is missing a references. Any help on getting this implemented would be great.

update I have added this to my 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); 
    }

Now need some help writing the script to get this information from the controller.

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

Answer 1

Check: http://blogs.msdn.com/b/rickandy/archive/2012/01/09/cascasding-dropdownlist-in-asp.net-mvc.aspx and http://msprogrammer.serviciipeweb.ro/2011/02/13/asp.net-mvc-jquery-and-razor-cascading-dropdown-retrieving-partial-views-json-send-objects-handling-errors/ and you won't need anything else. Both projects have a demo to download to inspect code.

Regards

EDIT: After your update

Don't use ViewData or ViewBag. Make a ViewModel containing properties for Cars and CarDrive it's cleaner and easier to add something new.

Answer 2

Using some client side jQuery scripting, have your Car_Name dropdown fire off an event whenever someone changes the selection.

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

Now what you want to do is, when this event is fired, fire off an AJAX request with the value of Car_Name .

Have your ActionMethod return a JsonResult .

You then catch that information on the client side, and parse the data to insert select options into your dropdown Car_Drive .

That's what you need to do, broken down in small pieces that is simple to follow.