Использование вспомогательного приложения DropDownList в ASP.NET MVC

  • Статья

Рик Андерсон

В этом руководстве описаны основы работы со вспомогательным приложением DropDownList и ListBox в веб-приложении MVC ASP.NET. Вы можете использовать Microsoft Visual Web Developer 2010 Express с пакетом обновления 1 (SP1), который является бесплатной версией Microsoft Visual Studio для выполнения инструкций из этого руководства. Перед началом работы убедитесь, что вы установили необходимые компоненты, перечисленные ниже. Вы можете установить все из них, щелкнув следующую ссылку: Установщик веб-платформы. Кроме того, предварительные требования можно установить по отдельности, используя следующие ссылки:

Если вы используете Visual Studio 2010 вместо Visual Web Developer 2010, установите необходимые компоненты, щелкнув следующую ссылку: Предварительные требования Для Visual Studio 2010. В этом руководстве предполагается, что вы завершили вводное руководство по ASP.NET MVC илируководство по ASP.NET музыкального магазина MVC или знакомы с разработкой ASP.NET MVC. Это руководство начинается с измененного проекта из учебника по ASP.NET MVC Music Store .

К этому разделу можно ознакомиться с проектом Visual Web Developer с готовым исходным кодом C#. Нажмите Скачать.

Что вы создадите

Вы создадите методы действий и представления, использующие вспомогательное средство DropDownList для выбора категории. Вы также используете jQuery для добавления диалогового окна вставки категории, которое можно использовать, когда требуется новая категория (например, жанр или исполнитель). Ниже приведен снимок экрана: представление "Создание" со ссылками для добавления нового жанра и добавления нового исполнителя.

Изображение с помощью вспомогательной функции раскрывающегося списка

Чему вы научитесь

В этом учебнике вы узнаете:

  • Использование вспомогательного средства DropDownList для выбора данных категории.
  • Как добавить диалоговое окно jQuery для добавления новых категорий.

Приступая к работе

Начните с скачивания начального проекта по следующей ссылке Скачать. В Windows Обозреватель щелкните правой кнопкой мыши файл DDL_Starter.zip и выберите свойства. В диалоговом окне СвойстваDDL_Starter.zip выберите Разблокировать.

Изображение диалогового окна

Щелкните правой кнопкой мыши файл DDL_Starter.zip и выберите команду Извлечь все , чтобы распаковать файл. Откройте файл StartMusicStore.sln с помощью Visual Web Developer 2010 Express (сокращенно "Visual Web Developer" или VWD) или Visual Studio 2010.

Нажмите клавиши CTRL+F5, чтобы запустить приложение, и щелкните ссылку Тест .

Изображение ссылки на тест приложения

Щелкните ссылку Выбрать категорию фильма (простой). Отобразится список Выбор типа фильма с выбранным значением Comedy.

Изображение списка выбора типа фильма

Щелкните правой кнопкой мыши в браузере и выберите просмотреть источник. Отобразится HTML-код страницы. В приведенном ниже коде показан HTML-код для элемента 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>

Вы видите, что каждый элемент в списке выбора имеет значение (0 для действия, 1 для драмы, 2 для комедии и 3 для научной фантастики) и отображаемое имя (действие, драма, комедия и научная фантастика). Приведенный выше код является стандартным HTML-кодом для списка выбора.

Измените список выбора на Драма и нажмите кнопку Отправить . В браузере используется URL-адрес, а на странице отображается http://localhost:2468/Home/CategoryChosen?MovieType=1значение Выбрано: 1.

Изображение U R L в браузере

Откройте файл Controllers\HomeController.cs и проверьте 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 , используемого для создания списка выбора HTML, требуется IEnumerable<SelectListItem явным >или неявным образом. Это значит, что IEnumerable<SelectListItem > можно явно передать вспомогательному средству DropDownList или добавить IEnumerable<SelectListItem > в ViewBag , используя то же имя для SelectListItem , что и свойство модели. Передача SelectListItem неявно и явно рассматривается в следующей части учебника. В приведенном выше коде показан самый простой способ создания IEnumerable<SelectListItem > и заполнения его текстом и значениями. Обратите внимание, Comedy что свойство SelectListItem имеет значение true. Это приведет к тому, что отображаемый список выбора будет отображать Comedy в качестве выбранного элемента в списке.

Созданный выше элемент IEnumerable<SelectListItem > добавляется в ViewBag с именем MovieType. Таким образом мы неявно передаём IEnumerable<SelectListItem > во вспомогательное средство DropDownList, показанное ниже.

Откройте файл Views\Home\SelectCategory.cshtml и проверьте разметку.

@{

    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>

}

В третьей строке для макета задано значение Views/Shared/_Simple_Layout.cshtml, которое является упрощенной версией стандартного файла макета. Это делается для простоты отображения и отрисовки HTML.

