Używanie pomocnika DropDownList we wzorcu ASP.NET MVC

Autor Rick Anderson

W tym samouczku przedstawiono podstawowe informacje dotyczące pracy z pomocnikiem DropDownList i pomocnika ListBox w aplikacji sieci Web ASP.NET MVC. Możesz użyć programu Microsoft Visual Web Developer 2010 Express z dodatkiem Service Pack 1, który jest bezpłatną wersją Microsoft Visual Studio, aby postępować zgodnie z samouczkiem. Przed rozpoczęciem upewnij się, że zainstalowano wymagania wstępne wymienione poniżej. Wszystkie z nich można zainstalować, klikając następujące łącze: Instalator platformy sieci Web. Alternatywnie możesz zainstalować wstępnie wymagane składniki, korzystając z następujących linków:

Jeśli używasz programu Visual Studio 2010 zamiast programu Visual Web Developer 2010, Zainstaluj wymagania wstępne, klikając następujące łącze: wymagania wstępne programu Visual Studio 2010. W tym samouczku przyjęto założenie, że zakończono wprowadzenie do samouczka ASP.NET MVC lub samouczkaASP.NET MVC Music Ten samouczek rozpoczyna się od zmodyfikowanego projektu z samouczka dotyczącego sklepu ASP.NET MVC Music . Możesz pobrać projekt początkowy z następującym linkiem, aby pobrać C# wersję.

Projekt Visual Web Developer z kompletnym kodem źródłowym C# samouczka jest dostępny do tego tematu. Pobierz.

Co będziesz kompilować

Utworzysz metody akcji i widoki, które używają pomocnika DropDownList , aby wybrać kategorię. Za pomocą programu jQuery można także dodać okno dialogowe Wstaw kategorię, które może być używane, gdy jest wymagana Nowa kategoria (na przykład gatunek lub wykonawca). Poniżej znajduje się zrzut ekranu przedstawiający widok tworzenie, który zawiera linki umożliwiające dodanie nowego gatunku i dodanie nowego wykonawcy.

Posiadane umiejętności

Oto, co uzyskasz:

  • Jak używać pomocnika DropDownList do wybierania danych kategorii.
  • Jak dodać nowe kategorie przy użyciu okna dialogowego jQuery .

Wprowadzenie

Zacznij od pobrania początkowego projektu z następującym łączem, Pobierz. W Eksploratorze Windows kliknij prawym przyciskiem myszy plik DDL_Starter. zip , a następnie wybierz polecenie Właściwości. W oknie dialogowym właściwości języka DDL_Starter. zip wybierz opcję Odblokuj.

Kliknij prawym przyciskiem myszy plik DDL_Starter. zip, a następnie wybierz pozycję Wyodrębnij wszystko , aby rozpakować plik. Otwórz plik StartMusicStore. sln w programie Visual web developer 2010 Express ("Visual Web Developer" lub "pliku VWD" for Short) lub Visual Studio 2010.

Naciśnij klawisze CTRL + F5, aby uruchomić aplikację, a następnie kliknij link testowy .

Wybierz łącze Wybierz kategorię filmu (prosty) . Zostanie wyświetlona lista wyboru typu filmu z komedia wybraną wartością.

Kliknij prawym przyciskiem myszy w przeglądarce i wybierz polecenie Wyświetl źródło. Zostanie wyświetlony kod HTML strony. Poniższy kod pokazuje kod HTML dla elementu 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>

Można zobaczyć, że każdy element na liście wyboru ma wartość (0 dla akcji, 1 dla dramat, 2 dla komedia i 3 dla fikcyjnej nauki) i nazwę wyświetlaną (Action, dramat, komedia i fikcja). Powyżej znajduje się kod standardowy HTML dla listy wyboru.

Zmień listę wyboru na dramat i naciśnij przycisk Prześlij . Adres URL w przeglądarce jest http://localhost:2468/Home/CategoryChosen?MovieType=1 i zostanie wyświetlona strona : 1.

Otwórz plik Controllers\HomeController.cs i Przeanalizuj metodę 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();

 }

