Asp net mvc html input

The Input Tag Helper

We just talked about the Form Tag Helper in a previous article, but all forms must contain some elements/controls. One of the most commonly used is the INPUT control, which can take many forms to support various types of input. The most common type is the text input control, which will be rendered as a single-line textbox control. However, the HTML input tag can do much more than just accept simple text — I will demonstrate that in this article.

The for attribute

While some Tag Helpers have several attributes available for various purposes, the Input Tag Helper only has one: The asp-for attribute. On the other hand, this attribute is extremely powerful! It will allow you to bind the Input control to a specific property on the Model. As an example, consider that you have a Model called Movie with a property called Title (string). You could create an Input field for it very easily, using the asp-for attribute, like this:

ASP.NET MVC automatically turns it into a proper INPUT tag like this:

Notice how the single Tag Helper attribute we specified (asp-for) was automatically turned into 4 HTML attributes (type, id, name and value). This can really save you some time when creating FORM’s.

Using data types

The value for the name and id attributes came directly from the name of the Title property, while the value naturally came from the value of the Title property. But what about the type attribute? Actually, the .NET framework simply looks at the data type of the property and then generates an appropriate and supported type for this HTML attribute. In this case, because the Title property has been defined as a string, the text value is used for the type attribute.

Using data annotations

However, a string can be many things — it could be an e-mail address, a phone-number (with dashes and/or spaces) or a password. All of these examples could be defined as a string, but require some extra attention. Fortunately for us, ASP.NET MVC allows us to specify the purpose of a member with Data Annotations — and not just for strings. Here’s an example:

public class WebUser 
 < 
[Phone] 
public string PhoneNumber < get; set; >
 
[EmailAddress] 
public string MailAddress < get; set; >
 
[DataType(DataType.Password)] 
public string Password < get; set; >
 
[DataType(DataType.Date)] 
public DateTime Birthday < get; set; >
 
public bool IsActive < get; set; >
>

Notice how I have specified the purpose of the members with Data Annotations. There are two types used here: The [Phone] type, where the intention is specified directly in the annotation, and the [DataType] annotation, where we use the DataType enumeration to specify the purpose. The result is the same though. Notice also how I use it for strings, but also for the Birthday property. By default, a DateTime type is rendered as an input field which takes both a date and a time, but a Birthday is usually specified as a date only. We can specify this requirement by using the DataType.Date value.

We can now create a View where these properties are used, and by using Tag Helpers, these properties will be rendered with the desired input types, without extra effort:

@model HelloMVCWorld.Models.WebUser 
  
 
 
  
 
 
  
 
 
  
 
 
 
 
 

The Tag Helpers will turn this into HTML which looks like this:

  
MailAddress 
 
  
PhoneNumber 
 
  
Password 
 
  
Birthday 
 
 
IsActive 
 

Notice how the type properties are automatically filled with the proper values according to the HTML specification («tel», «phone» etc.). Notice also how the IsActive property is automatically turned into a checkbox, even without Data Annotations, because it’s a bool.

Summary

The Input Tag Helper can really speed up the process of making even complex HTML Forms, especially when you use a properly annotated Model.

Is your preferred language not on the list? Click here to help us translate this article into your language!

Источник

Создание HTML-элементов

Итак, в предыдущей статье мы рассмотрели создание и настройку HTML-дескрипторов веб-форм. HTML-форма не имеет особого смысла до тех пор, пока не будут созданы некоторые элементы управления вводом (например, ). В таблице ниже описаны базовые вспомогательные методы, которые доступны для создания элементов , и приведены примеры генерируемой ими HTML-разметки. Во всех этих вспомогательных методах первый аргумент используется для установки значений атрибутов id и name элемента , а второй аргумент служит для установки значения атрибута value.

Базовые вспомогательные методы HTML для создания элементов управления вводом

Метод	Пример	Генерируемый HTML-элемент
Html.CheckBox()	Html.CheckBox(«myCheckbox», false)
Html.Hidden()	Html.Hidden(«myHidden», «val»)
Html.RadioButton()	Html.RadioButton(«myRadiobutton», «val», true)
Html.Password()	Html.Password(«myPassword», «val»)
Html.TextArea()	Html.TextArea(«myTextarea», «val», 5, 20, null)	val
Html.TextBox()	Html.TextBox(«myTextbox», «val»)

