ASP.NET MVC Cascading Drop-Down-

Question

Ich habe drei Tabellen in meiner Datenbank wie folgt:

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 

Ich möchte ein Cascading Drop-Down schaffen, die mir erlauben, zuerst eine Universität wählen dann eine Fakultät, gefolgt von einem Cafedry . Unten Code ist was ich bisher versucht habe.

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

und diese 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> 

Wie dieser Code aktualisieren kann einen Cascading Drop-Down mit den drei Tabellen zu erstellen?

Answer 1

Erstellen Sie zunächst ein Ansichtsmodell mit Eigenschaften zum Rendern der Optionen und zum Speichern des ausgewählten Elementwerts.

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

Jetzt in Ihrer GET Aktion, erstellen Sie ein Objekt diesen, laden Sie die Universities Eigenschaft und das Objekt in der

Ansicht senden

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

Jetzt in Ihrer Ansicht, die zu unserer CreateVm Ansicht stark typisierte Modell. wir werden die DropDownListFor Helper-Methode verwenden, um die Dropdown-Listen

@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" /> 
} 

Diese machen wird 2-Dropdown-Listen, eine mit der Universität Optionen und die zweite wird leer zu machen (weil wir nicht alles auf die Faculties Eigenschaft geladen wurde). Jetzt werden wir etwas Javascript haben (wir verwenden jquery hier für einfache DOM-Manipulation), die auf das Änderungsereignis des ersten Drop-downs (Universitäten) hören, den ausgewählten Wert lesen und einen Ajax-Aufruf an die GetFaculties-Methode machen und die Ausgewählter Wert der Hochschuloption.

Sie können sehen, dass ich ein HTML5-Datenattribut für die zweite Dropdown-Liste, wo ich die relative URL auf die GetFaculties-Methode speichern. In meinem Javascript kann ich einfach diesen Datenattributwert lesen und einen Aufruf an diese URL machen, um die Daten zu erhalten.

$(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)); 
       }); 
      });  
    }); 
}); 

Jetzt wollen sie eine GetFaculties Aktion Methode hinzufügen, die für die Universität in einer Liste von SelectListItem als JSON-Array der Universität ID und gibt die Fähigkeiten akzeptiert.

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

Sie können die gleiche Ansicht Modell in der Httppost Aktion verwenden

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