Pomocnik DropDownList użyty do utworzenia listy wyboru HTML wymaga, aby interfejs IEnumerable<SelectListItem > , jawnie lub niejawnie. Oznacza to, że można przekazać interfejs ienumerable<SelectListItem > jawnie do pomocnika DropDownList lub dodać >interfejsu IEnumerable<SelectListItem do ViewBag przy użyciu tej samej nazwy dla SelectListItem jako właściwości modelu. Przekazywanie w SelectListItem niejawnie i jawnie jest omówione w następnej części samouczka. W powyższym kodzie przedstawiono najprostszy możliwy sposób tworzenia interfejsu IEnumerable<SelectListItem > i wypełnienia go tekstem i wartościami. Zwróć uwagę na to, że ComedySelectListItem ma ustawioną wartość true. spowoduje to, że renderowanej listy wyboru pokaże komedia jako wybrany element na liście.

Utworzone powyżej >IEnumerable<SelectListItem są dodawane do ViewBag z nazwą movietype. Jest to sposób, w jaki przekazujemy interfejs IEnumerable<SelectListItem > niejawnie do pomocnika DropDownList pokazanego poniżej.

Otwórz plik Views\Home\SelectCategory.cshtml i zapoznaj się z adiustacją.

@{

    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>

}

W trzecim wierszu ustawimy układ na widoki/Shared/_prostego_Layout. cshtml, który jest uproszczoną wersją standardowego pliku układu. W ten sposób można zachować prostotę wyświetlania i renderowanego kodu HTML.

W tym przykładzie nie zmieniamy stanu aplikacji, więc wyślemy dane przy użyciu polecenia http Get, a nie http post. Zapoznaj się z sekcją W3C z szybką listą kontrolną dotyczącą wybierania HTTP GET lub post. Ponieważ nie zmieniamy aplikacji i nie ogłaszamy formularza, używamy przeciążenia HTML. BeginForm , które umożliwia określenie metody akcji, kontrolera i metody formularza (http post lub http Get). Zazwyczaj widoki zawierają Przeciążenie HTML. BeginForm , które nie przyjmuje żadnych parametrów. Wersja parametru nie jest wartością domyślną do publikowania danych formularza w wersji POST tej samej metody i kontrolera akcji.

Poniższy wiersz

@Html.DropDownList("MovieType")

przekazuje argument ciągu do pomocnika DropDownList . Ten ciąg "Movietype" w naszym przykładzie ma dwie rzeczy:

  • Udostępnia klucz pomocnika DropDownList , aby znaleźć interfejs IEnumerable<SelectListItem > w ViewBag.
  • Jest on powiązany z danymi do elementu form. Jeśli metoda przesyłania to http Get, MovieType będzie ciągiem zapytania. Jeśli metoda przesyłania jest wpisem http post, MovieType zostanie dodana w treści komunikatu. Na poniższej ilustracji przedstawiono ciąg zapytania z wartością 1.

Poniższy kod przedstawia metodę CategoryChosen, do której formularz został przesłany.

public ViewResult CategoryChosen(string MovieType) {

    ViewBag.messageString = MovieType;

    return View("Information");

}

Przejdź z powrotem do strony test i wybierz łącze HTML SelectList . Strona HTML renderuje element SELECT podobny do strony testowej ASP.NET MVC. Kliknij prawym przyciskiem myszy okno przeglądarki i wybierz polecenie Wyświetl źródło. Znaczniki HTML dla listy wyboru są zasadniczo identyczne. Przetestuj stronę HTML, która działa jak Metoda akcji ASP.NET MVC i sprawdź, że wcześniej przetestowano.

Ulepszanie listy wyboru filmu z wyliczeniami

Jeśli kategorie w aplikacji są naprawione i nie zmienią się, można skorzystać z wyliczeń, aby kod był bardziej niezawodny i łatwiejszy do rozbudowania. Po dodaniu nowej kategorii jest generowana poprawna wartość kategorii. Pozwala to uniknąć błędów kopiowania i wklejania po dodaniu nowej kategorii, ale zapomnieniu o zaktualizowaniu wartości kategorii.

