Перейдите на страницу тест и щелкните ссылку Select Movie Category (Enum) . Navigate to the Test page and click on the Select Movie Category (Enum) link. На этот раз вместо отображаемого значения (числа) отображается строка, представляющая перечисление. This time, instead of a value (number) being displayed, a string representing the enum is displayed.

Отправка значений перечисления Posting Enum Values

HTML-формы обычно используются для отправки данных на сервер. HTML Forms are typically used to post data to the server. В следующем коде показаны HTTP GET и HTTP POST версии метода SelectCategoryEnumPost . The following code shows the HTTP GET and HTTP POST versions of the SelectCategoryEnumPost method.

Передав перечисление eMovieCategories в метод POST , можно извлечь значение перечисления и строку перечисления. By passing a eMovieCategories enum to the POST method, we can extract both the enum value and the enum string. Запустите пример и перейдите на страницу тест. Run the sample and navigate to the Test page. Щелкните ссылку Select Movie Category(Enum Post) . Click on the Select Movie Category(Enum Post) link. Выберите тип фильма, а затем нажмите кнопку Отправить. Select a movie type and then hit the submit button. На экране отображаются как значение, так и имя типа фильма. The display shows both the value and the name of the movie type.

Создание элемента выбора с несколькими разделами Creating a Multiple Section Select Element

Вспомогательный метод HTML ListBox визуализирует элемент HTML с помощью атрибута multiple , который позволяет пользователям выбрать несколько элементов. The ListBox HTML helper renders the HTML element with the multiple attribute, which allows the users to make multiple selections. Перейдите к тестовой ссылке, а затем щелкните ссылку множественный выбор страны . Navigate to the Test link, then select the Multi Select Country link. Готовый к просмотру пользовательский интерфейс позволяет выбрать несколько стран. The rendered UI allows you to select multiple countries. На рисунке ниже выбраны Канада и Китай. In the image below, Canada and China are selected.

Проверка кода Мултиселекткаунтри Examining the MultiSelectCountry Code

Изучите следующий код из файла Controllers\HomeController.CS . Examine the following code from the Controllers\HomeController.cs file.

Метод GetCountries создает список стран, а затем передает его в конструктор MultiSelectList . The GetCountries method creates a list of countries, then passes it to the MultiSelectList constructor. Перегрузка конструктора MultiSelectList , используемая в приведенном выше методе GetCountries , принимает четыре параметра: The MultiSelectList constructor overload used in the GetCountries method above takes four parameters:

1. Items: элемент IEnumerable , содержащий элементы списка. items: An IEnumerable containing the items in the list. В приведенном выше примере это список стран. In the example above, the list of Countries.
2. датавалуефиелд: имя свойства в списке IEnumerable , которое содержит значение. dataValueField: The name of the property in the IEnumerable list that contains the value. В приведенном выше примере это свойство ID . In the example above, the ID property.
3. TextField: имя свойства в списке IEnumerable , которое содержит отображаемые сведения. dataTextField: The name of the property in the IEnumerable list that contains the information to display. В приведенном выше примере это свойство name . In the example above, the name property.
4. селектедвалуес: список выбранных значений. selectedValues: The list of selected values.

В приведенном выше примере метод MultiSelectCountry передает значение null для выбранных стран, поэтому при отображении пользовательского интерфейса не выбираются страны. In the example above, the MultiSelectCountry method passes a null value for the selected countries, so no countries are selected when the UI is displayed. В следующем коде показана разметка Razor, используемая для визуализации представления MultiSelectCountry . The following code shows the Razor markup used to render the MultiSelectCountry view.

Используемый выше метод ListBox вспомогательного метода HTML принимает два параметра: имя свойства для привязки модели и MultiSelectList , содержащий параметры и значения SELECT. The HTML helper ListBox method used above take two parameters, the name of the property to model bind and the MultiSelectList containing the select options and values. Приведенный выше код ViewBag.YouSelected используется для вывода значений стран, выбранных при отправке формы. The ViewBag.YouSelected code above is used to display the values of the countries you selected when you submit the form. Изучите перегрузку HTTP POST метода MultiSelectCountry . Examine the HTTP POST overload of the MultiSelectCountry method.

Динамическое свойство ViewBag.YouSelected содержит выбранные страны, полученные для записи Countries в коллекции форм. The ViewBag.YouSelected dynamic property contains the selected countries, obtained for the Countries entry in the form collection. В этой версии методу «страны» передается список выбранных стран, поэтому при отображении MultiSelectCountry ного представления выбранные страны выбираются в пользовательском интерфейсе. In this version the GetCountries method is passed a list of the selected countries, so when the MultiSelectCountry view is displayed, the selected countries are selected in the UI.

Как сделать элемент SELECT понятным с помощью выбранного подключаемого модуля jQuery Making a Select Element Friendly with the Harvest Chosen jQuery Plugin

Выбранный подключаемый модуль jQuery можно добавить в HTML- , чтобы создать пользовательский интерфейс. The Harvest Chosen jQuery plugin can be added to an HTML element to create a user friendly UI. На рисунках ниже показано, как выберет выбранный подключаемый модуль jQuery с MultiSelectCountry представлением. The images below demonstrate the Harvest Chosen jQuery plugin with MultiSelectCountry view.

На двух приведенных ниже изображениях выбрано Канада . In the two images below, Canada is selected.

На приведенном выше рисунке выбран вариант «Канада» и он содержит значок x , который можно щелкнуть, чтобы удалить выделенный фрагмент. In the image above, Canada is selected, and it contains an x you can click to remove the selection. На рисунке ниже показаны выбранные для Канады, Китая и Японии. The image below shows Canada, China, and Japan selected.

