下拉列表级联使用MVC3 &LinqSql
本文关键字:LinqSql MVC3 级联 下拉列表 | 更新日期: 2023-09-27 18:04:13
我有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).
我想创建一个显示产品的下拉菜单,当我选择一个产品时,它会使设计下拉菜单启用,否则它将保持禁用状态。还有一个棘手的部分,我无法解决,我需要一个很好的解释,在这里创建第三个下拉菜单,它将被禁用,直到一个设计被选中。
它们中的每一个都将填充一个绑定到它们的下拉列表。它的像;产品将支持和填充设计,设计将启用并填充模型。我可以用2个下拉菜单,但当它涉及到3个下拉菜单时,我真的卡住了(大脑冻结)…
我已经检查了其他问题,但我自己找不到答案。正如我所说的,我使用LinqSql,我需要一个关于3级联下拉列表的解决方案,用于这种类型的数据到达。
感谢你所做的一切!如果你能解释模型-视图-控制器部分和参数,以及为什么要使用它们,那就太棒了。
我会这样处理这个问题:
首先,在控制器中,我们将设置以下方法: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);
}
}
我在这里打开了"get";如果您的数据包含敏感信息-用户名/电子邮件地址,其他专有或受法律保护的数据等-您可以将其更改为只允许"post",并相应地修改您的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(
$('<option></option>').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(
$('<option></option>').val(c.id).html(c.name)
);
});
});
}
最后,按如下方式定义所有三个下拉框:
@Html.DropDownList("Product", productSelectList, new { onchange = "LoadDesigns()" })
@Html.DropDownList("Design", null, new { onchange = "LoadModels()" })
@Html.DropDownList("Model")
不要忘记,HTML helper实际上只是生成底层HTML的快捷方式,在Razor中,你经常直接使用HTML,而不是使用helper。所以你可以很容易地把这些写成:
<select id="Product" onchange="LoadDesigns()">
@foreach (var prod in products) {
<option value="@prod.id">@prod.name</option>
}
</select>
<select id="Design" onchange="LoadModels()"></select>
<select id="Model"></select>
忘记设置我完成的工作了。人们可能想看看这是怎么发生的…这是我的:
View + 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('<option value="' + c.Value + '">' + c.Text + '</option>');
})
$("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('<option value="' + c.Value + '">' + c.Text + '</option>');
})
$("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('<option value="' + c.Value + '">' + c.Text + '</option>');
})
$("select#Model").removeAttr('disabled');
$("select#Model option:first").attr('selected', 'selected');
})
}
});
视图@using (Html.BeginForm("Index", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<table>
<tr>
<td style="background-color:#e8eef4;" rowspan="3">
</td>
<td style="width:190px; background-color:#e8eef4;">
@Html.DropDownList("Product", (SelectList)ViewData["ProductList"], "Please Select Product", new { style = "width:190px; padding:4px; margin:4px;" })
</td>
<td rowspan="3" style="width:400;">
</td>
<td style="background-color:#e8eef4;">
</td>
<td style="background-color:#e8eef4;" rowspan="3">
</td>
</tr>
<tr>
<td style="background-color:#e8eef4;">
<select id="Design" style="width:190px; padding:4px; margin:4px;">
<option label="Please Select Design" selected="selected"></option>
</select>
</td>
<td style="background-color:#e8eef4;">
</td>
</tr>
<tr>
<td style="background-color:#e8eef4;">
<select id="Model" style=" width:190px; padding:4px; margin:4px;">
<option label="Please Select Model"></option>
</select>
</td>
<td style="background-color:#e8eef4;">
</td>
</tr>
</table>
}
只是因为我正在使用linqtosql,我懒得做一个存储库。这是我的CONTROLLER
public class AdminController : Controller
{
public linqVipDataContext db = new linqVipDataContext();
//
// GET: /Admin/
public ActionResult Index()
{
IEnumerable<SelectListItem> 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<SelectListItem> 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<SelectListItem> 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参数分开来创建一个selectlist选项。所以我必须这样返回我的值。
我张贴了这个,因为我在你的代码中发现了一些故障,ty再次向我展示了这个解决方案,它给了我这个想法,并允许我解决所有问题,所以这是完全工作的代码。泰了。希望对大家有帮助。