Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core
Для отображения сообщений об ошибках при валидации модели мы можем использовать хелпер Html.ValidationSummary:
@using (Html.BeginForm()) { @Html.ValidationSummary(true) <div class="editor-label"> @Html.LabelFor(model => model.Name) </div> <div class="editor-field"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> <div class="editor-label"> @Html.LabelFor(model => model.Author) </div> <div class="editor-field"> @Html.EditorFor(model => model.Author) @Html.ValidationMessageFor(model => model.Author) </div> <div class="editor-label"> @Html.LabelFor(model => model.Year) </div> <div class="editor-field"> @Html.EditorFor(model => model.Year) @Html.ValidationMessageFor(model => model.Year) </div> <p> <input type="submit" value="Create" /> </p> }
В данном случае сообщения об ошибках выводятся над полями для ввода значений свойств:
Но данный хелпер имеет перегруженные версии, которые помогают настроить более точное отображение сообщений об ошибках:
Перегруженная версия | Описание |
| Отображает общий список ошибок сверху |
| Если параметр равен |
| Данная перегруженная версия хелпера отображает перед списком ошибок сообщение, которое передается в параметр string |
| Сочетает две предыдущие перегруженные версии |
Также мы можем использовать хелпер Html.ValidationMessageFor для вывода сообщения об ошибке для отдельного свойства, причем рядом с полем для ввода свойства, а не в сводке ошибок сверху:
@Html.ValidationSummary(true) <div class="editor-label"> @Html.LabelFor(model => model.Name) </div> <div class="editor-field"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> <div class="editor-label"> @Html.LabelFor(model => model.Author) </div> <div class="editor-field"> @Html.EditorFor(model => model.Author) @Html.ValidationMessageFor(model => model.Author) </div>
Еще один важный момент отображения ошибок - это их стилизация. То, что мы видим ошибки в красном цвете и границы полей ввода также в красном цвете, не жестко установлено, и мы все это можем изменить. В файле стилей Site.css в проектах, созданных по шаблону Basic и Internet Application, мы можем найти секцию стилей, которая как раз и отвечает за стилизацию (при использования проекта по типу Empty нам самим придется добавить стили):
/* Styles for validation helpers -----------------------------------------------------------*/ .field-validation-error { color: #f00; } .field-validation-valid { display: none; } .input-validation-error { border: 1px solid #f00; background-color: #fee; } .validation-summary-errors { font-weight: bold; color: #f00; } .validation-summary-valid { display: none; }
Это классы используются полями, генерируемыми хелперами валидации. И изменяя данные стили, мы можем управлять отображением ошибок.
Итак, изменим два стиля - стиль класса .field-validation-error
(он управляет отображением ошибок рядом с текстовыми полями) и
стиль класса стиль класса .input-validation-error
, который управляет отображением поля ввода в режиме ошибки:
.field-validation-error { color: #6699CC; font-weight:bold; text-decoration:underline; } .input-validation-error { border: 1px solid #006699; background-color: silver; }
В итоге при возникновении ошибок валидации мы увидим следующую картину: