2012-04-04 225 views
4

我创建了两个dropdownlist,我试图做的是让它们级联。这样第二个依赖于第一个。究其原因是因为我的数据库奠定了这样级联下拉列表MVC 3 C#

****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是不同的。所以当用户点击第一个下拉列表时,他们会看到本田,讴歌,丰田......但如果他们选择本田,第二个下拉框会说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的东西,但我不断收到错误,说SelectableItem缺少一个引用。任何帮助实现这个目标都很好。

更新 我已经加入这个我控制器

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(" 

回答

3

检查:http://blogs.msdn.com/b/rickandy/archive/2012/01/09/cascasding-dropdownlist-in-asp-net-mvc.aspxhttp://msprogrammer.serviciipeweb.ro/2011/02/13/asp-net-mvc-jquery-and-razor-cascading-dropdown-retrieving-partial-views-json-send-objects-handling-errors/,你将不需要任何其他东西。这两个项目都有一个下载检查代码的演示。

问候

编辑:您的更新后

不要使用ViewData的或ViewBag。使包含汽车和CarDrive的属性的ViewModel更清晰,更容易添加新内容。

+0

感谢您的插件。这也很好,也审查我的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 2012-04-04 21:57:08

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中。

这就是你需要做的,分解成小块,很容易遵循。

+0

正如plurby所说,我的博客有一个完整的示例,您可以下载:http://blogs.msdn.com/b/rickandy/archive/2012/01/09/cascasding-dropdownlist-in-asp-net- mvc.aspx – RickAndMSFT 2012-04-04 21:59:23