Delen via

De DropDownList Helper gebruiken met ASP.NET MVC

  • Artikel

door Rick Anderson

In deze zelfstudie leert u de basisbeginselen van het werken met de DropDownList helper en de ListBox helper in een ASP.NET MVC-webtoepassing. U kunt Microsoft Visual Web Developer 2010 Express Service Pack 1 gebruiken. Dit is een gratis versie van Microsoft Visual Studio om de zelfstudie te volgen. Voordat u begint, moet u ervoor zorgen dat u de onderstaande vereisten hebt geïnstalleerd. U kunt ze allemaal installeren door op de volgende koppeling te klikken: webplatforminstallatieprogramma. U kunt de vereisten ook afzonderlijk installeren met behulp van de volgende koppelingen:

Als u Visual Studio 2010 gebruikt in plaats van Visual Web Developer 2010, installeert u de vereisten door op de volgende koppeling te klikken: Vereisten voor Visual Studio 2010. In deze zelfstudie wordt ervan uitgegaan dat u de zelfstudie Inleiding tot ASP.NET MVC- of de ASP.NET MVC Music Store zelfstudie hebt voltooid of dat u bekend bent met ASP.NET MVC-ontwikkeling. Deze zelfstudie begint met een gewijzigd project uit de zelfstudie ASP.NET MVC Music Store.

Een Visual Web Developer-project met de voltooide broncode in C# van het leerprogramma is beschikbaar ter aanvulling van dit onderwerp. downloaden.

Wat je gaat bouwen

U maakt actiemethoden en weergaven die gebruikmaken van de DropDownList helper om een categorie te selecteren. U zult ook jQuery gebruiken om een categorie-invoegdialoog toe te voegen die kan worden gebruikt wanneer een nieuwe categorie (zoals een genre of artiest) nodig is. Hieronder ziet u een schermopname van de weergave Maken met koppelingen om een nieuw genre toe te voegen en een nieuwe kunstenaar toe te voegen.

Afbeelding met behulp van vervolgkeuzelijst helper

Vaardigheden die u leert

Dit is wat u leert:

  • De DropDownList helper gebruiken om categoriegegevens te selecteren.
  • Hoe een jQuery-dialoogvenster toe te voegen om nieuwe categorieën te maken.

Aan de slag

Download eerst het startersproject met de volgende koppeling Download. Klik in Windows Verkenner met de rechtermuisknop op het bestand DDL_Starter.zip en selecteer eigenschappen. Selecteer Blokkering opheffen in het dialoogvenster DDL_Starter.zip Eigenschappen.

Afbeelding van het dialoogvenster Eigenschappen selecteert u de blokkering opheffen

Klik met de rechtermuisknop op het DDL_Starter.zip-bestand en selecteer Alles uitpakken om het bestand uit te pakken. Open het StartMusicStore.sln-bestand met Visual Web Developer 2010 Express ('Visual Web Developer' of 'VWD' kortom) of Visual Studio 2010.

Druk op Ctrl+F5 om de toepassing uit te voeren en klik op de koppeling Test.

afbeelding van de koppeling voor toepassingstests

Selecteer de koppeling Selecteer Filmcategorie (Eenvoudig). Een lijst met filmtypes om uit te kiezen wordt weergegeven, waarbij Komedie de geselecteerde waarde is.

Afbeelding van de lijst voor het selecteren van filmtypen

Klik met de rechtermuisknop in de browser en selecteer de weergavebron. De HTML voor de pagina wordt weergegeven. In de onderstaande code ziet u de HTML voor het geselecteerde element.

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

U kunt zien dat elk item in de selectielijst een waarde heeft (0 voor Actie, 1 voor Drama, 2 voor Comedy en 3 voor Science Fiction) en een weergavenaam (Action, Drama, Comedy en Science Fiction). De bovenstaande code is standaard-HTML voor een selectielijst.

Wijzig de selectielijst in Drama en druk op de knop Verzenden. De URL in de browser is http://localhost:2468/Home/CategoryChosen?MovieType=1 en de pagina toont U hebt geselecteerd: 1.

afbeelding van U R L in browser

Open het bestand Controllers\HomeController.cs en bekijk de methode SelectCategory.

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

 }

