Kaskadierende Dropdown-Liste mit MVC5, Ajax, C# und MSSQL Server

Question

Ich bin ziemlich neu in MVC und komme von Windows Forms und der 3-Tier-Architektur.

Ich versuche herauszufinden, wie ich kaskadierende Dropdownlisten (DDL) verwende, die aus der Datenbank gefüllt werden.Ich verwende MS SQL Server 2012, VS 2013

Derzeit arbeite ich an einem Benutzerfragebogen, bei dem Benutzer aus mehreren Antworten von DDL auswählen können.Abhängig von einigen Auswahlmöglichkeiten muss ich bei der nächsten Frage die Antworten (wieder DDL) ändern.

Datenbank:

Tisch DDLStacks:

StackId | StackName
   1    | Berry
   2    | BerryColor
   3    ....

Tisch DDLStackContents (SCId-Stack-Inhalts-ID, Indexierungszweck)

SCId | StackId | GroupId | Key | Value
--------------------------------------
1 | 1 | Null | 1 | Grape
2 | 1 | Null | 2 | Avocado
3 | 1 | Null | 3 | Banana
4 | 2 | Null | 1 | Yellow
5 | 2 | Null | 2 | Green
6 | 2 | 1 | 3 | Red
7 | 2 | 1 | 4 | Orange
8...

Verfahren:

   CREATE PROCEDURE [dbo].[spDLLSelect]
        @p_StackName_in VARCHAR(20),
        @p_GroupId_in Int = null
    AS 
    BEGIN
        SELECT [Key],Value FROM DDLStackContents
        WHERE StackID IN (SELECT StackId FROM DDLStacks WHERE StackName = @p_StackName_in)
        AND (GroupId = @p_GroupId_in OR @p_GroupId_in IS null) 
        Order By [Key] 
    END

Wie du sehen kannst DDLStacks Fragen stellen, DDLStackContents hält mögliche Antworten auf diese Frage bereit.

Wenn es eine Gruppe gibt, können wir nur die Antworten aus dieser Gruppe auswählen, andernfalls alle Antworten für einen bestimmten Stapel.

Nun habe ich ein ADO.NET-Entitätsdatenmodell erstellt, um auf spDLLSelect zuzugreifen.

Jetzt ist mein Fruchtmodell dieses

public class FruitModel
{
    public IEnumerable<SelectListItem> BerryList { get; set; }
    public IEnumerable<SelectListItem> BerryColorList { get; set; }

    [Display(Name = "Berry")]
    public byte? Berry { get; set; }

    [Display(Name = "BerryColor")]
    public byte? BerryColor { get; set; }
}

Mein Controller ist dieser, ich muss die Farbe abhängig von der Beerenart auswählen.Sagen Sie, wenn Avacado alle auswählt, wenn Banana nur Gruppe 1.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        CherryEntities db = new CherryEntities();
        var model = new FruitModel();
        model.BerryList = new SelectList(db.spDLLSelect("Berry", null), "Key", "Value");
        //model.BerryColorList = new SelectList(db.spDLLSelect("BerryColor", null), "Key", "Value");
        //model.BerryColorList = new SelectList(db.spDLLSelect("BerryColor", 1), "Key", "Value");
        return View(model);
    }
}   

Hier ist meine Ansicht:

@using (Html.BeginForm("Register2", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{

<div class="form-group">
    @Html.LabelFor(m => m.Berry, new { @class = "col-md-2 control-label" })
    <div class="col-md-10" >
        @Html.DropDownListFor(m => m.Berry, Model.BerryList, "Please Select")
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(m => m.BerryColor, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.DropDownListFor(m => m.BerryColor, Model.BerryColorList, "Please Select")
    </div>
</div>

}

Dies ist meine grundlegende Codierung. Ich habe verschiedene Methoden ausprobiert, damit dies funktioniert. Ich würde gerne sehen, wie dies mit Ajax STRONGLY Typed Code richtig gemacht werden kann.

Möglicherweise werden Teilansichten verwendet?irgendwelche Gedanken?

Answer 1

Sie haben bereits ein Modell, mit dem Ihre Ansicht stark typisiert ist.Sie müssen lediglich ein Änderungsereignis zur Dropdown-Liste hinzufügen (weitere Informationen finden Sie unter dem unten aufgeführten Link).Bei einem Änderungsereignis können Sie die Werte entsprechend dem ausgewählten Wert laden, z. B.Wenn Beere ausgewählt ist, müssen Sie entsprechende Werte für Beere abrufen, z. B. Traube, Avocado.

Sie können Werte mit JavaScript laden, was bei großen Datenmengen nützlich ist.Oder Sie können die Ansicht mit allen Daten vorab laden und in diesem Fall müssen Sie nur die Antworten basierend auf der auf der Benutzeroberfläche ausgewählten Frage filtern.

Hilfe, wie Sie dies in der Praxis erreichen können, finden Sie hier Kaskadierende DropDownList in MVC 4.Sie können je nach Bedarf ein ähnliches Beispiel finden.