Sdílet prostřednictvím

Použití pomocné rutiny DropDownList s ASP.NET MVC

  • Článek

Rick Anderson

V tomto kurzu se naučíte základy práce s pomocníkem DropDownList a pomocníkem ListBox ve webové aplikaci ASP.NET MVC. Podle pokynů v tomto kurzu můžete použít Microsoft Visual Web Developer 2010 Express Service Pack 1, což je bezplatná verze sady Microsoft Visual Studio. Než začnete, ujistěte se, že jste nainstalovali níže uvedené požadavky. Všechny z nich můžete nainstalovat kliknutím na následující odkaz: Instalační program webové platformy. Případně můžete požadavky nainstalovat jednotlivě pomocí následujících odkazů:

Pokud používáte Visual Studio 2010 místo Sady Visual Web Developer 2010, nainstalujte požadované součásti kliknutím na následující odkaz: Požadavky sady Visual Studio 2010. V tomto kurzu se předpokládá, že jste dokončili kurz Úvod k ASP.NET MVC nebokurz ASP.NET MVC Music Store nebo jste obeznámeni s vývojem ASP.NET MVC. Tento kurz začíná upraveným projektem z kurzu ASP.NET MVC Music Store .

K tomuto tématu je k dispozici projekt Visual Web Developer s dokončeným zdrojovým kódem jazyka C#. Stáhnout.

Co vytvoříte

Vytvoříte metody akcí a zobrazení, které používají pomocnou rutinu DropDownList k výběru kategorie. Pomocí jQuery také přidáte dialogové okno vložit kategorii, které se dá použít, když je potřeba nová kategorie (například žánr nebo interpret). Níže je snímek obrazovky se zobrazením Vytvořit s odkazy na přidání nového žánru a přidání nového interpreta.

Obrázek pomocí pomocné rutiny rozevíracího seznamu

Dovednosti, které se naučíte

Naučíte se:

  • Jak pomocí pomocníka DropDownList vybrat data kategorií.
  • Postup přidání dialogového okna jQuery pro přidání nových kategorií

začínáme

Začněte stažením úvodního projektu pomocí následujícího odkazu Stáhnout. V Průzkumníku Windows klikněte pravým tlačítkem na soubor DDL_Starter.zip a vyberte vlastnosti. V dialogovém okně vlastnostiDDL_Starter.zip vyberte Odblokovat.

Obrázek dialogového okna Vlastnosti – výběr odblokování

Klikněte pravým tlačítkem na soubor DDL_Starter.zip a výběrem možnosti Extrahovat vše soubor rozbalte. Otevřete soubor StartMusicStore.sln pomocí sady Visual Web Developer 2010 Express (zkráceně Visual Web Developer nebo VWD) nebo Sady Visual Studio 2010.

Stisknutím kombinace kláves CTRL+F5 spusťte aplikaci a klikněte na odkaz Test .

Obrázek odkazu na test aplikace

Vyberte odkaz Vybrat kategorii filmu (jednoduchá). Zobrazí se seznam Výběr typu filmu s vybranou hodnotou Comedy.

Obrázek seznamu výběru typu filmu

Klikněte pravým tlačítkem do prohlížeče a vyberte zobrazit zdroj. Zobrazí se kód HTML stránky. Následující kód zobrazuje kód HTML pro element 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>

Uvidíte, že každá položka v seznamu výběrů má hodnotu (0 pro Akci, 1 pro Drama, 2 pro Komedii a 3 pro Sci-fi) a zobrazovaný název (Akce, Drama, Komedie a Sci-fi). Výše uvedený kód je standardní html pro výběrový seznam.

Změňte seznam výběrů na Drama a stiskněte tlačítko Odeslat . Adresa URL v prohlížeči je http://localhost:2468/Home/CategoryChosen?MovieType=1 a na stránce se zobrazí Vybraní uživatelé: 1.

Obrázek U R L v prohlížeči

Otevřete soubor Controllers\HomeController.cs a prozkoumejte metodu 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();

 }