Voor de DropDownList-helper, die wordt gebruikt voor het maken van een HTML-selectielijst, is een IEnumerable<SelectListItem->vereist, hetzij expliciet of impliciet. Dat wil zeggen, u kunt de IEnumerable<SelectListItem > expliciet doorgeven aan de DropDownList helper, of u kunt de IEnumerable<SelectListItem > toevoegen aan de ViewBag met dezelfde naam als de modeleigenschap voor de SelectListItem. Het impliciet en expliciet doorgeven van de SelectListItem- wordt behandeld in het volgende deel van de handleiding. De bovenstaande code toont de eenvoudigste manier om een IEnumerable<SelectListItem > te maken en deze te vullen met tekst en waarden. Houd er rekening mee dat voor het ComedySelectListItem de eigenschap Geselecteerd is ingesteld op waar; dit zorgt ervoor dat de weergegeven selectielijst Komedie- als het geselecteerde item in de lijst weergeeft.

De boven gemaakte IEnumerable<SelectListItem > wordt toegevoegd aan de ViewBag met de naam MovieType. Zo geven we de IEnumerable<SelectListItem > impliciet door aan de DropDownList helper die hieronder wordt weergegeven.

Open het bestand Views\Home\SelectCategory.cshtml bestand en bekijk de opmaak.

@{

    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>

}

Op de derde regel stellen we de indeling in op Views/Shared/_Simple_Layout.cshtml, een vereenvoudigde versie van het standaardindelingsbestand. We doen dit om de weergave en gerenderde HTML eenvoudig te houden.

In dit voorbeeld wijzigen we de status van de toepassing niet, dus verzenden we de gegevens met behulp van een HTTP GET-, niet HTTP POST-. Zie de sectie W3C Snelle controlelijst voor het kiezen van HTTP GET of POST-. Omdat we de toepassing niet wijzigen en het formulier plaatsen, gebruiken we de Html.BeginForm overbelasting waarmee we de actiemethode, controller en formuliermethode kunnen opgeven (HTTP POST- of HTTP GET-). Normaal gesproken bevatten weergaven de Html.BeginForm overbelasting waarvoor geen parameters nodig zijn. De versie zonder parameters plaatst standaard de formuliergegevens naar de POST-versie van dezelfde actiemethode en controller.

De volgende regel

@Html.DropDownList("MovieType")

geeft een tekenreeksargument door aan de DropDownList helper. Deze tekenreeks, 'MovieType' in ons voorbeeld, doet twee dingen:

  • Het biedt de sleutel voor de DropDownList helper om een IEnumerable<SelectListItem > te vinden in de ViewBag.
  • Het is gegevensgebonden aan het FormType-element MovieType. Als de verzendmethode is HTTP GET-, is MovieType een querytekenreeks. Als de verzendmethode is HTTP POST-, wordt MovieType toegevoegd in de berichttekst. In de volgende afbeelding ziet u de queryreeks met de waarde 1.

afbeelding van queryreeks met de waarde 1

De volgende code toont de CategoryChosen methode waarop het formulier is verzonden.

public ViewResult CategoryChosen(string MovieType) {

    ViewBag.messageString = MovieType;

    return View("Information");

}

Ga terug naar de testpagina en selecteer de koppeling HTML SelectList. De HTML-pagina geeft een select-element weer dat lijkt op de eenvoudige ASP.NET MVC-testpagina. Klik met de rechtermuisknop op het browservenster en selecteer bron weergeven. De HTML-opmaak voor de selectielijst is in wezen identiek. Test de HTML-pagina, die werkt zoals de ASP.NET MVC-actiemethode en view die we eerder hebben getest.

De filmselectielijst verbeteren met Enumeraties

Als de categorieën in uw toepassing zijn opgelost en niet worden gewijzigd, kunt u profiteren van opsommingen om uw code robuuster en eenvoudiger uit te breiden. Wanneer u een nieuwe categorie toevoegt, wordt de juiste categoriewaarde gegenereerd. Hiermee voorkomt u kopieer- en plakfouten wanneer u een nieuwe categorie toevoegt, maar vergeet de categoriewaarde bij te werken.

Open het bestand Controllers\HomeController.cs en bekijk de volgende code:

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

}

De opsommingeMovieCategories legt de vier filmtypen vast. Met de methode SetViewBagMovieType maakt u de IEnumerable<SelectListItem-> uit de eMovieCategoriesopsommingen stelt u de eigenschap Selected in op basis van de parameter selectedMovie. De actiemethode SelectCategoryEnum gebruikt dezelfde weergave als de SelectCategory actiemethode.

Ga naar de pagina Test en klik op de koppeling Select Movie Category (Enum). Deze keer wordt in plaats van een waarde (getal) weergegeven een tekenreeks die het enum vertegenwoordigt.

