Condividi tramite

Uso dell'helper DropDownList con ASP.NET MVC

  • Articolo

di Rick Anderson

Questa esercitazione illustra le nozioni di base sull'uso dell'helper DropDownList e dell'helper ListBox in un'applicazione Web MVC ASP.NET. È possibile usare Microsoft Visual Web Developer 2010 Express Service Pack 1, una versione gratuita di Microsoft Visual Studio per seguire l'esercitazione. Prima di iniziare, assicurarsi di aver installato i prerequisiti elencati di seguito. È possibile installarli facendo clic sul collegamento seguente: Installazione guidata piattaforma Web. In alternativa, è possibile installare singolarmente i prerequisiti usando i collegamenti seguenti:

Se si usa Visual Studio 2010 anziché Visual Web Developer 2010, installare i prerequisiti facendo clic sul collegamento seguente: Prerequisiti di Visual Studio 2010. Questa esercitazione presuppone che sia stata completata l'esercitazione Introduzione a ASP.NET MVC o l'esercitazioneASP.NET MVC Music Store o si abbia familiarità con ASP.NET sviluppo MVC. Questa esercitazione inizia con un progetto modificato dall'esercitazione ASP.NET MVC Music Store .

Per questo argomento è disponibile un progetto Visual Web Developer con il codice sorgente C# completato. Download.

Scopo dell'esercitazione

Verranno creati metodi di azione e visualizzazioni che usano l'helper DropDownList per selezionare una categoria. Si userà anche jQuery per aggiungere una finestra di dialogo di categoria di inserimento che può essere usata quando è necessaria una nuova categoria (ad esempio genere o artista). Di seguito è riportato uno screenshot della visualizzazione Crea che mostra i collegamenti per aggiungere un nuovo genere e aggiungere un nuovo artista.

Immagine che usa helper elenco a discesa

Acquisizione di competenze

In questa esercitazione si apprenderà:

  • Come usare l'helper DropDownList per selezionare i dati delle categorie.
  • Come aggiungere una finestra di dialogo jQuery per aggiungere nuove categorie.

Introduzione

Per iniziare, scaricare il progetto iniziale con il collegamento seguente , Scaricare. In Esplora risorse fare clic con il pulsante destro del mouse sul file DDL_Starter.zip e selezionare proprietà. Nella finestra di dialogo ProprietàDDL_Starter.zip selezionare Sblocca.

Immagine della finestra di dialogo delle proprietà selezionare Sblocca

Fare clic con il pulsante destro del mouse sul file DDL_Starter.zip e scegliere Estrai tutto per decomprimere il file. Aprire il file StartMusicStore.sln con Visual Web Developer 2010 Express ("Visual Web Developer" o "VWD" per brevità) o Visual Studio 2010.

Premere CTRL+F5 per eseguire l'applicazione e fare clic sul collegamento Test .

Immagine del collegamento di test dell'applicazione

Selezionare il collegamento Seleziona categoria filmato (semplice). Viene visualizzato un elenco Selezione tipo filmato, con Comedy il valore selezionato.

Immagine dell'elenco di selezione del tipo di film

Fare clic con il pulsante destro del mouse nel browser e selezionare Visualizza origine. Viene visualizzato il codice HTML per la pagina. Il codice seguente mostra il codice HTML per l'elemento select.

<form action="/Home/CategoryChosen" method="get">

<fieldset>Movie Type <select id="MovieType" name="MovieType">

<option value=""></option>

<option value="0">Action</option>

<option value="1">Drama</option>

<option selected="selected" value="2">Comedy</option>

<option value="3">Science Fiction</option>

</select>

<p><input type="submit" value="Submit" /> </p>

</fieldset>

</form>

È possibile notare che ogni elemento nell'elenco di selezione ha un valore (0 per Azione, 1 per Dramma, 2 per Commedia e 3 per Fantascienza) e un nome visualizzato (Action, Drama, Comedy e Science Fiction). Il codice precedente è HTML standard per un elenco di selezione.

Modificare l'elenco di selezione in Drama e premere il pulsante Invia . L'URL nel browser è http://localhost:2468/Home/CategoryChosen?MovieType=1 e la pagina visualizza l'opzione Selezionata: 1.