Pomocník DropDownList použitý k vytvoření seznamu výběru HTML vyžaduje IEnumerable<SelectListItem >, a to buď explicitně, nebo implicitně. To znamená, že můžete předat IEnumerable<SelectListItem > explicitně do pomocníka DropDownList nebo můžete přidat IEnumerable<SelectListItem > do ViewBag pomocí stejného názvu SelectListItem jako vlastnosti modelu. Předání selectListItem implicitně a explicitně je popsáno v další části kurzu. Výše uvedený kód ukazuje nejjednodušší možný způsob, jak vytvořit IEnumerable<SelectListItem > a naplnit ho textem a hodnotami. Všimněte si, že ComedySelectListItem má vlastnost Selected nastavenou na true. To způsobí, že vykreslený seznam výběr zobrazí Comedy jako vybranou položku v seznamu.

Výše vytvořená položka IEnumerable<SelectListItem > je přidána do ViewBag s názvem MovieType. Tímto způsobem předáme IEnumerable<SelectListItem > implicitně pomocné rutině DropDownList zobrazenou níže.

Otevřete soubor Views\Home\SelectCategory.cshtml a prozkoumejte značky.

@{

    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>

}

Na třetím řádku nastavíme rozložení na Views/Shared/_Simple_Layout.cshtml, což je zjednodušená verze standardního souboru rozložení. Děláme to proto, abychom zobrazení a vykreslení HTML zachovali jednoduše.

V této ukázce neměníme stav aplikace, takže data odešleme pomocí HTTP GET, nikoli HTTP POST. Informace o volbě HTTP GET nebo POST najdete v části Rychlý kontrolní seznam pro W3C. Vzhledem k tomu, že neměníme aplikaci a neúčtováme formulář, použijeme přetížení Html.BeginForm , které nám umožňuje určit metodu akce, kontroler a metodu formuláře (HTTP POST nebo HTTP GET). Zobrazení obvykle obsahují přetížení Html.BeginForm , které nepřijímá žádné parametry. Verze no parametru ve výchozím nastavení odesílá data formuláře do verze POST stejné metody akce a kontroleru.

Následující řádek

@Html.DropDownList("MovieType")

předá řetězcový argument pomocné rutině DropDownList . Tento řetězec " MovieType" v našem příkladu dělá dvě věci:

  • Poskytuje klíč pro pomocníka DropDownList k vyhledání IEnumerable<SelectListItem > v ViewBag.
  • Je svázaná s elementem formuláře MovieType. Pokud je metoda odeslání HTTP GET, MovieType bude řetězec dotazu. Pokud je metoda odeslání HTTP POST, MovieType bude přidána do textu zprávy. Následující obrázek znázorňuje řetězec dotazu s hodnotou 1.

Obrázek řetězce dotazu s hodnotou 1

Následující kód ukazuje metodu CategoryChosen , do které byl formulář odeslán.

public ViewResult CategoryChosen(string MovieType) {

    ViewBag.messageString = MovieType;

    return View("Information");

}

Přejděte zpět na testovací stránku a vyberte odkaz HTML SelectList . Stránka HTML vykreslí prvek select podobný jednoduché ASP.NET stránce testu MVC. Klikněte pravým tlačítkem myši na okno prohlížeče a vyberte zobrazit zdroj. Značky HTML pro seznam výběrů jsou v podstatě identické. Otestujte stránku HTML, funguje jako metoda akce ASP.NET MVC a zobrazení, které jsme dříve testovali.

Vylepšení seznamu výběrů filmů pomocí výčtů

Pokud jsou kategorie ve vaší aplikaci pevné a nezmění se, můžete využít výčty, aby byl kód robustnější a snadněji rozšiřovatelný. Když přidáte novou kategorii, vygeneruje se správná hodnota kategorie. Vyhne se chybám kopírování a vkládání, když přidáte novou kategorii, ale zapomenete aktualizovat hodnotu kategorie.

Otevřete soubor Controllers\HomeController.cs a prozkoumejte následující kód:

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

}

VýčeteMovieCategories zachycuje čtyři typy filmů. Metoda SetViewBagMovieType vytvoří IEnumerable<SelectListItem > z výčtueMovieCategories a nastaví Selected vlastnost z parametruselectedMovie. Metoda SelectCategoryEnum akce používá stejné zobrazení jako SelectCategory metoda akce.

