Dela via

Använda DropDownList-hjälparen med ASP.NET MVC

av Rick Anderson

I den här handledningen lär du dig grunderna i att arbeta med hjälpfunktionen DropDownList och ListBox-hjälpfunktionen i en ASP.NET MVC-webbapplikation. Du kan använda Microsoft Visual Web Developer 2010 Express Service Pack 1, som är en kostnadsfri version av Microsoft Visual Studio för att följa självstudien. Innan du börjar kontrollerar du att du har installerat de förutsättningar som anges nedan. Du kan installera alla genom att klicka på följande länk: Web Platform Installer. Du kan också installera förhandskraven individuellt med hjälp av följande länkar:

Om du använder Visual Studio 2010 i stället för Visual Web Developer 2010 installerar du kraven genom att klicka på följande länk: Krav för Visual Studio 2010. Den här självstudien förutsätter att du har slutfört självstudien Introduktion till ASP.NET MVC eller självstudien ASP.NET MVC Music Store eller om du är bekant med ASP.NET MVC-utveckling. Den här självstudien börjar med ett ändrat projekt från självstudien ASP.NET MVC Music Store.

Ett Visual Web Developer-projekt med fullständig källkod från C#-självstudiekursen finns tillgängligt som komplement till detta ämne. Ladda ned.

Vad du kommer att bygga

Du kommer att skapa åtgärdsmetoder och vyer som använder hjälpverktyget Dropdown-meny för att välja en kategori. Du kommer också att använda jQuery för att lägga till en dialogruta för infoga kategori som kan användas när en ny kategori (till exempel genre eller artist) behövs. Nedan visas en skärmbild av vyn Skapa som visar länkar för att lägga till en ny genre och lägga till en ny artist.

Bild med hjälp av listrutan

Färdigheter som du lär dig

Det här lär du dig:

  • Så här använder du hjälpverktyget DropDownList för att välja kategoridata.
  • Så här lägger du till en jQuery dialogruta för att lägga till nya kategorier.

Komma igång

Börja med att ladda ned startprojektet med följande länk Ladda ned. Högerklicka på filen DDL_Starter.zip i Utforskaren och välj egenskaper. I dialogrutan DDL_Starter.zip Egenskaper väljer du Avblockera.

Bild av dialogrutan för egenskaper, välj avblockera

Högerklicka på filen DDL_Starter.zip och välj Extrahera alla för att packa upp filen. Öppna filen StartMusicStore.sln med Visual Web Developer 2010 Express ("Visual Web Developer" eller "VWD" för kort) eller Visual Studio 2010.

Tryck på CTRL+F5 för att köra programmet och klicka på länken Test.

Bild av programtestlänken

Välj länken Välj filmkategori (enkel). Listan Välj filmtyp visas med Comedy som valt värde.

Bild av filmtyp välj lista

Högerklicka i webbläsaren och välj visa källa. HTML-koden för sidan visas. Koden nedan visar HTML för select-elementet.

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

Du kan se att varje objekt i urvalslistan har ett värde (0 för Action, 1 för Drama, 2 för Comedy och 3 för Science Fiction) och ett visningsnamn (Action, Drama, Comedy och Science Fiction). Koden ovan är standard-HTML för en urvalslista.

Ändra välj listan till Drama och tryck på knappen Skicka. URL:en i webbläsaren är http://localhost:2468/Home/CategoryChosen?MovieType=1 och sidan visar Du har valt: 1.

Bild av U R L i webbläsare

Öppna filen Controllers\HomeController.cs och granska metoden 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();

 }

DropDownList-helpern som används för att skapa en HTML-urvalslista kräver en IEnumerable<SelectListItem >, antingen explicit eller implicit. Du kan alltså skicka IEnumerable<SelectListItem > explicit till hjälpverktyget DropDownList eller lägga till IEnumerable<SelectListItem > till ViewBag- med samma namn för SelectListItem som modellegenskapen. Att skicka in SelectListItem- implicit och explicit tas upp i nästa del av handledningen. Koden ovan visar det enklaste möjliga sättet att skapa en IEnumerable<SelectListItem > och fylla den med text och värden. Observera att ComedySelectListItem har egenskapen Selected satt till true; detta kommer att göra att den renderade urvalslistan visar Comedy som det valda objektet i listan.

IEnumerable<SelectListItem > som skapades ovan läggs till i ViewBag med namnet MovieType. Så här skickar vi IEnumerable<SelectListItem > implicit till hjälpverktyget DropDownList som visas nedan.

Öppna filen Views\Home\SelectCategory.cshtml och granska markeringen.

@{

    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>

}

På den tredje raden anger vi layouten till Views/Shared/_Simple_Layout.cshtml, vilket är en förenklad version av standardlayoutfilen. Vi gör detta för att hålla visningen och renderad HTML enkel.

