3下拉列表使用MVC3和LinqSql进行级联

我有3个下拉列表我想用级联制作3个下拉列表。 我正在使用LinqSql数据库..

我有3个表Product（id，name），Design（id，master_id，name），Model（id，design_id，name）master_id绑定到Product（id），design_id绑定到Design（id）..

我想创建一个下拉列表，它将显示产品，而当我选择一个产品时，它将使设计下拉菜单启用，否则它将保持禁用..这里是我无法解决的棘手部分，我需要在这里创建第3个很好的解释在选择设计之前，通常会禁用下拉列表。

他们每个人都会填充一个与他们绑定的下拉列表。它就像; 产品将启用和填充设计，设计将启用和填充模型。 我可以通过2次下拉来做到这一点但是当涉及到3次下拉时我非常严重地陷入困境（大脑冻结）

我已经检查了其他问题无法为我自己找到任何解决方案。 正如我所说，即时通讯使用LinqSql我需要一个关于此类数据到达的3级联下拉列表的解决方案。

非常感谢你能做的一切！ 如果你可以解释模型 – 视图 – 控制器局部和参数以及你使用它们的原因那将是非常棒的。 我喜欢这个MVC3的初学者。

Answer 1

我会解决这样的问题：

首先，在控制器中，我们将设置以下方法：

