HTML.Textarea Values in MVC Razor View

It is hard for me to clearly state the problem I am having. I am trying to understand how to retain values in form fields created in a loop after validation fails. I have a more complicated real world form that has a bunch of elements created in the loop and validation. I have reduced it to a simple example included below.

When validation fails I would like the textareas named «Comment» that have been created in the loop to retain the values that are shown in the Pre-Submit image below.

When I debug the form submission, the values from each of the fields are successfully connected to the IList variable named Comment found in the Model. This is what I want so I can loop through and locate them based on index.

After submitting, each textarea produced by the loop shows the comma separated representation of the IList variable Comment in the Model. It appears that the field in the view and in the model are connecting because they share a name. They connect properly on the way in but not on the way out. I would like the view to only show the value associated with the Comment[i] instead of the entire list so that the values remain constant between form submissions.

Screenshots and Sample Code Below
First Load:

Pre-Submit Form Changes:

Form as seen after first submit:

Form as seen after second submit:

Model Code

View Code

Controller Code

Text Area Extensions. Text Area Method

Definition

Overloads

Returns the specified textarea element by using the specified HTML helper and the name of the form field.

Returns the specified textarea element by using the specified HTML helper, the name of the form field, and the specified HTML attributes.

Returns the specified textarea element by using the specified HTML helper and HTML attributes.

Returns the specified textarea element by using the specified HTML helper, the name of the form field, and the text content.

Returns the specified textarea element by using the specified HTML helper, the name of the form field, the text content, and the specified HTML attributes.

Returns the specified textarea element by using the specified HTML helper, the name of the form field, the text content, and the specified HTML attributes.

Returns the specified textarea element by using the specified HTML helper, the name of the form field, the text content, the number of rows and columns, and the specified HTML attributes.

Returns the specified textarea element by using the specified HTML helper, the name of the form field, the text content, the number of rows and columns, and the specified HTML attributes.

TextArea(HtmlHelper, String)

Returns the specified textarea element by using the specified HTML helper and the name of the form field.

Parameters

The HTML helper instance that this method extends.

The name of the form field to return.

Returns

The textarea element.

Applies to

TextArea(HtmlHelper, String, IDictionary )

Returns the specified textarea element by using the specified HTML helper, the name of the form field, and the specified HTML attributes.

Parameters

The HTML helper instance that this method extends.

The name of the form field to return.

An object that contains the HTML attributes to set for the element.

Формы

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

Тема форм достаточно большая, чтобы описать её в рамках одного урока, ведь со всеми возможными нюансами это может вылиться в целый курс. Не бойтесь — в этом уроке вы узнаете достаточно, чтобы научиться делать хорошие формы.

Создание формы

Для отделения формы от остальных участков вёрстки используется специальный тег

Сервер — удалённый компьютер, на котором хранится весь проект. Сейчас вы смотрите на страницу, которая сгенерирована на сервере и отдана вам по определённому адресу. Этот адрес указан сейчас в вашем браузере.

Примером взаимодействия с формой является любой сайт-поисковик. Например, Google или Yandex. Вы вводите поисковый запрос, который отправляется на сервер. Сервер обрабатывает результат и выдаёт вам подходящие сайты. Это взаимодействие происходит с помощью серверных языков программирования, таких как PHP, Ruby и так далее. В рамках вёрстки мы не можем влиять на то, как обработается результат. Результат вёрстки — набор тегов, с помощью которых браузер соберёт данные и отправит их на сервер.

Смысл этого действия вы лучше поймёте, если будете заниматься Backend разработкой. Например, на языке PHP или Python. Если сейчас вам кажется это сложным, то не отчаивайтесь. Разработчики всегда вам подскажут, куда стоит отправлять данные.

Поля формы

В примере вы можете увидеть два атрибута тега

: cols и rows . Они отвечают за количество символов и строк, которые доступны внутри textarea. Если контента будет больше, то появится горизонтальная полоса прокрутки.

Попробуйте изменить размер элемента

. Это можно сделать потянув за правый нижний угол. Так вы можете не только увеличить ширину, но и высоту элемента.

