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ými rutinami DropDownList a pomocné rutiny ListBox ve webové aplikaci ASP.NET MVC. Můžete použít Microsoft Visual Web Developer 2010 Express Service Pack 1, což je bezplatná verze sady Microsoft Visual Studio pro sledování kurzu. 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 jednotlivé požadavky nainstalovat pomocí následujících odkazů:

Pokud používáte Sadu Visual Studio 2010 místo visual web developeru 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 úvodní kurz 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 kurzem zdrojový kód jazyka C#. Stažení.

Co budete vytvářet

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

Obrázek s pomocnou rutinou rozevíracího seznamu

Dovednosti, které se naučíte

Tady je seznamte s následujícími informacemi:

  • Jak pomocí pomocné rutiny DropDownList vybrat data kategorií.
  • Jak přidat dialogové okno jQuery pro přidání nových kategorií

Začínáme

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

Obrázek dialogového okna Vlastností vyberte odblokovat

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

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

Obrázek odkazu testu aplikace

Vyberte odkaz Vybrat kategorii videa (Jednoduchá). Zobrazí se seznam Pro výběr typu videa s vybranou hodnotou Comedy.

Obrázek seznamu pro výběr typu videa

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

Vidíte, že každá položka v seznamu výběru má hodnotu (0 pro Akci, 1 pro Drama, 2 pro Komedy a 3 pro sci-fi) a zobrazovaný název (Action, Drama, Komedy a Science Fi). Výše uvedený kód je standardním kódem HTML pro výběrový seznam.

Změňte seznam pro 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 stránka zobrazí vybranou: 1.

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

Otevřete soubor Controllers\HomeController.cs a prozkoumejte metoduSelectCategory.

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á rutina DropDownList použitá k vytvoření seznamu výběru HTML vyžaduje IEnumerable<SelectListItem >, buď explicitně, nebo implicitně. To znamená, že můžete předat IEnumerable<SelectListItem > explicitně pomocné rutině DropDownList nebo můžete přidat IEnumerable<SelectListItem >do ViewBag pomocí stejného názvu pro SelectListItem jako vlastnost 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á vybranou vlastnost nastavenou na hodnotu true. To způsobí, že vykreslený seznam výběru zobrazí Comedy jako vybranou položku v seznamu.

Položka IEnumerable<SelectListItem > vytvořená výše je přidána do ViewBag s názvem MovieType. Tímto způsobem předáme IEnumerable<SelectListItem >implicitně pomocné rutině DropDownList zobrazené 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, aby zobrazení a vykreslení HTML bylo jednoduché.

V této ukázce neměníme stav aplikace, takže data odešleme pomocí http GET, nikoli HTTP POST. Podívejte se na část Rychlá kontrola W3C pro výběr HTTP GET nebo POST. Vzhledem k tomu, že neměníme aplikaci a publikujeme formulář, používáme html.BeginForm přetížení, které nám umožňuje zadat metodu akce, kontroler a metodu formuláře (HTTP POST nebo HTTP GET). Zobrazení obvykle obsahují html.BeginForm přetížení, které nepřijímá žádné parametry. Verze žádného 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íč pomocné rutiny DropDownList najít IEnumerable<SelectListItem > v ViewBag.
  • Jedná se o data svázaná s elementem formuláře MovieType. Pokud je metoda odeslání HTTP GET, MovieType bude to řetězec dotazu. Pokud je metoda odeslání HTTP POST, MovieType přidá se do textu zprávy. Následující obrázek ukazuje ř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 výběru podobný jednoduché ASP.NET MVC testovací stránce. Klikněte pravým tlačítkem na okno prohlížeče a vyberte zdroj zobrazení. Kód HTML pro výběr seznamu je v podstatě stejný. Otestujte stránku HTML, funguje stejně jako metoda akce ASP.NET MVC a prohlédněte si, co jsme předtím otestovali.

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

Pokud jsou kategorie v aplikaci pevné a nezmění se, můžete využít výčty, aby byl kód robustnější a jednodušší rozšířit. Když přidáte novou kategorii, vygeneruje se správná hodnota kategorie. Vyhne se chybám kopírování a vkládání při přidání nové kategorie, 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");

}

eMovieCategories Výčet zachycuje čtyři typy filmů. Metoda SetViewBagMovieType vytvoří IEnumerable<SelectListItem > zeMovieCategories výčtuSelected a nastaví 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ýčt.

Účtování hodnot výčtu

Formuláře HTML se obvykle používají k publikování dat na server. Následující kód ukazuje HTTP GET a HTTP POST verze SelectCategoryEnumPost 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 eMovieCategories výčtu metodě POST 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 videa.

Obrázek hodnoty a názvu typu filmu

Vytvoření prvku Select více oddílů

Pomocný rutina HTML ListBox 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 Pro 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

Zkontrolujte následující kód ze souboru 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();

}

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

public MultiSelectList(

    IEnumerable items,

    string dataValueField,

    string dataTextField,

    IEnumerable selectedValues

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

V předchozí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>

}

Metoda Pomocné rutiny HTML ListBox použité výše mají dva parametry, název vlastnosti pro model bind a MultiSelectList obsahující možnosti a hodnoty select. Výše ViewBag.YouSelected uvedený kód slouží k zobrazení hodnot zemí, které jste vybrali při odeslá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 metoda GetCountries se předává seznam vybraných zemí, takže při MultiSelectCountry zobrazení jsou vybrané země vybrány v uživatelském rozhraní.

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

Modul plug-in Harvest Chosen jQuery lze přidat do prvku pro výběr> HTML <a vytvořit uživatelsky přívětivé uživatelské rozhraní. Následující obrázky ukazují modul plug-in Harvest Chosen jQuery se zobrazením MultiSelectCountry .

Obrázek modulu plug-in Harvest Chosen j Query

Na následujících dvou obrázcích je vybrána Kanada .

Obrázek vybrané Kanady

Obrázek Kanady vybrané pomocí X k odebrání

Na obrázku výše je vybrána Kanada a obsahuje x , na který můžete kliknout a výběr odebrat. Na následujícím obrázku je vybraná Kanada, Čína a Japonsko.

Obrázek vybrané Kanady Čína a Japonsko

Připojení modulu plug-in Harvest Chosen jQuery

Pokud máte zkušenosti s jQuery, je následující část jednodušší. Pokud jste jQuery ještě nikdy nepoužívali, můžete vyzkoušet některý z následujících kurzů jQuery.

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

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

Připojení zvoleného modulu plug-in do zobrazení MultiSelectCountry

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

<div class="editor-field">

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

     , new

     {

         @class = "chzn-select",

         data_placeholder = "Choose  Countries..."

     }

    )

</div>

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

Přidejte odkazy na vybrané/chosen.jquery.js a vybrané/chosen.css soubory. Zvolený /chosen.jquery.js a implementuje funkčně zvolený modul plug-in. Vybraný /chosen.css soubor poskytuje styl. Tyto odkazy přidejte do dolní části souboru Views\Home\MultiSelectCountry.cshtml . Následující kód ukazuje, jak odkazovat na vybraný modul plug-in.

<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 vybraný modul plug-in pomocí názvu třídy použitého v kódu Html.ListBox . V předchozí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 vybraný modul plug-in.

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

Následující řádek je syntaxe volání funkce jQuery ready, která vybere prvek 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ě. Poskytnutý ukázkový soubor obsahuje také metodu MultiCountryVM a zobrazení, které implementuje funkce MultiSelectCountry pomocí modelu zobrazení místo ViewBag.

V další části se dozvíte, jak funguje mechanismus generování ASP.NET MVC s pomocným pomocníkem DropDownList .

Další