I det här exemplet ändrar vi inte programmets tillstånd, så vi skickar data med hjälp av en HTTP GET-, inte HTTP POST-. Se W3C-avsnittet snabbchecklista för att välja HTTP GET- eller POST-. Eftersom vi inte ändrar programmet och publicerar formuläret använder vi Html.BeginForm överlagring som gör att vi kan ange åtgärdsmetod, kontrollant och formulärmetod (HTTP POST- eller HTTP GET-). Vyer innehåller vanligtvis Html.BeginForm överbelastning som inte tar några parametrar. Den version som saknar parametrar har standardinställningen att skicka formulärdata till POST-versionen av samma åtgärdsmetod och kontroll.

Följande rad

@Html.DropDownList("MovieType")

skickar ett strängargument till hjälpverktyget DropDownList. Den här strängen, "MovieType" i vårt exempel, gör två saker:

  • Den innehåller nyckeln för DropDownList hjälpare för att hitta en IEnumerable<SelectListItem > i ViewBag.
  • Det är databundet till MovieType-formulärelementet. Om sändningsmetoden är HTTP GET-är MovieType en frågesträng. Om sändningsmetoden är HTTP POST-läggs MovieType till i meddelandetexten. Följande bild visar frågesträngen med värdet 1.

Bild av frågesträng med värdet 1

Följande kod visar den CategoryChosen metod som formuläret skickades till.

public ViewResult CategoryChosen(string MovieType) {

    ViewBag.messageString = MovieType;

    return View("Information");

}

Gå tillbaka till testsidan och välj länken HTML SelectList. HTML-sidan återger ett select-element som liknar den enkla ASP.NET MVC-testsidan. Högerklicka på webbläsarfönstret och välj visa källa. HTML-koden för urvalslistan är i stort sett identisk. Testa HTML-sidan. Den fungerar som åtgärdsmetoden och vyn i ASP.NET MVC, som vi testade tidigare.

Förbättring av filmvalslistan med enumerationer

Om kategorierna i ditt program är fasta och inte ändras kan du dra nytta av uppräkningar för att göra koden mer robust och enklare att utöka. När du lägger till en ny kategori genereras rätt kategorivärde. Undviker kopierings- och inklistringsfel när du lägger till en ny kategori men glömmer att uppdatera kategorivärdet.

Öppna filen Controllers\HomeController.cs och granska följande kod:

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

}

enumeMovieCategories representerar de fyra filmgenrerna. Metoden SetViewBagMovieType skapar IEnumerable<SelectListItem > från eMovieCategoriesuppräkningoch anger egenskapen Selected baserat på parametern selectedMovie. SelectCategoryEnum-åtgärdsmetoden använder samma vy som SelectCategory-åtgärdsmetoden.

Gå till testsidan och klicka på länken Select Movie Category (Enum). Den här gången, i stället för att ett värde (tal) visas, visas en sträng som representerar uppräkningen.

Publicera enumerationsvärden

HTML-formulär används vanligtvis för att publicera data till servern. Följande kod visar HTTP GET och HTTP POST versioner av metoden SelectCategoryEnumPost.

public ActionResult SelectCategoryEnumPost() {

    SetViewBagMovieType(eMovieCategories.Comedy);

    return View();

}

[HttpPost]

public ActionResult SelectCategoryEnumPost(eMovieCategories MovieType) {

    ViewBag.messageString = MovieType.ToString() +

                            " val = " + (int)MovieType;

    return View("Information");

}

Genom att överföra en eMovieCategories enum till metod POST kan vi extrahera både enumvärdet och enumsträngen. Kör exemplet och gå till testsidan. Klicka på länken Select Movie Category(Enum Post). Välj en filmtyp och tryck sedan på knappen Skicka. Skärmen visar både värdet och namnet på filmtypen.

Bild av värdet och namnet på filmtypen

Skapa ett select-element med flera sektioner

ListBox- HTML-hjälpverktyget återger HTML-<select>-elementet med attributet multiple, vilket gör att användarna kan göra flera val. Gå till länken Test och välj sedan länken Flera val av land. Med det renderade användargränssnittet kan du välja flera länder. I bilden nedan väljs Kanada och Kina.

Bild av flera markeringar i en rullgardinsmeny

Granska MultiSelectCountry-koden

Granska följande kod från filen 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();

}

Metoden GetCountries skapar en lista över länder och skickar den sedan till MultiSelectList konstruktorn. Den konstruktoröverlagring MultiSelectList som används i metoden GetCountries ovan tar fyra parametrar:

public MultiSelectList(

    IEnumerable items,

    string dataValueField,

    string dataTextField,

    IEnumerable selectedValues

)
  1. objekt: En IEnumerable som innehåller objekten i listan. I exemplet ovan: listan över länder.
  2. dataValueField: Namnet på egenskapen i listan IEnumerable som innehåller värdet. I exemplet ovan är ID egenskapen.
  3. dataTextField: Namnet på egenskapen i listan IEnumerable som innehåller den information som ska visas. I exemplet ovan är egenskapen name.
  4. selectedValues: Listan över valda värden.

I exemplet ovan skickar metoden MultiSelectCountry ett null värde för de valda länderna, så inga länder väljs när användargränssnittet visas. Följande kod visar Razor-markering som används för att återge vyn MultiSelectCountry.