Такое поведение зачастую вредит нашему дизайну. Поэтому разработчики в большинстве случаев запрещают такое поведение. Тут есть несколько вариантов:

• Можно задать высоту и ширину элемента через CSS. Тогда браузер не даст растягивать элемент.
• Использовать свойство resize со значением none . Его можно использовать, если не требуется поддержка некоторых мобильных браузеров и Internet Explorer. Полный список поддерживаемых браузеров можно посмотреть на сайте Can I use.

See the Pen css_content_course_forms_textarea-resize by Hexlet (@hexlet) on CodePen.

input

Большую группу полей можно создать используя тег , главным атрибутом которого является type . Он указывает на то, как именно браузер должен обработать элемент. Рассматривать каждое значение бессмысленно, так как такое количество информации быстро забудется, если её не использовать.

В этом уроке рассмотрим одни из самых популярных значений атрибута type .

type=»text»

Самый простой вид input, который позволяет ввести любую пользовательскую информацию. Никаких проверок полей не происходит. Единственное исключение — удаление переносов строк перед отправкой на сервер. Если нужны данные с переносом текста, то используйте тег

Заметьте, что сейчас поле никак не подписано и из-за этого абсолютно непонятно что надо ввести пользователю. Первое, что приходит в голову — добавить перед полем заголовок или параграф. Да, это создаст видимость описания поля. Но только видимость! С точки зрения семантики в таком варианте нет никакой связи между текстом и полем ввода. Это критично для слепых, которые пользуются скринридерами, так как они не смогут связать название и поле для ввода.

Скринридер (Screen Reader) — устройство для чтения текста с экрана. Используется слепыми или слабовидящими людьми.

Для связи поля и его названия используется тег , внутри которого вставляется текст. Чтобы связать и используется один из двух вариантов. Они равнозначны, поэтому можете использовать тот, который удобен в конкретной ситуации.

• Связь по идентификатору. Для этого тегу устанавливается уникальный id . Для тега устанавливается атрибут for значением которого является идентификатор инпута.

• Вложение внутрь . Такой способ помогает избавиться от указания идентификаторов, но может немного усложнить процесс стилизации.

Важно: все элементы, которые доступны пользователю для заполнения должны иметь тег . Это элементы и

. Это справедливо даже в случае визуального отсутствия подписи к полю.

Для скрытия элемента можно воспользоваться следующим CSS-кодом. В процессе вашего роста как разработчика, вы поймёте все правила, описанные в данном коде. Обычно класс для скрытия элемента называют .sr-only . Такой элемент будет невидимым для пользователя, но его сможет «прочитать» скринридер.

type=»radio»

Радиокнопки используются для выбора одного варианта из множества доступных. Почему такой тип называется radio? Есть мнение, что такое название тип получил от первых автомобильных радиоприёмников. В них было доступно несколько радиостанций, но выбрать можно было только одну. Здесь смысл очень похож на принцип таких приёмников.

Помимо атрибутов, которые использовались в прошлых примерах, для радиокнопок есть ещё один важный атрибут — name . Он является уникальным для группы радиокнопок.

Помимо атрибута name у радиокнопок используется атрибут value . Внутри него находится то значение, которое отправится на сервер.

type=»checkbox»

Чекбоксы немного похожи на радиокнопки, но имеют существенное отличие — возможность выбора сразу нескольких значений. Представьте, что пользователь выбирает любимые блюда. Скорее всего это не одно блюдо, а сразу несколько. Можно дать возможность просто их написать с помощью

, но грамотнее будет использовать чекбоксы.

Списки

Отдельным элементом формы являются списки. Представьте себе фильтр на сайте по продаже техники. Одновременно вы можете отфильтровать товары только в одной категории. Для этого можно использовать радиокнопки или даже чекбоксы в случае множественного выбора. Но есть ещё один способ — использование списка.

Создание списка очень похоже на создание списка текста. В формах для этого используется тег пункты которого лежат внутри тегов .