Immagine di U R L nel browser

Aprire il file Controllers\HomeController.cs ed esaminare il SelectCategory metodo .

public ActionResult SelectCategory() {

     List<SelectListItem> items = new List<SelectListItem>();

     items.Add(new SelectListItem { Text = "Action", Value = "0"});

     items.Add(new SelectListItem { Text = "Drama", Value = "1" });

     items.Add(new SelectListItem { Text = "Comedy", Value = "2", Selected = true });

     items.Add(new SelectListItem { Text = "Science Fiction", Value = "3" });

     ViewBag.MovieType = items;

     return View();

 }

L'helper DropDownList usato per creare un elenco di selezione HTML richiede un oggetto SelectListItem >IEnumerable<, in modo esplicito o implicito. In altre parole, è possibile passare IEnumerable<SelectListItem > in modo esplicito all'helper DropDownList oppure è possibile aggiungere IEnumerable<SelectListItem > a ViewBag usando lo stesso nome per SelectListItem come proprietà del modello. Il passaggio di SelectListItem in modo implicito e esplicito viene trattato nella parte successiva dell'esercitazione. Il codice precedente mostra il modo più semplice possibile per creare un oggetto SelectListItem >IEnumerable< e popolarlo con testo e valori. Si noti che la Comedy proprietà SelectListItem è impostata su true. In questo modo, l'elenco di selezione di cui è stato eseguito il rendering mostrerà Comedy come elemento selezionato nell'elenco.

L'oggetto SelectListItem >IEnumerable< creato in precedenza viene aggiunto a ViewBag con il nome MovieType. Questo è il modo in cui viene passato in modo implicito l'oggetto SelectListItem >IEnumerable< all'helper DropDownList illustrato di seguito.

Aprire il file Views\Home\SelectCategory.cshtml ed esaminare il markup.

@{

    ViewBag.Title = "Category Select";

    Layout = "~/Views/Shared/_Simple_Layout.cshtml";

}

@using (Html.BeginForm("CategoryChosen", "Home", FormMethod.Get)) {

    <fieldset>

            Movie Type

            @Html.DropDownList("MovieType")

        <p>

            <input type="submit" value="Submit" />

        </p>

    </fieldset>

}

Nella terza riga il layout viene impostato su Views/Shared/_Simple_Layout.cshtml, che è una versione semplificata del file di layout standard. Questa operazione viene eseguita per semplificare la visualizzazione e il rendering del codice HTML.

In questo esempio non viene modificato lo stato dell'applicazione, quindi i dati verranno inviati usando HTTP GET, non HTTP POST. Vedere la sezione W3C Elenco di controllo rapido per la scelta di HTTP GET o POST. Poiché non si modifica l'applicazione e si pubblica il modulo, viene usato l'overload Html.BeginForm che consente di specificare il metodo di azione, il controller e il metodo modulo (HTTP POST o HTTP GET). In genere le viste contengono l'overload Html.BeginForm che non accetta parametri. Per impostazione predefinita, la versione senza parametri consente di registrare i dati del modulo nella versione POST dello stesso metodo di azione e del controller.

Nella riga seguente

@Html.DropDownList("MovieType")

passa un argomento stringa all'helper DropDownList . Questa stringa, "MovieType" nell'esempio, esegue due operazioni:

  • Fornisce la chiave per l'helper DropDownList per trovare un oggetto SelectListItem >IEnumerable< in ViewBag.
  • È associato a dati all'elemento del modulo MovieType. Se il metodo submit è HTTP GET, MovieType sarà una stringa di query. Se il metodo submit è HTTP POST, MovieType verrà aggiunto nel corpo del messaggio. L'immagine seguente mostra la stringa di query con il valore 1.

Immagine della stringa di query con valore 1

Nel codice seguente viene illustrato il CategoryChosen metodo a cui è stato inviato il modulo.

public ViewResult CategoryChosen(string MovieType) {

    ViewBag.messageString = MovieType;

    return View("Information");

}