Каждый из перечисленных вспомогательных методов имеет перегруженную версию. В этой таблице показаны простейшие версии, но можно также предоставить дополнительный аргумент object для указания HTML-атрибутов, как это делалось с элементом в предыдущей статье.

Обратите внимание, что вспомогательный метод для флажка (Html.CheckBox()) генерирует два элемента : собственно флажок и скрытый элемент с тем же самым именем. Причина в том, что браузеры не отправляют значения для флажков, если те не отмечены. Наличие скрытого элемента управления гарантирует, что ASP.NET MVC Framework получит значение из скрытого поля, когда такое произойдет.

Использование этих базовых вспомогательных методов для создания элементов управления вводом демонстрируется в примере ниже:

@model HelperMethods.Models.User @ < ViewBag.Title = "CreateUser"; >
Создать пользователя
 @using (Html.BeginRouteForm("FormRoute", null, FormMethod.Post, new < @class = "userCssClass", data_formType="user" >)) < 
UserId @Html.TextBox("userId", @Model.UserId) 
 
Имя @Html.TextBox("firstName", @Model.FirstName) 
 
Фамилия @Html.TextBox("lastName", @Model.LastName) 
 >

В примере ниже показаны HTML-элементы , сгенерированные этим представлением. Вывод очень похож на первоначальный элемент , но в нем присутствует ряд подсказок инфраструктуры ASP.NET MVC Framework в виде атрибутов данных, добавленных с целью поддержки проверки достоверности формы, которая будет подробно рассматриваться позже:

Генерация элемента управления вводом из свойства модели

Вспомогательные методы, используемые в предыдущем разделе, работают хорошо, но нам по-прежнему необходимо гарантировать, что значение, передаваемое в первом аргументе, соответствует значению модели, которое передается во втором аргументе. Если эти значения не согласованы, инфраструктура ASP.NET MVC Framework не сможет воссоздать объект модели из данных формы, поскольку атрибуты name и значения элементов формы не соответствуют друг другу.

Для каждого метода, перечисленного в таблице выше, доступна перегруженная версия, которая принимает единственный аргумент типа string:

@model HelperMethods.Models.User @ < ViewBag.Title = "CreateUser"; >
Создать пользователя
 @using (Html.BeginRouteForm("FormRoute", null, FormMethod.Post, new < @class = "userCssClass", data_formType="user" >)) < 
UserId @Html.TextBox("userId")
 
Имя @Html.TextBox("firstName")
 
Фамилия @Html.TextBox("lastName")
 >

Аргумент string применяется для поиска в данных представления, в объекте ViewBag и в модели представления соответствующего элемента данных, который может использоваться в качестве основы для элемента input. Таким образом, например, если вызвать @Html.TextBox(«DataValue»), то инфраструктура ASP.NET MVC Framework попытается найти элемент данных, который соответствует ключу DataValue. Будут проверяться следующие местоположения:

Первое найденное значение используется для установки атрибута value генерируемой HTML-разметки. (Последняя проверка, в @Model.DataValue, предпринимается, только если модель представления содержит свойство или поле по имени DataValue.)

Если указать строку вроде DataValue.First.Name, поиск становится более сложным. Инфраструктура ASP.NET MVC Framework опробует различные комбинации элементов, разделяемых точками, такие как перечисленные ниже:

• ViewBag.DataValue.First.Name
• ViewBag.DataValue[«First»].Name
• ViewBag.DataValue[«First.Name»]
• ViewBag.DataValue[«First»][«Name»]

Проверяются многие перестановки. И снова будет использоваться первое найденное значение, завершая поиск. С этим приемом связана очевидная проблема производительности, однако помните, что внутри объекта ViewBag обычно содержится совсем немного элементов, так что поиск среди них не должен отнимать значительное время.

Использование строго типизированных вспомогательных методов для создания элементов управления вводом

Каждому базовому вспомогательному методу для создания элементов управления вводом, описанному в таблице выше, соответствует строго типизированный вспомогательный метод. Эти вспомогательные методы перечислены в таблице ниже вместе с примерами HTML-разметки, которую они генерируют. Такие вспомогательные методы могут применяться только со строго типизированными представлениями. (Часть вспомогательных методов генерируют атрибуты, которые помогают обеспечивать проверку достоверности данных форм на стороне клиента, но для краткости в таблице они не приведены.)