В примере появился новый атрибут — selected . Он отвечает за то, какой элемент выбран по умолчанию. Если он не указан, то будет выбран первый элемент списка.

Для элементов радиокнопок и чекбоксов для выбора по умолчанию используется атрибут checked

Для списков доступен ещё один интересный атрибут — multiple . С его помощью список становится похож на чекбоксы и позволяет выбрать сразу несколько пунктов.

Отправка формы

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

Отправка формы может быть осуществлена одним из двух способов:

• Создание с типом submit . В этом случае создастся элемент в виде кнопки с именем, указанным в качестве значения атрибута value .
• Использование парного тега . Такой способ больше развязывает руки, так как внутри такой кнопки может содержаться любой HTML код, при клике на который будет отправлена форма. Такой способ очень удобен для создания кнопки в виде иконки. Сейчас такой способ наиболее актуальный.

See the Pen css_content_course_forms_button by Hexlet (@hexlet) on CodePen.

Разделение участков формы

Cтрашный сон пользователя — длинная форма без разделения на секции. К центру такой формы уже непонятно, для чего именно заполняются те или иные поля. Можно отделять секции с помощью заголовков или визуально. Но браузеры предоставляют специальный механизм для разделения участков формы на логические секции — fieldset . Их можно рассматривать как альтернативу тегу , но только для форм. В качестве заголовка выступает тег .

Текст внутри текстового поля

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

За вывод такого текста отвечает атрибут placeholder , значением которого является текст, выводимый до возникновения события фокуса.

Важно: placeholder не является заменой тега . Думайте о placeholder как об описании текстового поля, а как об имени этого поля.

Дополнительное задание

Создайте форму для регистрации пользователя на сайте. Форма должна принимать следующие данные:

Используйте различные вариации типов у . Все возможные типы вы сможете найти в дополнительной информации этого урока.

Дополнительная информация

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

• задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
• расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
• изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Урок «Как эффективно учиться на Хекслете»
• Вебинар «Как самостоятельно учиться»

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

Вспомогательные функции тегов в формах в ASP.NET Core Tag Helpers in forms in ASP.NET Core

В этом документе приводятся сведения о работе с формами и элементами HTML, часто используемыми в формах. This document demonstrates working with Forms and the HTML elements commonly used on a Form. Элемент HTML форма предоставляет основной механизм, используемый веб-приложениями для отправки данных на сервер. The HTML Form element provides the primary mechanism web apps use to post back data to the server. В большей части этого документа описываются вспомогательные функции тегов и их применение для создания надежных форм HTML. Most of this document describes Tag Helpers and how they can help you productively create robust HTML forms. Перед прочтением этого документа рекомендуется изучить статью Общие сведения о вспомогательных функциях тегов. We recommend you read Introduction to Tag Helpers before you read this document.

Во многих случаях вспомогательные методы HTML располагают альтернативными вариантами для определенной вспомогательной функции тега, но следует отметить, что вспомогательные функции тегов не заменяют вспомогательные методы HTML и для каждого вспомогательного метода HTML не существует конкретной вспомогательной функции тега. In many cases, HTML Helpers provide an alternative approach to a specific Tag Helper, but it’s important to recognize that Tag Helpers don’t replace HTML Helpers and there’s not a Tag Helper for each HTML Helper. Если есть альтернатива вспомогательному методу HTML, она будет указана. When an HTML Helper alternative exists, it’s mentioned.

Вспомогательная функция тега формы The Form Tag Helper

Вспомогательная функция тега формы : The Form Tag Helper:

Приведенная выше вспомогательная функция тега формы создает следующий код HTML: The Form Tag Helper above generates the following HTML:

Среда выполнения MVC генерирует значение атрибута action на основе атрибутов вспомогательной функции тега формы asp-controller и asp-action . The MVC runtime generates the action attribute value from the Form Tag Helper attributes asp-controller and asp-action . Вспомогательная функция тега формы также создает скрытый токен проверки запроса для предотвращения подделки межсайтовых запросов (при использовании с атрибутом [ValidateAntiForgeryToken] в методе действия HTTP Post). The Form Tag Helper also generates a hidden Request Verification Token to prevent cross-site request forgery (when used with the [ValidateAntiForgeryToken] attribute in the HTTP Post action method). Защита чистой формы HTML от подделки межсайтовых запросов является трудной задачей, поэтому для ее решения используется вспомогательная функция тега формы. Protecting a pure HTML Form from cross-site request forgery is difficult, the Form Tag Helper provides this service for you.