@{

    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>

}

HTML-hjälpen ListBox- metod som används ovan tar två parametrar, namnet på egenskapen för modellbindningen och MultiSelectList- som innehåller alternativen och värdena. Den ViewBag.YouSelected koden ovan används för att visa värdena för de länder som du valde när du skickar formuläret. Granska HTTP POST-överbelastningen av MultiSelectCountry-metoden.

[HttpPost]

public ActionResult MultiSelectCountry(FormCollection form) {

    ViewBag.YouSelected = form["Countries"];

    string selectedValues = form["Countries"];

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

    return View();

}

Den ViewBag.YouSelected dynamiska egenskapen innehåller de valda länderna som hämtats för posten Countries i formulärsamlingen. I den här versionen skickas metoden GetCountries en lista över de valda länderna, så när den MultiSelectCountry vyn visas väljs de valda länderna i användargränssnittet.

Göra ett Select-element användarvänligt med det valda jQuery-plugin-programmet Harvest

Plugin-programmet Harvest Selected jQuery kan läggas till i en HTML-<välja> element för att skapa ett användarvänligt användargränssnitt. Bilderna nedan visar Harvest och Chosen jQuery-pluginet med MultiSelectCountry vy.

bild på skörd utvald j Query plugin

I de två bilderna nedan väljs Canada.

Bild av Kanada vald

Bild av Kanada markerad med X för att ta bort

I bilden ovan är Kanada valt och den innehåller ett element x som du kan klicka på för att ta bort markeringen. Bilden nedan visar Kanada, Kina och Japan valda.

Bild av Kanada Kina och Japan valt

Koppla in Chosen jQuery-pluginen Harvest

Följande avsnitt är lättare att följa om du har erfarenhet av jQuery. Om du aldrig har använt jQuery tidigare kanske du vill prova någon av följande jQuery-självstudier.

Plugin-programmet 'Chosen' ingår i start- och slutförda exempelprojekt som medföljer denna handledning. I denna handledning behöver du bara använda jQuery för att koppla det till användargränssnittet. Om du vill använda plugin-programmet Harvest Selected jQuery i ett ASP.NET MVC-projekt måste du:

  1. Ladda ned valt plugin-program från GitHub. Det här steget har gjorts åt dig.
  2. Lägg till mappen Vald i ditt ASP.NET MVC-projekt. ** Lägg till resurserna från Chosen-pluginet som du laddade ner i föregående steg till Chosen-mappen. Det här steget har gjorts åt dig.
  3. Anslut det valda pluginet till DropDownList eller ListBox HTML helper.

Ansluta det valda plugin-programmet till vyn MultiSelectCountry.

Öppna filen Views\Home\MultiSelectCountry.cshtml och lägg till en htmlAttributes-parameter i Html.ListBox. Parametern som du ska lägga till innehåller ett klassnamn för urvalslistan(@class = "chzn-select"). Den färdiga koden visas nedan:

<div class="editor-field">

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

     , new

     {

         @class = "chzn-select",

         data_placeholder = "Choose  Countries..."

     }

    )

</div>

I koden ovan lägger vi till HTML-attributet och attributvärdet class = "chzn-select". @-symbolen före klassen har inget att göra med "Razor"-vymotorn. class är ett C#-nyckelord. C#-nyckelord kan inte användas som identifierare om de inte innehåller @ som prefix. I exemplet ovan är @class en giltig identifierare, men klass är inte giltig eftersom klass är ett nyckelord.

Lägg till referenser till filerna Selected/chosen.jquery.js och Selected/chosen.css. Chosen/chosen.jquery.js och implementerar funktionaliteten i Chosen-plugin. Filen Chosen/chosen.css innehåller formateringen. Lägg till dessa referenser längst ned i filen Views\Home\MultiSelectCountry.cshtml. Följande kod visar hur du refererar till det valda plugin-programmet.

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

Aktivera plugin-programmet Valda genom att använda klassnamnet som används i Html.ListBox-kod. I exemplet ovan är klassnamnet chzn-select. Lägg till följande rad längst ned i Views\Home\MultiSelectCountry.cshtml vyfil. Den här raden aktiverar det valda plugin-programmet.

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

Följande rad är syntaxen för att anropa funktionen jQuery ready, som väljer DOM-elementet med klassnamnet chzn-select.

$(".chzn-select")

Den omslutna uppsättningen som returneras från ovanstående anrop tillämpar sedan den valda metoden (.chosen();), som ansluter det valda plugin-programmet.

Följande kod visar den slutförda Views\Home\MultiSelectCountry.cshtml vyfilen.

@{

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

Kör programmet och navigera till vyn MultiSelectCountry. Prova att lägga till och ta bort länder. Den angivna exempelnedladdningen innehåller också en MultiCountryVM-metod och vy som implementerar MultiSelectCountry-funktionen med hjälp av en vymodell istället för en ViewBag-.

I nästa avsnitt ser du hur ASP.NET MVC-stödmekanismen fungerar med hjälpverktyget DropDownList.

Nästa

  • Last updated on