Tornare alla pagina di test e selezionare il collegamento SelectList HTML . La pagina HTML esegue il rendering di un elemento select simile alla semplice pagina di test di ASP.NET MVC. Fare clic con il pulsante destro del mouse sulla finestra del browser e selezionare Visualizza origine. Il markup HTML per l'elenco di selezione è essenzialmente identico. Testare la pagina HTML, funziona come il metodo di azione MVC ASP.NET e visualizzare i test precedenti.

Miglioramento dell'elenco di selezione film con enumerazioni

Se le categorie nell'applicazione sono fisse e non cambiano, è possibile sfruttare le enumerazioni per rendere il codice più affidabile e più semplice da estendere. Quando si aggiunge una nuova categoria, viene generato il valore di categoria corretto. Evita errori di copia e incolla quando si aggiunge una nuova categoria, ma si dimentica di aggiornare il valore della categoria.

Aprire il file Controllers\HomeController.cs ed esaminare il codice seguente:

public enum eMovieCategories { Action, Drama, Comedy, Science_Fiction };

private void SetViewBagMovieType(eMovieCategories selectedMovie) {

    IEnumerable<eMovieCategories> values = 

                      Enum.GetValues(typeof(eMovieCategories))

                      .Cast<eMovieCategories>();

    IEnumerable<SelectListItem> items =

        from value in values

        select new SelectListItem

        {

            Text = value.ToString(),

            Value = value.ToString(),

            Selected = value == selectedMovie,

        };

    ViewBag.MovieType = items;

}

public ActionResult SelectCategoryEnum() {

    SetViewBagMovieType(eMovieCategories.Drama);

    return View("SelectCategory");

}

L'enumerazioneeMovieCategories acquisisce i quattro tipi di film. Il SetViewBagMovieType metodo crea l'oggetto SelectListItem >IEnumerable<dall'enumerazioneeMovieCategories e imposta la Selected proprietà dal selectedMovie parametro . Il SelectCategoryEnum metodo di azione usa la stessa visualizzazione del SelectCategory metodo di azione.

Passare alla pagina Test e fare clic sul Select Movie Category (Enum) collegamento. Questa volta, anziché un valore (numero) visualizzato, viene visualizzata una stringa che rappresenta l'enumerazione.

Inserimento dei valori di enumerazione

I moduli HTML vengono in genere usati per pubblicare i dati nel server. Il codice seguente illustra le HTTP GET versioni e HTTP POST del SelectCategoryEnumPost metodo .

public ActionResult SelectCategoryEnumPost() {

    SetViewBagMovieType(eMovieCategories.Comedy);

    return View();

}

[HttpPost]

public ActionResult SelectCategoryEnumPost(eMovieCategories MovieType) {

    ViewBag.messageString = MovieType.ToString() +

                            " val = " + (int)MovieType;

    return View("Information");

}

Passando un'enumerazione eMovieCategories al POST metodo , è possibile estrarre sia il valore di enumerazione che la stringa di enumerazione. Eseguire l'esempio e passare alla pagina Test. Fare clic sul Select Movie Category(Enum Post) collegamento. Selezionare un tipo di film e quindi premere il pulsante Invia. La visualizzazione mostra sia il valore che il nome del tipo di filmato.

Immagine del valore e del nome del tipo di film

Creazione di un elemento Select di più sezioni

L'helper HTML ListBox esegue il rendering dell'elemento HTML <select> con l'attributo multiple , che consente agli utenti di effettuare più selezioni. Passare al collegamento Test e quindi selezionare il collegamento Multi Select Country (Seleziona paese). L'interfaccia utente sottoposta a rendering consente di selezionare più paesi. Nell'immagine seguente sono selezionati Canada e Cina.

Immagine dell'elenco a discesa selezioni multiple

Esame del codice MultiSelectCountry

Esaminare il codice seguente dal file Controllers\HomeController.cs .

private MultiSelectList GetCountries(string[] selectedValues) {

    List<Country> Countries = new List<Country>()

        {

            new Country() { ID = 1, Name= "United States" },

            new Country() { ID = 2, Name= "Canada" },

            new Country() { ID = 3, Name= "UK" },

            new Country() { ID = 4, Name= "China" },

            new Country() { ID = 5, Name= "Japan" }

        };

    return new MultiSelectList(Countries, "ID", "Name", selectedValues);

}