Использование именованного маршрута Using a named route

Атрибут asp-route вспомогательной функции тега также может создавать разметку для атрибута HTML action . The asp-route Tag Helper attribute can also generate markup for the HTML action attribute. Приложение с маршрутом с именем register использует следующую разметку для страницы регистрации: An app with a route named register could use the following markup for the registration page:

Многие представления в папке Views/Account (сформированные при создании веб-приложения с учетными записями отдельных пользователей) содержат атрибут asp-route-returnurl: Many of the views in the Views/Account folder (generated when you create a new web app with Individual User Accounts) contain the asp-route-returnurl attribute:

Предыдущая разметка создает следующий код HTML. The previous markup generates following HTML:

Отправка формы в пример страницы Submit to page example

Следующая разметка отправляет форму на About Razor страницу: The following markup submits the form to the About Razor Page:

Предыдущая разметка создает следующий код HTML. The previous markup generates following HTML:

Отправка формы в пример маршрута Submit to route example

Рассмотрим конечную точку /Home/Test . Consider the /Home/Test endpoint:

Следующая разметка отправляет форму в конечную точку /Home/Test . The following markup submits the form to the /Home/Test endpoint.

Предыдущая разметка создает следующий код HTML. The previous markup generates following HTML:

Вспомогательная функция тега входных данных The Input Tag Helper

Вспомогательная функция тега input привязывает элемент HTML к выражению модели в представлении Razor. The Input Tag Helper binds an HTML element to a model expression in your razor view.

Вспомогательная функция тега входных данных: The Input Tag Helper:

Создает атрибуты HTML id и name для имени выражения, указанного в атрибуте asp-for . Generates the id and name HTML attributes for the expression name specified in the asp-for attribute. asp-for=»Property1.Property2″ равно m => m.Property1.Property2 . asp-for=»Property1.Property2″ is equivalent to m => m.Property1.Property2 . Имя выражения совпадает со значением атрибута asp-for . The name of the expression is what is used for the asp-for attribute value. Дополнительные сведения см. в разделе Имена выражений . See the Expression names section for additional information.

Задает значение атрибута HTML type на основе атрибутов типа модели и заметок к данным, примененным к свойству модели. Sets the HTML type attribute value based on the model type and data annotation attributes applied to the model property

Значение атрибута HTML type не перезаписывается, если оно указано. Won’t overwrite the HTML type attribute value when one is specified

Создает атрибуты проверки HTML5 из атрибутов заметок к данным, примененным к свойствам модели. Generates HTML5 validation attributes from data annotation attributes applied to model properties

Располагает перекрытием вспомогательного метода HTML с Html.TextBoxFor и Html.EditorFor . Has an HTML Helper feature overlap with Html.TextBoxFor and Html.EditorFor . Дополнительные сведения см. в разделе Альтернативы вспомогательного метода HTML вспомогательной функции тега входных данных. See the HTML Helper alternatives to Input Tag Helper section for details.

Обеспечивает строгую типизацию. Provides strong typing. Если после изменения имени свойства не выполнить обновление вспомогательной функции тега, возникнет ошибка следующего вида: If the name of the property changes and you don’t update the Tag Helper you’ll get an error similar to the following:

Вспомогательная функция тега Input задает атрибут HTML type на основе типа .NET. The Input Tag Helper sets the HTML type attribute based on the .NET type. В следующей таблице перечислены некоторые распространенные типы .NET и созданный тип HTML (указаны не все типы .NET). The following table lists some common .NET types and generated HTML type (not every .NET type is listed).