Enum-waarden plaatsen

HTML-formulieren worden meestal gebruikt om gegevens naar de server te posten. De volgende code toont de HTTP GET- en HTTP POST versies van de SelectCategoryEnumPost methode.

public ActionResult SelectCategoryEnumPost() {

    SetViewBagMovieType(eMovieCategories.Comedy);

    return View();

}

[HttpPost]

public ActionResult SelectCategoryEnumPost(eMovieCategories MovieType) {

    ViewBag.messageString = MovieType.ToString() +

                            " val = " + (int)MovieType;

    return View("Information");

}

Door een eMovieCategories enum door te geven aan de methode POST, kunnen we zowel de enumwaarde als de opsommingstekenreeks extraheren. Voer het voorbeeld uit en navigeer naar de pagina Test. Klik op de Select Movie Category(Enum Post) link. Selecteer een filmtype en druk vervolgens op de knop Verzenden. De weergave toont zowel de waarde als de naam van het filmtype.

Afbeelding van waarde en naam van filmtype

Een Selectie-element voor Meerdere Secties Creëren

De ListBox HTML-helper geeft het HTML-<select>-element weer met het kenmerk multiple, zodat de gebruikers meerdere selecties kunnen maken. Navigeer naar de Test-koppeling en selecteer vervolgens de koppeling Multi Select Landen. Met de weergegeven gebruikersinterface kunt u meerdere landen selecteren. In de onderstaande afbeelding zijn Canada en China geselecteerd.

afbeelding van een vervolgkeuzelijst met meerdere keuzemogelijkheden

De MultiSelectCountry-code onderzoeken

Bekijk de volgende code uit het bestand 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();

}

Met de methode GetCountries wordt een lijst met landen gemaakt en vervolgens doorgegeven aan de MultiSelectList constructor. De MultiSelectList constructoroverbelasting die in de bovenstaande GetCountries methode wordt gebruikt, heeft vier parameters:

public MultiSelectList(

    IEnumerable items,

    string dataValueField,

    string dataTextField,

    IEnumerable selectedValues

)
  1. items: een IEnumerable die de items in de lijst bevat. In het bovenstaande voorbeeld, de lijst van landen.
  2. dataValueField: de naam van de eigenschap in de lijst met IEnumerable die de waarde bevat. In het bovenstaande voorbeeld is de eigenschap ID aanwezig.
  3. dataTextField: de naam van de eigenschap in de IEnumerable-lijst die de weer te geven informatie bevat. In het bovenstaande voorbeeld staat de eigenschap name.
  4. selectedValues: de lijst met geselecteerde waarden.

In het bovenstaande voorbeeld geeft de methode MultiSelectCountry een null-waarde door voor de geselecteerde landen. Er worden dus geen landen geselecteerd wanneer de gebruikersinterface wordt weergegeven. De volgende code toont de Razor-markeringen die worden gebruikt om de MultiSelectCountry weergave weer te geven.

@{

    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>

}

De HTML-helper ListBox methode die hierboven wordt gebruikt, heeft twee parameters: de naam van de eigenschap om aan te binden en de MultiSelectList die de selecties bevat. De bovenstaande ViewBag.YouSelected code wordt gebruikt om de waarden weer te geven van de landen die u hebt geselecteerd bij het indienen van het formulier. Bekijk de HTTP POST-overbelasting van de MultiSelectCountry methode.

[HttpPost]

public ActionResult MultiSelectCountry(FormCollection form) {

    ViewBag.YouSelected = form["Countries"];

    string selectedValues = form["Countries"];

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

    return View();

}

De ViewBag.YouSelected dynamische eigenschap bevat de geselecteerde landen die zijn verkregen voor het Countries item in de formulierenverzameling. In deze versie wordt de methode GetCountries doorgegeven aan een lijst met de geselecteerde landen, dus wanneer de weergave MultiSelectCountry wordt weergegeven, worden de geselecteerde landen geselecteerd in de gebruikersinterface.

Een select-element vriendelijk maken met de Harvest Chosen jQuery-invoegtoepassing

De Harvest Chosen jQuery plug-in kan worden toegevoegd aan een HTML-<select-element> om een gebruiksvriendelijke interface te maken. In de onderstaande afbeeldingen ziet u de jQuery plugin Harvest Chosen met weergave MultiSelectCountry.

Afbeelding van Harvest Gekozen j Query plugin