Přejděte na stránku Test a klikněte na Select Movie Category (Enum) odkaz. Tentokrát se místo hodnoty (čísla) zobrazí řetězec představující výčet.

Zaúčtování hodnot výčtu

Formuláře HTML se obvykle používají k odesílání dat na server. Následující kód ukazuje HTTP GET verze SelectCategoryEnumPost a HTTP POST metody.

public ActionResult SelectCategoryEnumPost() {

    SetViewBagMovieType(eMovieCategories.Comedy);

    return View();

}

[HttpPost]

public ActionResult SelectCategoryEnumPost(eMovieCategories MovieType) {

    ViewBag.messageString = MovieType.ToString() +

                            " val = " + (int)MovieType;

    return View("Information");

}

Předáním výčtu eMovieCategoriesPOST metodě můžeme extrahovat hodnotu výčtu i řetězec výčtu. Spusťte ukázku a přejděte na stránku Test. Klikněte na Select Movie Category(Enum Post) odkaz. Vyberte typ videa a stiskněte tlačítko Odeslat. Zobrazení zobrazuje hodnotu i název typu filmu.

Obrázek hodnoty a názvu typu filmu

Vytvoření prvku Multiple Section Select

Pomocník ListBox HTML vykresluje element HTML <select> s atributem multiple , který umožňuje uživatelům provádět více výběrů. Přejděte na odkaz Test a pak vyberte odkaz Vícenásobný výběr země . Vykreslené uživatelské rozhraní umožňuje vybrat více zemí. Na následujícím obrázku jsou vybrány Kanada a Čína.

Obrázek rozevíracího seznamu s více výběry

Zkoumání kódu MultiSelectCountry

V souboru Controllers\HomeController.cs zkontrolujte následující kód.

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

}

Metoda GetCountries vytvoří seznam zemí a předá ho konstruktoru MultiSelectList . Přetížení MultiSelectList konstruktoru použité ve GetCountries výše uvedené metodě má čtyři parametry:

public MultiSelectList(

    IEnumerable items,

    string dataValueField,

    string dataTextField,

    IEnumerable selectedValues

)
  1. items: IEnumerable obsahující položky v seznamu. Ve výše uvedeném příkladu je to seznam zemí.
  2. dataValueField: Název vlastnosti v seznamu IEnumerable , která obsahuje hodnotu. Ve výše uvedeném příkladu je vlastnost ID .
  3. dataTextField: Název vlastnosti v seznamu IEnumerable obsahující informace, které se mají zobrazit. Ve výše uvedeném příkladu je vlastnost name .
  4. selectedValues: Seznam vybraných hodnot.

Ve výše uvedeném příkladu MultiSelectCountry metoda předá null hodnotu pro vybrané země, takže při zobrazení uživatelského rozhraní nejsou vybrány žádné země. Následující kód ukazuje kód Razor použitý k vykreslení MultiSelectCountry zobrazení.

@{

    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>

}

Pomocná metoda HTML ListBox použitá výše přebírají dva parametry, název vlastnosti pro vazbu modelu a MultiSelectList obsahující možnosti a hodnoty výběru. Výše ViewBag.YouSelected uvedený kód slouží k zobrazení hodnot zemí, které jste vybrali při odesílání formuláře. Prozkoumejte přetížení MultiSelectCountry HTTP POST metody .

[HttpPost]

public ActionResult MultiSelectCountry(FormCollection form) {

    ViewBag.YouSelected = form["Countries"];

    string selectedValues = form["Countries"];

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

    return View();

}

Dynamická ViewBag.YouSelected vlastnost obsahuje vybrané země získané pro Countries položku v kolekci formulářů. V této verzi se metodě GetCountries předává seznam vybraných zemí, takže při MultiSelectCountry zobrazení zobrazení jsou vybrané země vybrány v uživatelském rozhraní.

Vytvoření přátelského prvku Select pomocí modulu plug-in Harvest Chosen jQuery

Modul plug-in Harvest Chosen jQuery lze přidat do elementu HTML <select> a vytvořit tak uživatelsky přívětivé uživatelské rozhraní. Následující obrázky znázorňují modul plug-in Harvest Chosen jQuery se zobrazením MultiSelectCountry .