Строго типизированные вспомогательные методы для создания элементов управления вводом

Метод	Пример	Генерируемый HTML-элемент
Html.CheckBoxFor()	Html.CheckBoxFor(х => х.IsApproved)
Html.HiddenFor()	Html.HiddenFor(x => x.FirstName)
Html.RadioButtonFor()	Html.RadioButtonFor(x => x.IsApproved, «val»)
Html.PasswordFor()	Html.PasswordFor(x => x.Password)
Html.TextAreaFor()	Html.TextAreaFor(x => x.Bio, 5, 20, new<>)	<br />Bio value<br />
Html.TextBoxFor()	Html.TextBoxFor(x => x.FirstName)

Строго типизированные вспомогательные методы для создания элементов управления вводом работают с лямбда-выражениями. В такое выражение передается объект модели представления, в котором можно выбрать поле или свойство, используемое для установки атрибута value. В примере ниже показано, как этот вид вспомогательного метода применяется в представлении CreateUser.cshtml из примера приложения:

@model HelperMethods.Models.User @ < ViewBag.Title = "CreateUser"; >
Создать пользователя
 @using (Html.BeginRouteForm("FormRoute", null, FormMethod.Post, new < @class = "userCssClass", data_formType="user" >)) < 
UserId @Html.TextBoxFor(user => user.UserId) 
 
Имя @Html.TextBoxFor(user => user.FirstName) 
 
Фамилия @Html.TextBoxFor(user => user.LastName) 
 >

Генерируемая этими вспомогательными методами HTML-разметка ничем не отличается от приведенной ранее. Тем не менее, использовать в проектах именно строго типизированные вспомогательные методы предпочтительнее, т.к. это уменьшает вероятность внесения ошибок за счет некорректного написания имен свойств.

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

В таблице ниже описаны вспомогательные методы HTML, предназначенные для создания элементов выбора (select). Они могут применяться для выбора одиночного элемента из раскрывающегося списка или для обеспечения одновременного выбора множества элементов. Как и в случае других элементов формы, доступны слабо и строго типизированные версии этих вспомогательных методов:

Вспомогательные методы HTML, генерирующие элементы выбора

Метод	Описание	Пример	Генерируемый HTML-элемент
Html.DropDownList()	Раскрывающийся список	Html.DropDownList(«myList», new SelectList(new [] ), «Выбрать»)	Выбрать A B
Html.DropDownListFor()	Раскрывающийся список	Html.DropDownListFor(x => x.Gender, new SelectList(new [] ))	M F
Html.ListBox()	Список с множественным выбором	Html.ListBox(«myList», new MultiSelectList(new [] ))	A B
Html.ListBoxFor()	Список с множественным выбором	Html.ListBoxFor(x => x.Vals, new MultiSelectList(new [] ))	A B

Вспомогательные методы, генерирующие элементы выбора, принимают параметры типа SelectList или MultiSelectList. Разница между этими классами заключается в том, что MultiSelectList имеет опции конструктора, которые позволяют указывать возможность выбора более одного элемента при начальной визуализации страницы.

Оба эти класса оперируют с последовательностями IEnumerable объектов. В таблице выше создавались встраиваемые массивы, содержащие списковые элементы, которые необходимо отображать, но классы SelectList и MultiSelectList способны также извлекать для элементов списка значения из объектов, включая объект модели. В примере ниже показано, как создать элемент для свойства Role объекта модели User:

. @using (Html.BeginRouteForm("FormRoute", null, FormMethod.Post, new < @class = "userCssClass", data_formType="user" >)) < . 
Роль @Html.DropDownListFor(user => user.Role, new SelectList(Enum.GetNames(typeof(HelperMethods.Models.Role))))
 > 

Свойство Role объявлено так, что оно принимает значение перечисления Role, определенного в том же файла класса. Поскольку классы SelectList и MultiSelect имеют дело с экземплярами реализаций IEnumerable, мы должны использовать метод Enum.GetNames() для того, чтобы можно было указывать перечисление Role в качестве источника для элемента .

Ниже приведена HTML-разметка, которая создается последней версией представления:

Источник