Otwórz plik Controllers\HomeController.cs i Przeanalizuj następujący 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");

}

Wyliczenie eMovieCategories przechwytuje cztery typy filmów. Metoda SetViewBagMovieType tworzy >IEnumerable<SelectListItem z wyliczeniaeMovieCategoriesi ustawia właściwość Selected z parametru selectedMovie. Metoda akcji SelectCategoryEnum używa tego samego widoku co Metoda akcji SelectCategory.

Przejdź do strony test i kliknij łącze Select Movie Category (Enum). Tym razem, zamiast wyświetlanej wartości (liczby), wyświetlany jest ciąg reprezentujący Wyliczenie.

Księgowanie wartości wyliczeniowych

Formularze HTML są zwykle używane do publikowania danych na serwerze. Poniższy kod przedstawia HTTP GET i HTTP POST wersje metody 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");

}

Przekazując eMovieCategories Wyliczenie do metody POST, możemy wyodrębnić zarówno wartość enum, jak i ciąg wyliczeniowy. Uruchom przykład i przejdź do strony test. Kliknij link Select Movie Category(Enum Post). Wybierz typ filmu, a następnie naciśnij przycisk Prześlij. Wyświetla wartość i nazwę typu filmu.

Tworzenie elementu Select z wieloma sekcjami

Pomocnik HTML ListBox renderuje element <select> HTML z atrybutem multiple, dzięki czemu użytkownicy mogą wybrać wiele zaznaczeń. Przejdź do linku test, a następnie wybierz łącze wybór kraju wielokrotnego . Renderowany interfejs użytkownika umożliwia wybranie wielu krajów. Na poniższej ilustracji wybrano Kanadę i Chiny.

Badanie kodu MultiSelectCountry

Przejrzyj następujący kod z pliku 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 tworzy listę krajów, a następnie przekazuje ją do konstruktora MultiSelectList. Przeciążenie konstruktora MultiSelectList użyte w powyższej metodzie GetCountries przyjmuje cztery parametry:

public MultiSelectList(

    IEnumerable items,

    string dataValueField,

    string dataTextField,

    IEnumerable selectedValues

)
  1. elementy: element IEnumerable zawierający elementy z listy. W powyższym przykładzie lista krajów.
  2. dataValueField: Nazwa właściwości na liście IEnumerable , która zawiera wartość. W powyższym przykładzie właściwość ID.
  3. dataTextField: Nazwa właściwości na liście IEnumerable , która zawiera informacje do wyświetlenia. W powyższym przykładzie właściwość name.
  4. selectedValues: Lista wybranych wartości.

W powyższym przykładzie metoda MultiSelectCountry przekazuje wartość null dla wybranych krajów, więc nie są wybierane żadne kraje podczas wyświetlania interfejsu użytkownika. Poniższy kod przedstawia znacznik Razor używany do renderowania widoku 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>

}

Metoda pola pomocnika HTML użyta powyżej przyjmuje dwa parametry, nazwę właściwości powiązania modelu i MultiSelectList zawierający opcje i wartości. Powyższy kod ViewBag.YouSelected służy do wyświetlania wartości krajów wybranych podczas przesyłania formularza. Sprawdzanie przeciążenia POST protokołu HTTP metody MultiSelectCountry.

[HttpPost]

public ActionResult MultiSelectCountry(FormCollection form) {

    ViewBag.YouSelected = form["Countries"];

    string selectedValues = form["Countries"];

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

    return View();

}

Właściwość dynamiczna ViewBag.YouSelected zawiera wybrane kraje uzyskane dla wpisu Countries w kolekcji formularzy. W tej wersji Metoda getkrajach jest przenoszona na listę wybranych krajów, więc po wyświetleniu widoku MultiSelectCountry wybrane kraje są wybrane w interfejsie użytkownika.

Uczynienie elementu Select przyjaznym dla wtyczki z wybranym zbiorem jQuery

Wybraną wtyczkę programu jQuery można dodać do pliku HTML <wybierz element>, aby utworzyć przyjazny interfejs użytkownika. Poniższe obrazy przedstawiają wtyczkę wybranej platformy jQuery z widokiem MultiSelectCountry.