В этом примере мы не изменяем состояние приложения, поэтому мы будем отправлять данные с помощью HTTP GET, а не HTTP POST. См. раздел W3C Быстрый контрольный список для выбора HTTP GET или POST. Так как мы не изменяем приложение и не публикуем форму, мы используем перегрузку Html.BeginForm , которая позволяет указать метод действия, контроллер и метод формы (HTTP POST или HTTP GET). Обычно представления содержат перегрузку Html.BeginForm , которая не принимает параметров. Версия без параметра по умолчанию отправляет данные формы в версию POST того же метода действия и контроллера.

В следующей строке

@Html.DropDownList("MovieType")

передает строковый аргумент во вспомогательная функция DropDownList . Эта строка MovieType в нашем примере выполняет два действия:

  • Он предоставляет ключ для вспомогательной функции DropDownList для поиска IEnumerable<SelectListItem > в ViewBag.
  • Он привязан к данным элемента формы MovieType. Если метод отправки — HTTP GET, MovieType будет строкой запроса. Если метод отправки — HTTP POST, MovieType будет добавлен в текст сообщения. На следующем рисунке показана строка запроса со значением 1.

Изображение строки запроса со значением 1

В следующем коде CategoryChosen показан метод, в который была отправлена форма.

public ViewResult CategoryChosen(string MovieType) {

    ViewBag.messageString = MovieType;

    return View("Information");

}

Вернитесь на тестовую страницу и выберите ссылку HTML SelectList . Html-страница отображает элемент select, аналогичный простой тестовой странице ASP.NET MVC. Щелкните правой кнопкой мыши окно браузера и выберите просмотреть источник. Html-разметка для списка выбора по существу идентична. Протестируйте HTML-страницу, она работает как ASP.NET метод действия MVC и просмотр, который мы тестировали ранее.

Улучшение списка выбора фильмов с помощью перечислений

Если категории в приложении являются фиксированными и не изменяются, вы можете воспользоваться преимуществами перечислений, чтобы сделать код более надежным и простым в расширении. При добавлении новой категории создается правильное значение категории. Позволяет избежать ошибок копирования и вставки при добавлении новой категории, но забывает обновить значение категории.

Откройте файл Controllers\HomeController.cs и изучите следующий код:

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 захватывает четыре типа фильмов. Метод SetViewBagMovieType создает IEnumerable<SelectListItem > из перечисления eMovieCategories и задаетSelected свойство из selectedMovie параметра . Метод SelectCategoryEnum action использует то же представление, что и SelectCategory метод действия.

Перейдите на страницу Тест и щелкните ссылку Select Movie Category (Enum) . На этот раз вместо отображаемого значения (числа) отображается строка, представляющая перечисление.

Публикация значений перечисления

HTML-формы обычно используются для отправки данных на сервер. В следующем коде HTTP GET показаны версии SelectCategoryEnumPost и HTTP POST метода .

public ActionResult SelectCategoryEnumPost() {

    SetViewBagMovieType(eMovieCategories.Comedy);

    return View();

}

[HttpPost]

public ActionResult SelectCategoryEnumPost(eMovieCategories MovieType) {

    ViewBag.messageString = MovieType.ToString() +

                            " val = " + (int)MovieType;

    return View("Information");

}

Передав перечисление eMovieCategories в POST метод , мы можем извлечь как значение перечисления, так и строку перечисления. Запустите пример и перейдите на страницу Тестирование. Щелкните ссылку Select Movie Category(Enum Post) . Выберите тип фильма и нажмите кнопку Отправить. На экране отображается как значение, так и имя типа фильма.

Изображение значения и имени типа фильма

Создание элемента выбора нескольких разделов

Вспомогающая функция HTML ListBox отрисовывает HTML-элемент <select> с атрибутом multiple , что позволяет пользователям выбирать несколько элементов. Перейдите по ссылке Тест, а затем выберите ссылку Multi Select Country (Несколько стран ). Отображаемый пользовательский интерфейс позволяет выбрать несколько стран. На рисунке ниже выбраны Канада и Китай.

Изображение раскрывающегося списка с несколькими вариантами выбора

Изучение кода MultiSelectCountry

Изучите следующий код из файла 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();

}

Метод GetCountries создает список стран, а затем передает его конструктору MultiSelectList . Перегрузка MultiSelectList конструктора, используемая в методе GetCountries выше, принимает четыре параметра:

public MultiSelectList(

    IEnumerable items,

    string dataValueField,

    string dataTextField,

    IEnumerable selectedValues

)
  1. items: IEnumerable , содержащий элементы в списке. В приведенном выше примере — список Стран.
  2. dataValueField: имя свойства в списке IEnumerable , который содержит значение. В приведенном выше примере свойство ID .
  3. dataTextField: имя свойства в списке IEnumerable , которое содержит отображаемые сведения. В приведенном выше примере свойство name .
  4. selectedValues: список выбранных значений.