Тип .NET .NET type	Тип входных данных Input Type
Bool Bool	type=»checkbox» type=»checkbox»
Строка String	type=»text» type=»text»
Дата и время DateTime	type=»datetime-local» type=»datetime-local»
Byte Byte	type=»number» type=»number»
Int Int	type=»number» type=»number»
Single, Double Single, Double	type=»number» type=»number»

В следующей таблице приведены некоторые наиболее распространенные атрибуты заметок к данным, которые вспомогательная функция тега входных данных будет сопоставлять с определенными типами входных данных (указаны не все атрибуты проверки): The following table shows some common data annotations attributes that the input tag helper will map to specific input types (not every validation attribute is listed):

attribute Attribute	Тип входных данных Input Type
[EmailAddress] [EmailAddress]	type=»email» type=»email»
[Url] [Url]	type=»url» type=»url»
[HiddenInput] [HiddenInput]	type=»hidden» type=»hidden»
[Phone] [Phone]	type=»tel» type=»tel»
[DataType(DataType.Password)] [DataType(DataType.Password)]	type=»password» type=»password»
[DataType(DataType.Date)] [DataType(DataType.Date)]	type=»date» type=»date»
[DataType(DataType.Time)] [DataType(DataType.Time)]	type=»time» type=»time»

Приведенный выше код создает следующий HTML: The code above generates the following HTML:

Заметки данных применяются к свойствам Email и Password , создающим метаданные для модели. The data annotations applied to the Email and Password properties generate metadata on the model. Вспомогательная функция тега входных данных использует метаданные модели и создает атрибуты HTML5 data-val-* (см. статью Проверка модели). The Input Tag Helper consumes the model metadata and produces HTML5 data-val-* attributes (see Model Validation). Эти атрибуты описывают проверяющие элементы управления, присоединяемые к полям входных данных. These attributes describe the validators to attach to the input fields. Это обеспечивает ненавязчивую проверку HTML5 и jQuery. This provides unobtrusive HTML5 and jQuery validation. Ненавязчивые атрибуты имеют формат data-val-rule=»Error Message» , где Rule — это имя правила проверки (например,, и data-val-required data-val-email data-val-maxlength т. д.). Если в атрибуте указано сообщение об ошибке, оно отображается как значение для data-val-rule атрибута. The unobtrusive attributes have the format data-val-rule=»Error Message» , where rule is the name of the validation rule (such as data-val-required , data-val-email , data-val-maxlength , etc.) If an error message is provided in the attribute, it’s displayed as the value for the data-val-rule attribute. Также существуют атрибуты формы data-val-ruleName-argumentName=»argumentValue» , которые содержат дополнительные сведения о правиле, например data-val-maxlength-max=»1024″ . There are also attributes of the form data-val-ruleName-argumentName=»argumentValue» that provide additional details about the rule, for example, data-val-maxlength-max=»1024″ .

Альтернативы вспомогательного метода HTML вспомогательной функции тега входных данных HTML Helper alternatives to Input Tag Helper

Html.TextBox , Html.TextBoxFor , Html.Editor и Html.EditorFor имеют функции, перекрывающиеся со вспомогательной функцией тега входных данных. Html.TextBox , Html.TextBoxFor , Html.Editor and Html.EditorFor have overlapping features with the Input Tag Helper. Вспомогательная функция тега входных данных будет автоматически задавать атрибут type , а Html.TextBox и Html.TextBoxFor — нет. The Input Tag Helper will automatically set the type attribute; Html.TextBox and Html.TextBoxFor won’t. Html.Editor и Html.EditorFor обрабатывают коллекции, сложные объекты и шаблоны, а вспомогательная функция тега входных данных не делает этого. Html.Editor and Html.EditorFor handle collections, complex objects and templates; the Input Tag Helper doesn’t. Вспомогательная функция тега входных данных, Html.EditorFor и Html.TextBoxFor являются строго типизированными (они используют лямбда-выражения); а Html.TextBox и Html.Editor не являются таковыми (они используют имена выражений). The Input Tag Helper, Html.EditorFor and Html.TextBoxFor are strongly typed (they use lambda expressions); Html.TextBox and Html.Editor are not (they use expression names).