W poniższych dwóch obrazach jest wybrane Kanada .

Na powyższym obrazie Kanada jest zaznaczona i zawiera znak x , który można kliknąć, aby usunąć zaznaczenie. Na poniższej ilustracji przedstawiono wybrane dla Kanady, Chin i Japonii.

Podłączanie wybranej wtyczki jQuery

Jeśli masz pewne doświadczenie w korzystaniu z platformy jQuery, łatwiej jest skorzystać z poniższej sekcji. Jeśli wcześniej nie korzystano z platformy jQuery, możesz spróbować skorzystać z jednego z poniższych samouczków jQuery.

Wybrana wtyczka jest zawarta w początkowym i zakończonym przykładowym projekcie, które towarzyszą w tym samouczku. W tym samouczku wystarczy użyć platformy jQuery, aby podłączyć ją do interfejsu użytkownika. Aby można było używać zbioru wybranych jQuery w projekcie ASP.NET MVC, należy:

  1. Pobierz wybraną wtyczkę z usługi GitHub. Ten krok został wykonany.
  2. Dodaj wybrany folder do projektu MVC ASP.NET. Dodaj zasoby z wybranej wtyczki pobranej w poprzednim kroku do wybranego folderu. Ten krok został wykonany.
  3. Podłącz wybraną wtyczkę do pomocnika HTML DropDownList lub ListBox .

Podłączanie wybranej wtyczki do widoku MultiSelectCountry.

Otwórz plik Views\Home\MultiSelectCountry.cshtml i dodaj do Html.ListBoxparametr htmlAttributes. Parametr, który zostanie dodany, zawiera nazwę klasy dla listy wyboru (@class = "chzn-select"). Ukończony kod jest przedstawiony poniżej:

<div class="editor-field">

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

     , new

     {

         @class = "chzn-select",

         data_placeholder = "Choose  Countries..."

     }

    )

</div>

W powyższym kodzie dodajemy atrybut HTML i wartość atrybutu class = "chzn-select". Znak @ poprzedzający klasę nie ma nic do zrobienia w przypadku aparatu widoku Razor. class jest C# słowem kluczowym. C#Słowa kluczowe nie mogą być używane jako identyfikatory, chyba że zawierają @ jako prefiks. W powyższym przykładzie @class jest prawidłowym identyfikatorem, ale Klasa nie jest, ponieważ Klasa jest słowem kluczowym.

Dodaj odwołania do wybranego/wybranego pliku. jQuery. js oraz wybranych/wybranych plików CSS . Wybrany/wybrany. jQuery. js i implementuje funkcjonalną funkcję wybranej wtyczki. Wybrany/wybrany plik CSS zawiera style. Dodaj te odwołania do dolnej części pliku Views\Home\MultiSelectCountry.cshtml . Poniższy kod pokazuje, jak odwołać się do wybranej wtyczki.

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

Aktywuj wybraną wtyczkę przy użyciu nazwy klasy używanej w kodzie HTML. ListBox . W powyższym przykładzie nazwa klasy jest chzn-select. Dodaj następujący wiersz w dolnej części pliku widoku Views\Home\MultiSelectCountry.cshtml . Ten wiersz aktywuje wybraną wtyczkę.

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

Następujący wiersz jest składnią do wywołania funkcji gotowej jQuery, która wybiera Element DOM z nazwą klasy chzn-select.

$(".chzn-select")

Zestaw opakowany zwrócony z powyższego wywołania stosuje wybraną metodę (.chosen();), która przechwytuje wybraną wtyczkę.

Poniższy kod przedstawia ukończony plik widoku 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*@

Uruchom aplikację i przejdź do widoku MultiSelectCountry. Spróbuj dodać i usunąć kraje. Udostępnione pobranie próbek zawiera również metodę MultiCountryVM i widok implementujący funkcje MultiSelectCountry przy użyciu modelu widoku zamiast ViewBag.

W następnej sekcji zobaczysz, jak mechanizm tworzenia szkieletu ASP.NET MVC współpracuje z pomocnikiem DropDownList .