ASP.NET MVC级联下拉菜单 [英] ASP.NET MVC cascading dropdown
问题描述
我的数据库中有三个表，如下所示:
I have three tables in my database as follows:
University
id Name
1 A
2 B
Faculty
id id_uni name
1 1 AA
2 1 AA
cafedry
id id_uni id_faculty name
1 1 1 cc
我想创建一个级联下拉菜单，该菜单使我可以先选择一所大学，然后再选择一个学院，然后再选择一个Cafedry.到目前为止，下面的代码是我尝试过的.
I would like to create a cascading dropdown which will allow me to first select a University then a Faculty followed by a Cafedry. Below code is what i have tried so far.
public ActionResult Create()
{
ViewBag.fak_kod = new SelectList(db.Fakulteler, "id", "adi");
ViewBag.unikod = new SelectList(db.Universitetler, "id", "adi");
return View();
}
// POST: kafedras/Create
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "id,unikod,fak_kod,adi")] kafedra kafedra)
{
if (ModelState.IsValid)
{
db.kafedra.Add(kafedra);
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.fak_kod = new SelectList(db.Fakulteler , "id", "adi", kafedra.fak_kod);
ViewBag.unikod = new SelectList(db.Universitetler, "id", "adi", kafedra.unikod);
return View(kafedra);
}
和此cshtml
<div class="form-horizontal">
<h4>kafedra</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.unikod, "unikod", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("unikod", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.unikod, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.fak_kod, "fak_kod", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("fak_kod", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.fak_kod, "", new { @class = "text-danger" })
</div>
</div>
如何更新此代码以使用三个表创建级联下拉列表?
How can update this code to create a cascading dropdown with the three tables?
推荐答案
首先，创建一个视图模型，该模型具有用于渲染选项和存储所选项目值的属性.
To start with, create a view model which has properties to render the options and store the selected item value.
public class CreateVm
{
[Required]
public int SelectedUniversity { set;get;}
[Required]
public int SelectedFaculty { set;get;}
public List<SelectListItem> Universities { set;get;}
public List<SelectListItem> Faculties { set;get;}
public CreateVm()
{
this.Faculties = new List<SelectListItem>();
this.Universities = new List<SelectListItem>();
}
}
现在，在GET操作中，创建一个对象，加载Universities属性并将该对象发送到视图
Now in your GET action, create an object of this, load the Universities property and send the object to the view
public AcitonResult Create()
{
var vm=new CreateVm();
vm.Universities= GetUniversities();
return View(vm);
}
private List<SelectListItem> GetUniversities()
{
return db.Universitetler
.Select(x=>new SelectListItem { Value = x.Id,
Text = x.Name)
.ToList();
}
现在在您的视图中，该视图已严格键入我们的CreateVm视图模型.我们将使用DropDownListFor辅助方法来渲染下拉列表
Now in your View, which is strongly typed to our CreateVm view model. we will use the DropDownListFor helper method to render the drop-downs
@model CreateVm
@using (Html.BeginForm("Create", "Home"))
{
@Html.DropDownListFor(a=>a.SelectedUniversity,Model.Universities,"Select one")
@Html.DropDownListFor(a => a.SelectedFaculty , Model.Faculties, "Select one",
new { data_url = Url.Action("GetFaculties") })
<input type="Submit" />
}
这将呈现2个下拉列表，其中一个带有University选项，而第二个则为空(因为我们没有将任何内容加载到Faculties属性中).现在我们将有一些javascript(我们在这里使用jquery来进行简单的DOM操作)，它将侦听第一个下拉列表(大学)的change事件，读取所选值并对GetFaculties方法进行ajax调用，传递选定的大学选项值.
This will render 2 dropdowns, one with University options and the second one will be empty (because we did not load anything to the Faculties property). Now we will have some javascript(we are using jquery here for easy DOM manipulation) which will listen to the change event of the first drop-down(Universities) ,read the selected value and make an ajax call to the GetFaculties method and passing the selected university option value.
您可以看到，我为第二个下拉菜单设置了html5数据属性，其中我将相对URL存储到GetFaculties方法.因此，在我的JavaScript中，我可以简单地读取该数据属性值并调用该url以获取数据.
You can see that , i set a html5 data attribute for the second dropdown where i am storing the relative url to the GetFaculties method. So in my javascript, i can simply read this data attribute value and make a call to that url to get the data.
$(function () {
$("#SelectedUniversity").change(function () {
var v = $(this).val();
var url = $("#SelectedFaculty").data("url") + '?u=' + v;
var $fac= $("#SelectedFaculty");
$.getJSON(url, function (data) {
$fac.empty();
$.each(data, function (i, item) {
$fac.append($("<option>").text(item.Text).val(item.Value));
});
});
});
});
现在，让我们添加一个GetFaculties动作方法，该方法接受大学ID，并在SelectListItem列表中以JSON数组的形式返回该大学的教职员工.
Now, let's add a GetFaculties action method which accepts the university id and return the faculties for that university in a list of SelectListItem as JSON array.
public ActionResult GetFaculties(int u)
{
var facultyList = db.Fakulteler
.Where(a=>a.id_uni==u)
.Select(x=>new SelectListItem { Value=x.Id,
Text=x.Name).ToList();
return Json(facultyList , JsonRequestBehavior.AllowGet);
}
您可以在HttpPost操作中使用相同的视图模型
You may use the same view model in the HttpPost action
[HttpPost]
public ActionResult Create(CreateVm vm)
{
if (ModelState.IsValid)
{
//read from vm and save
var k=new kafedra {
UniveristyId=vm.SelectedUniversity,
FacultyId=vm.SelectedFaculty,
};
db.kafedra.Add(k);
db.SaveChanges();
return RedirectToAction("Index");
}
vm.Universities= GetUniversities();
return View(vm);
}
这篇关于ASP.NET MVC级联下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