Подключение выбранного подключаемого модуля jQuery Hooking up the Harvest Chosen jQuery Plugin

Следующий раздел упрощает работу, если у вас есть опыт работы с jQuery. The following section is easier to follow if you have some experience with jQuery. Если вы раньше не использовали jQuery, попробуйте выполнить одно из следующих руководств по jQuery. If you have never used jQuery before, you might want to try one of the following jQuery tutorials.

Выбранный подключаемый модуль включен в учебные и завершенные образцы проектов, сопровождающие этот учебник. The Chosen plugin is included in the starter and completed sample projects that accompany this tutorial. В этом учебнике для подключения к пользовательскому интерфейсу необходимо использовать jQuery. For this tutorial you will only need to use jQuery to hook it up to the UI. Для использования подключаемого модуля jQuery, выбранного в проекте ASP.NET MVC, необходимо выполнить следующие действия. To use the Harvest Chosen jQuery plugin in an ASP.NET MVC project, you must:

1. Скачайте выбранный подключаемый модуль из GitHub. Download Chosen plugin from github. Этот шаг выполнен за вас. This step has been done for you.
2. Добавьте выбранную папку в проект MVC ASP.NET. Add the Chosen folder to your ASP.NET MVC project. Добавьте ресурсы из выбранного подключаемого модуля, скачанного на предыдущем шаге, в выбранную папку. Add the assets from the Chosen plugin you downloaded in the previous step to the Chosen folder. Этот шаг выполнен за вас. This step has been done for you.
3. Подключите выбранный подключаемый модуль к вспомогательному модулю HTML DropDownList или ListBox . Hook up the chosen plugin to the DropDownList or ListBox HTML helper.

Подключение выбранного подключаемого модуля к представлению Мултиселекткаунтри. Hooking up the Chosen Plugin to the MultiSelectCountry View.

Откройте файл виевс\хоме\мултиселекткаунтри.кштмл и добавьте в Html.ListBox параметр htmlAttributes . Open the Views\Home\MultiSelectCountry.cshtml file and add an htmlAttributes parameter to the Html.ListBox . Добавляемый параметр содержит имя класса для списка выбора ( @class = «chzn-select» ). The parameter you will add contains a class name for the select list( @class = «chzn-select» ). Завершенный код показан ниже: The completed code is shown below:

В приведенном выше коде мы добавляем атрибут HTML и значение атрибута class = «chzn-select» . In the code above, we are adding the HTML attribute and attribute value class = «chzn-select» . Класс @ного символа выше не имеет отношения к подсистеме представлений Razor. The @ character preceding class has nothing to do with the Razor view engine. class является C# ключевым словом. class is a C# keyword. C#Ключевые слова не могут использоваться в качестве идентификаторов, если они не содержат @ в качестве префикса. C# keywords cannot be used as identifiers unless they include @ as a prefix. В приведенном выше примере @class является допустимым идентификатором, но класс — нет, поскольку класс является ключевым словом. In the example above, @class is a valid identifier but class is not because class is a keyword.

Добавьте ссылки на Выбранные/выбранные. jQuery. js и Выбранные/выбранные CSS- файлы. Add references to the Chosen/chosen.jquery.js and Chosen/chosen.css files. Выбранный/выбранный. jQuery. js и реализует функцию, которая является выбранным подключаемым модулем. The Chosen/chosen.jquery.js and implements the functionally of the Chosen plugin. Выбранный/выбранный CSS- файл предоставляет стиль. The Chosen/chosen.css file provides the styling. Добавьте эти ссылки в нижнюю часть файла виевс\хоме\мултиселекткаунтри.кштмл . Add these references to the bottom of the Views\Home\MultiSelectCountry.cshtml file. В следующем коде показано, как создать ссылку на выбранный подключаемый модуль. The following code shows how to reference the Chosen plugin.

Активируйте выбранный подключаемый модуль, используя имя класса, которое используется в коде HTML. ListBox . Activate the Chosen plugin using the class name used in the Html.ListBox code. В приведенном выше примере имя класса — chzn-select . In the example above, the class name is chzn-select . Добавьте следующую строку в конец файла представления виевс\хоме\мултиселекткаунтри.кштмл . Add the following line to the bottom of the Views\Home\MultiSelectCountry.cshtml view file. Эта строка активирует выбранный подключаемый модуль. This line activates the Chosen plugin.

Следующая строка представляет собой синтаксис для вызова функции готовности jQuery, которая выбирает элемент DOM с именем класса chzn-select . The following line is the syntax to call the jQuery ready function, which selects the DOM element with class name chzn-select .

Упакованный набор, возвращенный приведенным выше вызовом, применяет выбранный метод ( .chosen(); ), который подключает выбранный подключаемый модуль. The wrapped set returned from the above call then applies the chosen method ( .chosen(); ), which hooks up the Chosen plugin.

В следующем коде показан завершенный файл представления виевс\хоме\мултиселекткаунтри.кштмл . The following code shows the completed Views\Home\MultiSelectCountry.cshtml view file.

Запустите приложение и перейдите к представлению MultiSelectCountry . Run the application and navigate to the MultiSelectCountry view. Попробуйте добавить и удалить страны. Try adding and deleting countries. Пример загрузки также содержит метод MultiCountryVM и представление, в котором реализована функция Мултиселекткаунтри с использованием модели представления вместо ViewBag. The sample download provided also contains a MultiCountryVM method and view that implements the MultiSelectCountry functionality using a view model instead of a ViewBag.