In de onderstaande twee afbeeldingen is Canada geselecteerd.

afbeelding van Canada geselecteerd

afbeelding van Canada geselecteerd met X om te verwijderen

In de bovenstaande afbeelding is Canada geselecteerd en is er een element, x, waarop u kunt klikken om de selectie te verwijderen. In de onderstaande afbeelding ziet u Canada, China en Japan geselecteerd.

Afbeelding van Canada China en Japan geselecteerd

Het aansluiten van de Harvest Chosen jQuery-plugin

De volgende sectie is gemakkelijker te volgen als u ervaring hebt met jQuery. Als u jQuery nog nooit eerder hebt gebruikt, kunt u een van de volgende jQuery-zelfstudies proberen.

De gekozen invoegtoepassing is opgenomen in de starters- en voltooide voorbeeldprojecten die bij deze zelfstudie horen. Voor deze zelfstudie hoeft u alleen jQuery te gebruiken om deze te koppelen aan de gebruikersinterface. Als u de invoegtoepassing Harvest Chosen jQuery in een ASP.NET MVC-project wilt gebruiken, moet u het volgende doen:

  1. Download de gekozen plug-in van GitHub. Deze stap is voor u uitgevoerd.
  2. Voeg de map Gekozen toe aan uw ASP.NET MVC-project. Voeg de assets van de Chosen-invoegtoepassing die u in de vorige stap hebt gedownload toe aan de Chosen-map. Deze stap is voor u uitgevoerd.
  3. Koppel de gekozen invoegtoepassing aan de DropDownList of ListBox HTML-helper.

Koppel de gekozen invoegtoepassing aan de MultiSelectCountry-weergave.

Open het bestand Views\Home\MultiSelectCountry.cshtml en voeg een htmlAttributes parameter toe aan de Html.ListBox. De parameter die u toevoegt, bevat een klassenaam voor de selectielijst(@class = "chzn-select"). De voltooide code wordt hieronder weergegeven:

<div class="editor-field">

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

     , new

     {

         @class = "chzn-select",

         data_placeholder = "Choose  Countries..."

     }

    )

</div>

In de bovenstaande code voegen we het HTML-kenmerk en de kenmerkwaarde toe class = "chzn-select". Het @-teken voorafgaand aan de klasse heeft niets te maken met de Razor-weergave-engine. class is een C#-trefwoord. C#-trefwoorden kunnen niet als id's worden gebruikt, tenzij ze @ als voorvoegsel bevatten. In het bovenstaande voorbeeld is @class een geldige id, maar klasse niet omdat klasse een trefwoord is.

Voeg verwijzingen toe aan de bestanden Chosen/chosen.jquery.js en Chosen/chosen.css. De Chosen/chosen.jquery.js en implementeert de functionaliteit van de Chosen-invoegtoepassing. Het bestand Chosen/chosen.css voorziet van de stijl. Voeg deze verwijzingen toe aan de onderkant van het bestand Views\Home\MultiSelectCountry.cshtml. De volgende code laat zien hoe u naar de gekozen invoegtoepassing verwijst.

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

Activeer de gekozen invoegtoepassing met behulp van de klassenaam die wordt gebruikt in de Html.ListBox code. In het bovenstaande voorbeeld wordt de klassenaam chzn-select. Voeg de volgende regel toe aan de onderkant van het Views\Home\MultiSelectCountry.cshtml weergavebestand. Met deze regel wordt de Chosen-plugin geactiveerd.

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

De volgende regel is de syntaxis voor het aanroepen van de functie die gereed is voor jQuery, waarmee het DOM-element wordt geselecteerd met de klassenaam chzn-select.

$(".chzn-select")

De ingepakte set die door de bovenstaande aanroep wordt geretourneerd, past vervolgens de gekozen methode (.chosen();) toe, waarmee de Chosen-invoegtoepassing wordt gekoppeld.

De volgende code toont het voltooide bestand Views\Home\MultiSelectCountry.cshtml view file.

@{

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

Voer de toepassing uit en navigeer naar de MultiSelectCountry weergave. Probeer landen toe te voegen en te verwijderen. De meegeleverde voorbeelddownload bevat ook een MultiCountryVM methode en weergave waarmee de MultiSelectCountry-functionaliteit wordt geïmplementeerd met behulp van een weergavemodel in plaats van een ViewBag-.

In de volgende sectie ziet u hoe het ASP.NET MVC-scaffoldingmechanisme werkt met de DropDownList helper.

Volgende