public ActionResult MultiSelectCountry() {

    ViewBag.Countrieslist = GetCountries(null);

    return View();

}

Il GetCountries metodo crea un elenco di paesi, quindi lo passa al MultiSelectList costruttore. L'overload MultiSelectList del GetCountries costruttore usato nel metodo precedente accetta quattro parametri:

public MultiSelectList(

    IEnumerable items,

    string dataValueField,

    string dataTextField,

    IEnumerable selectedValues

)
  1. items: IEnumerable contenente gli elementi nell'elenco. Nell'esempio precedente l'elenco dei Paesi.
  2. dataValueField: nome della proprietà nell'elenco IEnumerable che contiene il valore. Nell'esempio precedente la ID proprietà .
  3. dataTextField: nome della proprietà nell'elenco IEnumerable contenente le informazioni da visualizzare. Nell'esempio precedente la name proprietà .
  4. selectedValues: elenco di valori selezionati.

Nell'esempio precedente, il MultiSelectCountry metodo passa un null valore per i paesi selezionati, quindi nessun paese viene selezionato quando viene visualizzata l'interfaccia utente. Il codice seguente mostra il markup Razor usato per eseguire il rendering della MultiSelectCountry visualizzazione.

@{

    ViewBag.Title = "MultiSelect Country";

    Layout = "~/Views/Shared/_Simple_Layout.cshtml";

}

@if (ViewBag.YouSelected != null) {

    <div> You Selected:  @ViewBag.YouSelected</div>

}

@using (Html.BeginForm()) {

    <fieldset>

        <legend>Multi-Select Demo</legend>

        <div class="editor-field">

            @Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList

            )

        </div>

        <p>

            <input type="submit" value="Save" />

        </p>

    </fieldset>

}

Il metodo ListBox helper HTML usato in precedenza accetta due parametri, il nome della proprietà per il binding del modello e l'oggetto MultiSelectList contenente le opzioni e i valori di selezione. Il ViewBag.YouSelected codice precedente viene usato per visualizzare i valori dei paesi selezionati quando si invia il modulo. Esaminare l'overload HTTP POST del MultiSelectCountry metodo .

[HttpPost]

public ActionResult MultiSelectCountry(FormCollection form) {

    ViewBag.YouSelected = form["Countries"];

    string selectedValues = form["Countries"];

    ViewBag.Countrieslist = GetCountries(selectedValues.Split(','));

    return View();

}

La ViewBag.YouSelected proprietà dinamica contiene i paesi selezionati, ottenuti per la Countries voce nella raccolta moduli. In questa versione il metodo GetCountries viene passato un elenco dei paesi selezionati, quindi quando viene visualizzata la MultiSelectCountry visualizzazione, i paesi selezionati vengono selezionati nell'interfaccia utente.

Creazione di un elemento Select friendly con il plug-in jQuery scelto da Harvest

Il plug-in jQuery scelto di Harvest può essere aggiunto a un elemento di selezione> HTML <per creare un'interfaccia utente intuitiva. Le immagini seguenti illustrano il plug-in jQuery Harvest Chosen con MultiSelectCountry vista.

Immagine del plug-in Harvest Chosen j Query

Nelle due immagini seguenti viene selezionato il Canada .

Immagine del Canada selezionata

Immagine del Canada selezionata con X da rimuovere

Nell'immagine precedente è selezionata l'opzione Canada e contiene una x che è possibile fare clic per rimuovere la selezione. L'immagine seguente mostra l'opzione Canada, Cina e Giappone selezionata.

Immagine del Canada Cina e Giappone selezionata

Associazione del plug-in jQuery scelto di Harvest

La sezione seguente è più semplice da seguire se si ha esperienza con jQuery. Se jQuery non è mai stato usato in precedenza, è possibile provare una delle esercitazioni jQuery seguenti.