В приведенном выше MultiSelectCountry примере метод передает null значение для выбранных стран, поэтому при отображении пользовательского интерфейса страны не выбираются. В следующем коде показана разметка Razor, используемая для отрисовки 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 ListBox , используемый выше, принимает два параметра: имя свойства для привязки модели и MultiSelectList , содержащий параметры и значения выбора. Приведенный ViewBag.YouSelected выше код используется для отображения значений стран, выбранных при отправке формы. Проверьте перегрузку MultiSelectCountry HTTP POST метода .

[HttpPost]

public ActionResult MultiSelectCountry(FormCollection form) {

    ViewBag.YouSelected = form["Countries"];

    string selectedValues = form["Countries"];

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

    return View();

}

Динамическое ViewBag.YouSelected свойство содержит выбранные страны, полученные для Countries записи в коллекции форм. В этой версии методу GetCountries передается список выбранных стран, поэтому при отображении MultiSelectCountry представления выбранные страны выбираются в пользовательском интерфейсе.

Создание элемента Select, понятного с помощью подключаемого модуля jQuery Harvest Chosen

Подключаемый модуль jQuery Harvest Chosen можно добавить в элемент ВЫБОРА> HTML<, чтобы создать удобный пользовательский интерфейс. На приведенных ниже изображениях показан подключаемый модуль JQuery Harvest Chosen с MultiSelectCountry представлением.

Изображение подключаемого модуля запроса Harvest Chosen j

На двух изображениях ниже выбрана Канада .

Выбрано изображение Канады

Изображение Канады, выбранное с X для удаления

На изображении выше выбрана Канада и содержит x , который можно нажать, чтобы удалить выделенный фрагмент. На изображении ниже выбраны Канада, Китай и Япония.

Изображение: выбрана Канада, Китай и Япония

Подключение подключаемого подключаемого модуля jQuery Harvest Chosen

Следующий раздел проще выполнить, если у вас есть опыт работы с jQuery. Если вы никогда раньше не использовали jQuery, попробуйте выполнить одно из следующих руководств по jQuery.

Выбранный подключаемый модуль включен в начальные и завершенные примеры проектов, сопровождающих это руководство. В этом руководстве вам потребуется только использовать jQuery, чтобы подключить его к пользовательскому интерфейсу. Чтобы использовать подключаемый модуль jQuery Harvest Chosen в проекте MVC ASP.NET, необходимо:

  1. Скачайте выбранный подключаемый модуль с сайта GitHub. Этот шаг выполнен за вас.
  2. Добавьте папку Выбранные в проект MVC ASP.NET. Добавьте ресурсы из выбранного подключаемого модуля, загруженного на предыдущем шаге, в папку Выбранные. Этот шаг выполнен за вас.
  3. Подключите выбранный подключаемый модуль к вспомогательной функции HTML DropDownList или ListBox .

Подключение выбранного подключаемого модуля к представлению MultiSelectCountry.

Откройте файл Views\Home\MultiSelectCountry.cshtml и добавьте htmlAttributes параметр в Html.ListBox. Добавляемый параметр содержит имя класса для select list(@class = "chzn-select"). Полный код показан ниже:

<div class="editor-field">

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

     , new

     {

         @class = "chzn-select",

         data_placeholder = "Choose  Countries..."

     }

    )

</div>

В приведенном выше коде мы добавляем атрибут HTML и значение class = "chzn-select"атрибута . Символ @, предшествующий классу, не имеет ничего общего с обработчиком представлений Razor. class— это ключевое слово C#. Ключевые слова C# нельзя использовать в качестве идентификаторов, если они не содержат @ в качестве префикса. В приведенном выше примере является допустимым идентификатором, @class но класс не является, так как класс является ключевое слово.

Добавьте ссылки на файлы Chosen/chosen.jquery.js и Chosen/chosen.css . Выбранный или chosen.jquery.js и реализует функциональные возможности выбранного подключаемого модуля. Файл Chosen/chosen.css предоставляет стили. Добавьте эти ссылки в нижнюю часть файла Views\Home\MultiSelectCountry.cshtml . В следующем коде показано, как ссылаться на выбранный подключаемый модуль.

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

Активируйте подключаемый модуль Выбранный, используя имя класса, используемое в коде Html.ListBox . В приведенном выше примере имя класса — chzn-select. Добавьте следующую строку в нижнюю часть файла представления Views\Home\MultiSelectCountry.cshtml . Эта строка активирует выбранный подключаемый модуль.

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

В следующей строке показан синтаксис для вызова функции jQuery ready, которая выбирает элемент DOM с именем chzn-selectкласса .

$(".chzn-select")

Затем упакованный набор, возвращенный из приведенного выше вызова, применяет выбранный метод (.chosen();), который подключает выбранный подключаемый модуль.

В следующем коде показан готовый файл представления 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*@

Запустите приложение и перейдите к представлению MultiSelectCountry . Попробуйте добавить и удалить страны. Предоставленный пример загрузки также содержит MultiCountryVM метод и представление, реализующие функцию MultiSelectCountry с использованием модели представления вместо ViewBag.

В следующем разделе вы увидите, как ASP.NET механизм формирования шаблонов MVC работает со вспомогательной службой DropDownList .

Вперед