public JsonResult GetDesignsForProduct(int productId) { // Instantiate our context and do whatever goo we need to select the objects we want using (MyDatabaseContext ctx = new MyDatabaseContext()) { return Json(ctx.Designs.Where(d => d.master_id == productId).ToList(), JsonRequestBehavior.AllowGet); } } public JsonResult GetModelsForDesign(int designId) { // Instantiate our context and do whatever goo we need to select the objects we want using (MyDatabaseContext ctx = new MyDatabaseContext()) { return Json(ctx.Models.Where(d => d.design_id == designId).ToList(), JsonRequestBehavior.AllowGet); } } 

我在这里打开了“得到”; 如果您的数据包含敏感信息 – 用户名/电子邮件地址，其他专有或受法律保护的数据等 – 您可以将其更改为仅允许“发布”，并相应地修改您的Javascript。 请参阅Phil Haack的文章 。

此外，如果您希望此数据经常更改，这些方法将根据应用程序的缓存设置默认缓存它。 您可以在方法上添加OutputCache属性以更改此行为。

然后，在视图中你将有一些AJAX管道，如下所示：

 function LoadDesigns() { // Get the currently-selected value in our Product dropdown var prod = $("#Product").val(); // Call our controller method and process the list of Design objects $.getJSON('@Url.Content("~/ControllerName/GetDesignsForProduct")', { productId: prod }, function (designs) { $("#Design").empty(); $.each(designs, function (i, c) { $("#Design").append( $('').val(c.id).html(c.name) ); }); }); } function LoadModels() { // Get the currently-selected value in our Design dropdown var des = $("#Design").val(); // Call our controller method and process the list of Model objects $.getJSON('@Url.Content("~/ControllerName/GetModelsForDesign")', { designId: des }, function (models) { $("#Model").empty(); $.each(models, function (i, c) { $("#Model").append( $('').val(c.id).html(c.name) ); }); }); } 

最后，定义所有三个下拉列表如下：

 @Html.DropDownList("Product", productSelectList, new { onchange = "LoadDesigns()" }) @Html.DropDownList("Design", null, new { onchange = "LoadModels()" }) @Html.DropDownList("Model") 

不要忘记HTML帮助程序实际上只是生成底层HTML的快捷方式，而在Razor中，您经常直接使用HTML而不是弄乱帮助程序。 因此，您可以轻松地将它们写为：

  @foreach (var prod in products) { @prod.name }    

Answer 2

忘了设置我完成的工作..人们可能想看看它是怎么发生的..这是我的：

查看+ Jquery

 $(function () { $("select#Design").attr('disabled', 'true'); $("select#Model").attr('disabled', 'true'); $("select#Product").click(function () { var prod = $("select#Product option:selected").val(); if (prod == "" || prod == 0) { $("select#Design").attr('disabled', 'true'); $("select#Model").attr('disabled', 'true'); } else { $.getJSON('@Url.Content("~/Admin/GetDesigns/")', { productId: prod }, function (data) { $("select#Design").empty(); $("select#Model").empty(); $.each(data, function (i, c) { $('select#Design').append('' + c.Text + ''); }) $("select#Design").removeAttr('disabled'); $("select#Design option:first").attr('selected', 'selected'); var des = $("select#Design option:selected").val(); if (des == "" || des == 0) { $("select#Model").attr('disabled', 'true'); } else { $.getJSON('@Url.Content("~/Admin/GetModels/")', { designId: des }, function (data) { $("select#Model").empty(); $.each(data, function (i, c) { $('select#Model').append('' + c.Text + ''); }) $("select#Model").removeAttr('disabled'); $("select#Model option:first").attr('selected', 'selected'); }) } }) } }) }) 

我之所以使用Jquery来填充所有下拉菜单并选择第一个元素作为默认选择！ 当我从第一个下拉列表中选择一个元素时，另外两个下拉列表开始填充自己并选择它们的第一个元素作为默认选择。相同的代码可用于其他下拉列表单击函数，如下所示：

  $("select#Design").click(function () { var des = $("select#Design option:selected").val(); if (des == "" || des == 0) { $("select#Model").attr('disabled', 'true'); } else { $.getJSON('@Url.Content("~/Admin/GetModels/")', { designId: des }, function (data) { $("select#Model").empty(); $.each(data, function (i, c) { $('select#Model').append('' + c.Text + ''); }) $("select#Model").removeAttr('disabled'); $("select#Model option:first").attr('selected', 'selected'); }) } }); 

视图

 @using (Html.BeginForm("Index", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" })) { 
 
 
 
 
 @Html.DropDownList("Product", (SelectList)ViewData["ProductList"], "Please Select Product", new { style = "width:190px; padding:4px; margin:4px;" }) 
 
 
 
 
 
 
 
 
 
    
 
 
 
 
 
    
 
 
 
 
 } 

只是因为我使用linqtosql而且我懒得制作存储库..这是我的控制器

 public class AdminController : Controller { public linqVipDataContext db = new linqVipDataContext(); // // GET: /Admin/ public ActionResult Index() { IEnumerable ProductItems = db.Products.AsEnumerable().Select(c => new SelectListItem() { Text = c.name, Value = c.id.ToString(), Selected = true, }); SelectList prod = new SelectList(ProductItems, "Value", "Text"); ViewBag.ProductList = prod; return View(); } // //Fill the Design List.. public JsonResult GetDesigns(int productId) { /*var data = dbs.Designs.Where(d => d.master_id == productId).ToList();*/ IEnumerable DesignItems = db.Designs.Where(c => c.master_id == productId).AsEnumerable().Select(c => new SelectListItem() { Text = c.name, Value = c.id.ToString() }); SelectList des = new SelectList(DesignItems, "Value", "Text"); return Json(des, JsonRequestBehavior.AllowGet); } // //Fill the Model List.. public JsonResult GetModels(int designId) { /*This code down here! Doesnt work and says it's type is unknown*/ /*var data = dbs.Models.Where(d => d.design_id == designId).ToList();*/ /*For that reason im using this code*/ IEnumerable ModelItems = db.Models.Where(d => d.design_id == designId).AsEnumerable().Select(c => new SelectListItem() { Text = c.name, Value = c.id.ToString() }); SelectList mods= new SelectList(ModelItems, "Value", "Text"); return Json(mods, JsonRequestBehavior.AllowGet); } 

Json需要Value和Text 2 paramrated来创建一个selectlist选项..所以我必须以这种方式返回我的值..

我发布了这个原因我发现你的代码有一些故障，ty再次向我展示这个解决方案它给了我这个想法并允许我解决所有问题所以这是完全正常的代码.. Ty再次。 希望它有用。