Cascading DropDownList con MVC5, Ajax, C # e MSSQL Server

Question

Sono abbastanza nuovo per MVC proveniente da Windows Form e 3 Tier Architecture.

Sto cercando di capire l'uso di DropDownList a cascata (DDL) popolato dal database. Sto usando MS SQL Server 2012, VS 2013

Attualmente sto lavorando al questionario dell'utente che gli utenti possono selezionare da più risposte da DDL. Dipende da alcune selezioni Ho bisogno di cambiare risposta (di nuovo DDL) sulla prossima domanda.

Database:

Tabella DDLStacks:

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

.

Tabella DDLStackContents (SCID ID contenuto di pila, scopo di indicizzazione)

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...

.

Procedura:

   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

.

Come puoi vedere Domande DDLStacks Hold, DDLStackContents contiene possibili risposte per tale domanda.

Se c'è un gruppo che possiamo selezionare solo le risposte da quel gruppo altrimenti tutte le risposte per una speciale pila.

Ora ho creato un modello di dati di entità ADO.NET per accedere a SPDLLSELECT.

Ora il mio modello di frutta è questo

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

.

Il mio controller è questo, ho bisogno di selezionare il colore dipende dal tipo di bacca. Dì se Avacado seleziona tutto, se Banana Just Group 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);
    }
}   

.

Ecco la mia vista:

@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>

}

.

Questa è la mia codifica di base, ho provato vari metodi per far funzionare questo lavoro, vorrei vedere il modo corretto di farlo con Ajax un codice fortemente digitato.

potrebbe utilizzare viste parziali? qualche idea?

Answer 1

Hai già un modello con cui la tua vista è fortemente digitata.Tutto quello che devi fare è, aggiungere un evento di modifica sull'elenco a discesa (per ulteriori informazioni consultare il collegamento riferito sotto).All'evento di modifica, è possibile caricare i valori come da valore selezionato E.G.Se Berry è selezionato, dovrai recuperare i valori corrispondenti per Berry I.e uva, avocado.

È possibile caricare valori usando JavaScript che è utile quando si dispone di un ampio set di dati.Oppure è possibile precaricare la vista con tutti i dati e in tal caso, è solo necessario filtrare le risposte in base alla domanda selezionata su UI.

Per aiuto su come ottenere questo in pratica, fare riferimento a Cascading DropDownList in MVC 4 .Puoi trovare un esempio simile in base alle tue esigenze.