HtmlAttributes HtmlAttributes

При выполнении шаблонов по умолчанию @Html.Editor() и @Html.EditorFor() используют специальную запись ViewDataDictionary с именем htmlAttributes . @Html.Editor() and @Html.EditorFor() use a special ViewDataDictionary entry named htmlAttributes when executing their default templates. Это поведение дополняется параметрами additionalViewData . This behavior is optionally augmented using additionalViewData parameters. Ключ «htmlAttributes» не учитывает регистр. The key «htmlAttributes» is case-insensitive. Ключ «htmlAttributes» обрабатывается так же, как htmlAttributes объект, передаваемый во вспомогательные функции входных данных, такие как @Html.TextBox() . The key «htmlAttributes» is handled similarly to the htmlAttributes object passed to input helpers like @Html.TextBox() .

Имена выражений Expression names

Значением атрибута asp-for является ModelExpression и правая часть лямбда-выражения. The asp-for attribute value is a ModelExpression and the right hand side of a lambda expression. Таким образом, asp-for=»Property1″ становится m => m.Property1 в созданном коде, поэтому нет необходимости добавлять префикс Model . Therefore, asp-for=»Property1″ becomes m => m.Property1 in the generated code which is why you don’t need to prefix with Model . Чтобы начать встроенное выражение и переместить его перед m. , используется символ @. You can use the «@» character to start an inline expression and move before the m. :

Выводится следующий результат: Generates the following:

При использовании свойств коллекции asp-for=»CollectionProperty[23].Member» генерирует то же самое имя, что и asp-for=»CollectionProperty[i].Member» , если i имеет значение 23 . With collection properties, asp-for=»CollectionProperty[23].Member» generates the same name as asp-for=»CollectionProperty[i].Member» when i has the value 23 .

Когда MVC ASP.NET Core рассчитывает значение ModelExpression , он оценивает несколько источников, включая ModelState . When ASP.NET Core MVC calculates the value of ModelExpression , it inspects several sources, including ModelState . Вы можете использовать . Consider . Рассчитанный атрибут value является первым значением, отличным от NULL, из: The calculated value attribute is the first non-null value from:

• записи ModelState с ключом «Name»; ModelState entry with key «Name».
• результата выражения Model.Name . Result of the expression Model.Name .

Навигация по дочерним свойствам Navigating child properties

Для перехода к дочерним свойствам можно также использовать путь к свойству модели представления. You can also navigate to child properties using the property path of the view model. Рассмотрим более сложный класс модели, который содержит дочернее свойство Address . Consider a more complex model class that contains a child Address property.

В представлении выполняется привязка к Address.AddressLine1 : In the view, we bind to Address.AddressLine1 :

Следующий HTML создан для Address.AddressLine1 : The following HTML is generated for Address.AddressLine1 :

Имена выражений и коллекций Expression names and Collections

Пример модели, содержащей массив Colors : Sample, a model containing an array of Colors :

Метод действия: The action method:

Ниже Razor показано, как получить доступ к определенному Color элементу. The following Razor shows how you access a specific Color element:

Шаблон Views/Shared/EditorTemplates/String.cshtml: The Views/Shared/EditorTemplates/String.cshtml template:

Пример с использованием List : Sample using List :

Ниже Razor показано, как выполнить итерацию по коллекции. The following Razor shows how to iterate over a collection:

Шаблон Views/Shared/EditorTemplates/ToDoItem.cshtml: The Views/Shared/EditorTemplates/ToDoItem.cshtml template:

По возможности следует использовать foreach , когда значение будет применяться в эквивалентном контексте asp-for или Html.DisplayFor . foreach should be used if possible when the value is going to be used in an asp-for or Html.DisplayFor equivalent context. Обычно лучше использовать for , чем foreach (если сценарий позволяет), так как ему не нужно выделять перечислитель. Тем не менее оценка индексатора в выражении LINQ может быть недешевой, поэтому ее нужно минимизировать. In general, for is better than foreach (if the scenario allows it) because it doesn’t need to allocate an enumerator; however, evaluating an indexer in a LINQ expression can be expensive and should be minimized.