Obrázek modulu plug-in Harvest Chosen j Query

Na dvou obrázcích níže je vybrána možnost Kanada .

Obrázek vybrané Kanady

Obrázek vybrané Kanady s X, které se má odebrat

Na obrázku výše je vybrána možnost Kanada a obsahuje x , na které můžete kliknout a výběr odebrat. Následující obrázek ukazuje vybranou Kanadu, Čínu a Japonsko.

Obrázek vybraných možností Kanada Čína a Japonsko

Připojení Sklizeň Chosen jQuery Plugin

Následující část se snadněji sleduje, pokud máte nějaké zkušenosti s jQuery. Pokud jste jQuery ještě nikdy nepoužívali, můžete vyzkoušet některý z následujících kurzů jQuery.

Modul plug-in Chosen je součástí úvodních a dokončených ukázkových projektů, které doprovázejí tento kurz. Pro účely tohoto kurzu stačí použít jQuery a připojit ho k uživatelskému rozhraní. Pokud chcete použít modul plug-in Harvest Chosen jQuery v projektu ASP.NET MVC, musíte:

  1. Stáhněte si modul plug-in Chosen z GitHubu. Tento krok byl proveden za vás.
  2. Přidejte složku Chosen do projektu ASP.NET MVC. Přidejte prostředky ze zvoleného modulu plug-in, který jste stáhli v předchozím kroku, do složky Chosen. Tento krok byl proveden za vás.
  3. Připojte vybraný modul plug-in k pomocné rutině HTML DropDownList nebo ListBox .

Připojení vybraného modulu plug-in k zobrazení MultiSelectCountry

Otevřete soubor Views\Home\MultiSelectCountry.cshtml a přidejte htmlAttributes parametr do Html.ListBox. Parametr, který přidáte, obsahuje název třídy pro select list(@class = "chzn-select"). Dokončený kód je zobrazený níže:

<div class="editor-field">

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

     , new

     {

         @class = "chzn-select",

         data_placeholder = "Choose  Countries..."

     }

    )

</div>

Ve výše uvedeném kódu přidáváme atribut HTML a hodnotu class = "chzn-select"atributu . Znak @ předcházející třídě nemá nic společného s modulem zobrazení Razor. class je klíčové slovo jazyka C#. Klíčová slova jazyka C# nelze použít jako identifikátory, pokud jako předponu neobsahují znak @. Ve výše uvedeném příkladu je platný identifikátor, ale třída není, @class protože třída je klíčové slovo.

Přidejte odkazy na soubory Chosen/chosen.jquery.js a Chosen/chosen.css . Chosen/chosen.jquery.js a implementuje modul plug-in Chosen funkčně. Soubor Chosen/chosen.css poskytuje styl. Přidejte tyto odkazy na konec souboru Views\Home\MultiSelectCountry.cshtml . Následující kód ukazuje, jak odkazovat na modul plug-in Chosen.

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

Aktivujte modul plug-in Chosen pomocí názvu třídy použitého v kódu Html.ListBox . Ve výše uvedeném příkladu je chzn-selectnázev třídy . Do dolní části souboru zobrazení Views\Home\MultiSelectCountry.cshtml přidejte následující řádek. Tento řádek aktivuje modul plug-in Chosen.

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

Následující řádek obsahuje syntaxi pro volání funkce jQuery ready, která vybere element DOM s názvem chzn-selecttřídy .

$(".chzn-select")

Zabalená sada vrácená z výše uvedeného volání pak použije zvolenou metodu (.chosen();), která připojí vybraný modul plug-in.

Následující kód ukazuje dokončený soubor zobrazení Views\Home\MultiSelectCountry.cshtml .

@{

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

Spusťte aplikaci a přejděte do MultiSelectCountry zobrazení. Zkuste přidat a odstranit země. Uvedený ukázkový soubor ke stažení obsahuje také metodu MultiCountryVM a zobrazení, které implementuje funkci MultiSelectCountry pomocí modelu zobrazení místo ViewBag.

V další části uvidíte, jak funguje mechanismus generování uživatelského rozhraní ASP.NET MVC s pomocnou rutinou DropDownList .

Další