Il plug-in Scelto è incluso nei progetti di esempio iniziali e completati che accompagnano questa esercitazione. Per questa esercitazione è sufficiente usare jQuery per collegarlo all'interfaccia utente. Per usare il plug-in jQuery harvest scelto in un progetto MVC ASP.NET, è necessario:

  1. Scaricare il plug-in scelto da GitHub. Questo passaggio è stato eseguito per l'utente.
  2. Aggiungere la cartella Scelta al progetto MVC ASP.NET. Aggiungere gli asset dal plug-in Scelto scaricato nel passaggio precedente alla cartella Scelta. Questo passaggio è stato eseguito per l'utente.
  3. Associare il plug-in scelto all'helper HTML DropDownList o ListBox .

Associazione del plug-in scelto alla visualizzazione MultiSelectCountry.

Aprire il file Views\Home\MultiSelectCountry.cshtml e aggiungere un htmlAttributes parametro a Html.ListBox. Il parametro che verrà aggiunto contiene un nome di classe per l'elenco di selezione(@class = "chzn-select"). Il codice completato è illustrato di seguito:

<div class="editor-field">

    @Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList

     , new

     {

         @class = "chzn-select",

         data_placeholder = "Choose  Countries..."

     }

    )

</div>

Nel codice precedente viene aggiunto l'attributo HTML e il valore class = "chzn-select"dell'attributo . La classe precedente al carattere @ non ha nulla a che fare con il motore di visualizzazione Razor. class è una parola chiave C#. Le parole chiave C# non possono essere usate come identificatori, a meno che non includano @ come prefisso. Nell'esempio precedente è @class un identificatore valido, ma la classe non è perché la classe è una parola chiave.

Aggiungere riferimenti ai file Scelta/chosen.jquery.js e Scelta/scelta.css . Scelta /chosen.jquery.js e implementa la funzionalità del plug-in Scelto. Il file Chosen/chosen.css fornisce lo stile. Aggiungere questi riferimenti alla fine del file Views\Home\MultiSelectCountry.cshtml . Il codice seguente mostra come fare riferimento al plug-in Scelto.

<script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script><script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Chosen/chosen.css")" rel="stylesheet"  type="text/css" />

Attivare il plug-in Scelto usando il nome della classe usato nel codice Html.ListBox . Nell'esempio precedente il nome della classe è chzn-select. Aggiungere la riga seguente alla fine del file di visualizzazione Views\Home\MultiSelectCountry.cshtml . Questa riga attiva il plug-in Scelto.

<script >    $(".chzn-select").chosen(); </script>  @*Hookup Chosen Plugin*@

La riga seguente è la sintassi per chiamare la funzione ready jQuery, che seleziona l'elemento DOM con il nome chzn-selectdella classe .

$(".chzn-select")

Il set di cui è stato eseguito il wrapping restituito dalla chiamata precedente applica quindi il metodo scelto (.chosen();), che associa il plug-in Scelto.

Il codice seguente mostra il file di visualizzazione Views\Home\MultiSelectCountry.cshtml completato.

@{

    ViewBag.Title = "MultiSelect Country";

    Layout = "~/Views/Shared/_Simple_Layout.cshtml";

}

@if (ViewBag.YouSelected != null) {

    <div> You Selected:  @ViewBag.YouSelected</div>

}

@using (Html.BeginForm()) {

    <fieldset>

        <legend>Multi-Select Demo</legend>

<div class="editor-field">

    @Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList

     , new

     {

         @class = "chzn-select"

     }

    )

</div>

        <p>

            <input type="submit" value="Save" />

        </p>

    </fieldset>

}

<script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Chosen/chosen.css")" rel="stylesheet"  type="text/css" />

<script >    $(".chzn-select").chosen(); </script> @*Hookup Chosen Plugin*@

Eseguire l'applicazione e passare alla MultiSelectCountry visualizzazione. Provare ad aggiungere ed eliminare paesi. Il download di esempio fornito contiene anche un metodo e una MultiCountryVM visualizzazione che implementa la funzionalità MultiSelectCountry usando un modello di visualizzazione anziché viewBag.

Nella sezione successiva verrà illustrato il funzionamento del meccanismo di scaffolding di ASP.NET MVC con l'helper DropDownList .

Avanti