Как использовать Html.DropDownList
> Как сделать, чтобы во View последнее для заполнения поле (SybscriptionType) было поле с выпадающем списком и предлагались все существующие варианты ?? Метод Create [get]:
public ActionResult Create() < PotentialClient potentialClient = new PotentialClient(); ListLT = db.TypesOfSubscriptions.ToList(); ViewBag.LT = LT; var allTypes = db.TypesOfSubscriptions.ToList(); ViewBag.TypeOfSubscr = allTypes; return View(); > Метод Create [Post]:
[HttpPost] [ValidateAntiForgeryToken] public ActionResult Create([Bind(Include = "PotentialClientId,FirstName,LastName,ThirdName,DateOfBirth,Sex,PhoneNumber,Pasport,SubscriptionHead")] PotentialClient potentialClient)
Прописываю во View:
@Html.DropDownListFor(m => m.TypeOfSubscriptionId, new SelectList(ViewBag.LT, "TypeOfSubscriptionId", "SubscriptionName"), new < @class = "form-control", @id = "repeatForPosition" >) На данный момент View выглядит так: На данный момент есть такая реализация во View:
@Html.LabelFor(model => model.SubscriptionHead, htmlAttributes: new < @class = "control-label col-md-2" >) @Html.EditorFor(model => model.SubscriptionHead, new < htmlAttributes = new < @class = "form-control" >>) @Html.ValidationMessageFor(model => model.SubscriptionHead, "", new < @class = "text-danger" >)
Как вместо Label использовать DropDownList ?
HTML Drop-down Menu – How to Add a Drop-Down List with the Select Element
Joel Olawanle
Many websites, applications, and web pages use drop-down menus to help display a list of information. You can use them to create navigation menus, options for forms, and more.
If you’re looking at some of these menus or lists, you might imagine how complex creating them could be. And yes – in some cases, it gets a little bit complex.
A drop-down menu is a list of options that gets revealed vertically when a user interacts with the menu by either clicking on it or hovering over it with their cursor.
This menu also disappears when the user stops interacting with the menu by clicking again or taking the cursor away from the menu.
In this article, you will learn how to add a drop-down list to the select element on your webpage. You’ll also learn the various options available, and how to create a hoverable drop-down list/menu.
How to Create an HTML Dropdown List
In HTML, by default, you can always create a drop-down list with the select tag alongside the option tag. This is mainly used within forms to select a value from a list of many options.
The select tag has two primary attributes: the name and id attributes.
// Syntax
You use the name attribute to identify the drop-down when a selection is submitted in a form. You can connect the id attribute to a label that has similar values to its for attribute.
// Syntax
The select tag also has some optional boolean attributes like disabled (which disables the select fields), required (which makes the field required in a form), and lots more.
Within the select tag, you can add many options in the individual option tag. The option tag has an attribute of value that specifies a value that is submitted from the form when an option gets selected.
There are other boolean attributes like disabled (which disables the option in the menu), and selected (which you use to set a particular option as the default selected option when the page loads rather than the first option).
In the above code, the first option has an attribute of disabled , meaning you will not be able to select the option. The fourth option has an attribute of selected , meaning that instead of having JavaScript as the selected value by default, Java will be selected.
How to Create a Hover-able Drop-down Menu
When you scroll through or visit many advanced and modern webpages, you will notice that they have drop-down menus.
These menus are used for navigation to help hold similar links together. Most times, when you hover on the parent menu, then the drop-down list appears.
You can create these types of menues in various ways, as there is no direct syntax to build one.
You can create this using CSS styling to show and hide the drop-down list when the user hovers over the menu. A very good approach is to create a div that holds the menu and the drop-down.
Dashboard Setting Logout
This div serves as a container and you can style it to a position of relative and display of inline-block , so the drop-down options appear below the menu.
.dropdown
You can style your button and the dropdown-options however you wish. But the major style that controls the hover effect, by default, sets the dropdown-options not to display. Then when a mouse hovers over the menu, the display is not set to block , so the options are visible. You also set the position to absolute , so the options appear below the menu, and overflow to auto to enable scroll on small screens.
.dropdown-options < display: none; position: absolute; overflow: auto; >.dropdown:hover .dropdown-options
In the demo below, we add more styling to make the drop-down menu more attractive and nice:
Wrapping Up
In this article, you have learned how to create a drop-down list with the select tag. You’ve also learned how to create the hoverable drop-down menu with CSS to handle the hover effect.
Что нужно передать в параметр html dropdownlist
Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core
Последнее обновление: 31.10.2015
Хотя мы можем сами написать любой требуемый хелпер, но фреймворк MVC уже предоставляет большой набор встроенных html-хелперов, которые позволяют генерировать ту или иную разметку, главным образом, для работы с формами. Поэтому в большинстве случаев не придется создавать свои хелперы, и можно будет воспользоваться встроенными.
Хелпер Html.BeginForm
Для создания форм мы вполне можем использовать стандартные элементы html, например:
Это обычная html-форма, которая по нажатию на кнопку отправляет все введенные данные запросом POST на адрес /Home/Buy. Встроенный хелпер BeginForm/EndForm позволяет создать ту же самую форму:
@using(Html.BeginForm("Buy", "Home", FormMethod.Post)) < Введите свое имя
Введите адрес :
>
Метод BeginForm принимает в качестве параметров имя метода действия и имя контроллера, а также тип запроса. Данный хелпер создает как открывающий тег
. Поэтому при рендеринге представления в выходной поток у нас получится тот же самый html-код, что и с применением тега form. Поэтому оба способа идентичны.
Здесь есть один момент. Если у нас в контроллере определены две версии одного метода — для методов POST и GET, например:
[HttpGet] public ActionResult Buy() < return View(); >[HttpPost] public string Buy(Purchase purchase)
То есть фактически вызов страницы с формой и отправка формы осуществляется одним и тем же действием Buy. В этом случае можно не указывать в хелпере Html.BeginForm параметры:
@using(Html.BeginForm())
Ввод информации
В предыдущем примере вместе с хелпером Html.BeginForm использовались стандартные элементы html. Однако набор html-хелперов содержит также хелперы для ввода информации пользователем. В MVC определен широкий набор хелперов ввода практически для каждого html-элемента. Что выбрать — хелпер или стандартный элементы ввода html, уже решает сам разработчик.
Вне зависимости от типа все базовые html-хелперы используют как минимум два параметра: первый параметр применяется для установки значений для атрибутов id и name , а второй параметр — для установки значения атрибута value
Html.TextBox
Хелпер Html.TextBox генерирует тег input со значением атрибута type равным text . Хелпер TextBox используют для получения ввода пользователем информации. Так, перепишем предыдущую форму с заменой полей ввода на хелпер Html.TextBox:
@using(Html.BeginForm("Buy", "Home", FormMethod.Post)) < Введите свое имя:
@Html.TextBox("Person", "Введите имя") Введите адрес :
@Html.TextBox("Address", "Введите адрес") >
Мы получим тот же результат:
Html.TextArea
Хелпер TextArea используется для создания элемента , который представляет многострочное текстовое поле. Результатом выражения @Html.TextArea(«text», «привет
мир»)
будет следующая html-разметка:
Обратите внимание, что хелпер декодирует помещаемое в него значение,в том числе и html-теги, (все хелперы декодируют значения моделей и значения атрибутов). Другие версии хелпера TextArea позволяют указать число строк и столбцов, определяющих размер текстового поля.
@Html.TextArea("text", "привет
мир", 5, 50, null)
Этот хелпер сгенерирует следующую разметку:
Html.Hidden
В примере с формой мы использовали скрытое поле input type=»hidden» , вместо которого могли бы вполне использовать хелпер Html.Hidden . Так, следующий вызов хелпера:
А при передачи переменной из ViewBag нам надо привести ее к типу string: @Html.Hidden(«BookId», @ViewBag.BookId as string)
Html.Password
Html.Password создает поле для ввода пароля. Он похож на хелпер TextBox , но вместо введенных символов отображает маску пароля. Следующий код:
Html.RadioButton
Для создания переключателей применяется хелпер Html.RadioButton . Он генерирует элемент input со значением type=»radio» . Для создания группы переключателей, надо присвоить всем им одно и то же имя (свойство name ):
@Html.RadioButton("color", "red") красный
@Html.RadioButton("color", "blue") синий
@Html.RadioButton("color", "green", true) зеленый
Этот код создает следующую разметку:
красный
синий
зеленый
Html.CheckBox
Html.CheckBox может применяться для создания сразу двух элементов. Возьмем, к примеру, следующий код:
Это выражение будет генерировать следующий HTML:
То есть кроме собственно поля флажка, еще и генерируется скрытое поле. Зачем оно нужно? Дело в том, что браузер посылает значение флажка только тогда, когда флажок выбран или отмечен. А скрытое поле гарантирует, что для элемента Enable будет установлено значение даже, если пользователь не отметил флажок.
Html.Label
Хелпер Html.Label создает элемент , а передаваемый в хелпер параметр определяет значение атрибута for и одновременно текст на элементе. Перегруженная версия хелпера позволяет определить значение атрибута for и текст на метке независимо друг от друга. Например, объявление хелпера Html.Label(«Name») создает следующую разметку:
Элемент label представляет простую метку, предназначенную для прикрепления информации к элементам ввода, например, к текстовым полям. Атрибут for элемента label должен содержать ID ассоциированного элемента ввода. Если пользователь нажимает на метку, то браузер автоматически передает фокус связанному с этой меткой элементу ввода.
Html.DropDownList
Хелпер Html.DropDownList создает выпадающий список, то есть элемент . Для генерации такого списка нужна коллекция объектов SelectListItem , которые представляют элементы списка. Объект SelectListItem имеет свойства Text (отображаемый текст), Value (само значение, которое может не совпадать с текстом) и Selected . Можно создать коллекцию объектов SelectListItem или использовать хелпер SelectList . Этот хелпер просматривает объекты IEnumerable и преобразует их в последовательность объектов SelectListItem . Так, код @Html.DropDownList(«countires», new SelectList(new string[] ),»Countries») генерирует следующую разметку:
Теперь более сложный пример. Выведем в список коллекцию элементов Book. В контроллере передадим этот список через ViewBag:
BookContext db = new BookContext(); public ActionResult Index()
Здесь мы создаем объект SelectList, передавая в его конструктор набор значений для списка (db.Books), название свойства модели Book, которое будет использоваться в качестве значения (Author), и название свойства модели Book, которое будет использоваться для отображения в списке. В данном случае необязательно устанавливать два разных свойства, можно было установить одно и то же свойство и для значения, и для отображения.
Тогда в представлении мы можем так использовать этот SelectList:
@Html.DropDownList("Author", ViewBag.Books as SelectList)
И при рендеринге представления все элементы SelectList добавятся в выпадающий список
Html.ListBox
Хелпер Html.ListBox , также как и DropDownList , создает элемент , но при этом делает возможным множественное выделение элементов (то есть для атрибута multiple устанавливается значение multiple ). Для создания списка, поддерживающего множественное выделение, вместо SelectList можно использовать класс MultiSelectList :
@Html.ListBox("countires", new MultiSelectList(new string[] ))
Этот код генерирует следующую разметку:
С передачей одиночных значений на сервер все понятно, но как передать множественные значения? Допустим, у нас есть следующая форма:
@using (Html.BeginForm()) < @Html.ListBox("countries", new MultiSelectList(new string[] < "Россия", "США", "Китай", "Индия" >)) >
Тогда метод контроллера мог бы получать эти значения следующим образом:
[HttpPost] public string Index(string[] countries) < string result = ""; foreach (string c in countries) < result += c; result += ";"; >return "Вы выбрали: " + result; >
HTML Tag
The element is used to create a drop-down list.
The element is most often used in a form, to collect user input.
The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).
The id attribute is needed to associate the drop-down list with a label.
Browser Support
Element
Yes
Yes
Yes
Yes
Yes
Attributes
Attribute
Value
Description
autofocus
autofocus
Specifies that the drop-down list should automatically get focus when the page loads
disabled
disabled
Specifies that a drop-down list should be disabled
form
form_id
Defines which form the drop-down list belongs to
multiple
multiple
Specifies that multiple options can be selected at once
name
name
Defines a name for the drop-down list
required
required
Specifies that the user is required to select a value before submitting the form
size
number
Defines the number of visible options in a drop-down list