В приведенном выше комментированном коде показано, как заменить лямбда-выражение оператором @ , чтобы получить доступ к каждому ToDoItem в списке. The commented sample code above shows how you would replace the lambda expression with the @ operator to access each ToDoItem in the list.

Вспомогательная функция тега Textarea The Textarea Tag Helper

Вспомогательная функция тега Textarea Tag Helper аналогична вспомогательной функции тега входных данных. The Textarea Tag Helper tag helper is similar to the Input Tag Helper.

Создает id атрибуты и name и атрибуты проверки данных из модели для

Обеспечивает строгую типизацию. Provides strong typing.

Располагает альтернативой вспомогательному методу HTML — Html.TextAreaFor . HTML Helper alternative: Html.TextAreaFor

Создается следующий HTML: The following HTML is generated:

Вспомогательная функция тега метки The Label Tag Helper

Создает заголовок и атрибут метки for элемента для имени выражения. Generates the label caption and for attribute on a element for an expression name

Располагает альтернативой вспомогательному методу HTML — Html.LabelFor . HTML Helper alternative: Html.LabelFor .

Label Tag Helper предоставляет следующие преимущества по сравнению с чистым элементом метки: The Label Tag Helper provides the following benefits over a pure HTML label element:

Вы автоматически получаете значение описательной метки из Display атрибута. You automatically get the descriptive label value from the Display attribute. Предполагаемое отображаемое имя может изменяться с течением времени, а сочетание атрибута Display и вспомогательной функции тега метки будет применять атрибут Display везде, где он используется. The intended display name might change over time, and the combination of Display attribute and Label Tag Helper will apply the Display everywhere it’s used.

Меньше разметки в исходном коде. Less markup in source code

Строгая типизация со свойством модели. Strong typing with the model property.

Для элемента создан следующий HTML: The following HTML is generated for the element:

Вспомогательная функция тега метки сгенерировала для атрибута for значение «Email», представляющее собой идентификатор, связанный с элементом . The Label Tag Helper generated the for attribute value of «Email», which is the ID associated with the element. Вспомогательные функции тегов создают согласованные элементы id и for , чтобы обеспечить их правильное связывание. The Tag Helpers generate consistent id and for elements so they can be correctly associated. Заголовок в этом примере взят из атрибута Display . The caption in this sample comes from the Display attribute. Если модель не содержит атрибут Display , заголовком будет имя свойства выражения. If the model didn’t contain a Display attribute, the caption would be the property name of the expression.

Вспомогательные функции тегов проверки The Validation Tag Helpers

Существует две вспомогательные функции тегов проверки. There are two Validation Tag Helpers. Validation Message Tag Helper отображает сообщение проверки для одного свойства в модели, Validation Summary Tag Helper отображает сводку ошибок проверки. The Validation Message Tag Helper (which displays a validation message for a single property on your model), and the Validation Summary Tag Helper (which displays a summary of validation errors). Input Tag Helper добавляет клиентские атрибуты проверки HTML5 в элементы входных данных на основе атрибутов заметок к данным в классах модели. The Input Tag Helper adds HTML5 client side validation attributes to input elements based on data annotation attributes on your model classes. Проверка также выполняется на сервере. Validation is also performed on the server. Вспомогательная функция тега проверки отображает эти сообщения об ошибках при возникновении ошибки проверки. The Validation Tag Helper displays these error messages when a validation error occurs.

Вспомогательная функция тега сообщения о проверке The Validation Message Tag Helper

Добавляет атрибут HTML5 data-valmsg-for=»property» к элементу span , который прикрепляет сообщения об ошибках проверки в поле ввода указанного свойства модели. Adds the HTML5 data-valmsg-for=»property» attribute to the span element, which attaches the validation error messages on the input field of the specified model property. При возникновении ошибки проверки на стороне клиента jQuery отображает сообщение об ошибке в элементе . When a client side validation error occurs, jQuery displays the error message in the element.

