ASP.NET MVC級聯下拉菜單

Question

我的數據庫中有三個表，如下所示：

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。 下面的代碼是我到目前為止嘗試過的。

 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>

如何更新此代碼以使用三個表創建級聯下拉菜單？

Answer 1

首先，創建一個視圖模型，該模型具有用於渲染選項和存儲所選項目值的屬性。

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屬性並將該對象發送到視圖

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 helper方法來呈現下拉列表

@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調用，然后將選擇的大學選項值。

您可以看到，我為第二個下拉菜單設置了html5數據屬性，在該屬性中，我將相對URL存儲到GetFaculties方法。 因此，在我的JavaScript中，我可以簡單地讀取此數據屬性值並調用該url以獲取數據。

$(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數組的形式返回該大學的教師。

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操作中使用相同的視圖模型

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