Проверка также выполняется на сервере. Validation also takes place on the server. На клиентах может быть отключена поддержка JavaScript, поэтому некоторые проверки выполняются только на стороне сервера. Clients may have JavaScript disabled and some validation can only be done on the server side.

Располагает альтернативой вспомогательному методу HTML — Html.ValidationMessageFor . HTML Helper alternative: Html.ValidationMessageFor

Validation Message Tag Helper используется с атрибутом asp-validation-for в элементе HTML span. The Validation Message Tag Helper is used with the asp-validation-for attribute on a HTML span element.

Вспомогательная функция тега сообщения о проверке создает следующий HTML: The Validation Message Tag Helper will generate the following HTML:

Как правило, Validation Message Tag Helper используется после вспомогательной функции тега Input для одного и того же свойства. You generally use the Validation Message Tag Helper after an Input Tag Helper for the same property. В этом случае сообщения об ошибках проверки отображаются рядом с входными данными, вызвавшими ошибку. Doing so displays any validation error messages near the input that caused the error.

Для проверки на стороне клиента необходимо иметь представление с правильными ссылками на скрипты JavaScript и jQuery. You must have a view with the correct JavaScript and jQuery script references in place for client side validation. Дополнительные сведения см. в статье о проверке модели. See Model Validation for more information.

При возникновении ошибки проверки на стороне сервера (например, если выполняется пользовательская проверка на стороне сервера или проверка на стороне клиент отключена) MVC размещает сообщение об ошибке в тексте элемента . When a server side validation error occurs (for example when you have custom server side validation or client-side validation is disabled), MVC places that error message as the body of the element.

Вспомогательная функция тега сводки по проверке The Validation Summary Tag Helper

Работает с элементами

Располагает альтернативой вспомогательному методу HTML — @Html.ValidationSummary . HTML Helper alternative: @Html.ValidationSummary

Validation Summary Tag Helper используется для отображения сводки по сообщениям проверки. The Validation Summary Tag Helper is used to display a summary of validation messages. Значением атрибута asp-validation-summary может быть любое из следующих: The asp-validation-summary attribute value can be any of the following:

asp-validation-summary asp-validation-summary	Отображаемые сообщения о проверке Validation messages displayed
ValidationSummary.All ValidationSummary.All	Свойство и уровень модели Property and model level
ValidationSummary.ModelOnly ValidationSummary.ModelOnly	Моделирование Model
ValidationSummary.None ValidationSummary.None	Нет None

Образец Sample

В следующем примере модель данных имеет атрибуты DataAnnotation , в результате чего создаются сообщения об ошибках проверки для элемента . In the following example, the data model has DataAnnotation attributes, which generates validation error messages on the element. При возникновении ошибки проверки вспомогательная функция тега проверки отображает следующее сообщение об ошибке: When a validation error occurs, the Validation Tag Helper displays the error message:

Созданный HTML (если модель является допустимой): The generated HTML (when the model is valid):

Вспомогательная функция тега Select The Select Tag Helper

Создает элемент select и связанные элементы option для свойств модели. Generates select and associated option elements for properties of your model.

Располагает альтернативой вспомогательному методу HTML — Html.DropDownListFor и Html.ListBoxFor . Has an HTML Helper alternative Html.DropDownListFor and Html.ListBoxFor

Select Tag Helper asp-for указывает имя свойства модели для элемента select, а asp-items указывает элементы option. The Select Tag Helper asp-for specifies the model property name for the select element and asp-items specifies the option elements. Пример: For example:

Привязка перечисления Enum binding

Часто бывает удобно использовать

Добавление HTML- элементов не ограничено вариантом без выбора . Adding HTML elements isn’t limited to the No selection case. Например, следующее представление и метод действия создадут HTML, аналогичный приведенному выше коду: For example, the following view and action method will generate HTML similar to the code above:

В зависимости от текущего значения Country будет выбран соответствующий элемент (содержащий атрибут selected=»selected» ). The correct element will be selected ( contain the selected=»selected» attribute) depending on the current Country value.