Язык программирования C#9 и платформа .NET5 - Эндрю Троелсен

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

<button type="submit" asp-action="Create">Index</button>

Вспомогательная функция дескриптора для якоря (<а>) заменяет вспомогательную функцию HTML с именем Html.ActionLink(). Скажем, чтобы создать ссылку на представление RazorSyntax, применяйте такой код:

<a class="nav-link text-dark" asp-area="" asp-controller="Home"

    asp-action="RazorSyntax">

  Razor Syntax

</a>

Для добавления страницы синтаксиса Razor в меню модифицируйте _Menu.cshtml, как показано ниже, добавив новый элемент меню между элементами Home (Домой) и Privacy (Секретность) (дескрипторы <li>, окружающие дескрипторы якорей, предназначены для меню Bootstrap):

...

<li class="nav-item">

  <a class="nav-link text-dark" asp-area="" asp-controller="Home"

      asp-action="Index">Home</a>

</li>

<li class="nav-item">

   <a class="nav-link text-dark" asp-area="" asp-controller="Home"

asp-action="RazorSyntax">Razor Syntax</a>

</li>

<li class="nav-item">

   <a class="nav-link text-dark" asp-area="" asp-controller="Home" 

asp-action="Privacy">Privacy</a>

</li>

Вспомогательная функция дескриптора для элемента ввода (<input>) является одной из наиболее универсальных. В дополнение к автоматической генерации атрибутов id и name стандарта HTML, а также любых атрибутов data-val стандарта HTML5, вспомогательная функция дескриптора строит надлежащую HTML-разметку, основываясь на типе данных целевого свойства. В табл. 31.3 перечислены типы HTML, которые создаются на базе типов .NET Core свойств.

Кроме того, вспомогательная функция дескриптора для элемента ввода добавит атрибуты type из HTML5, основываясь на аннотациях данных. В табл. 31.4 перечислены некоторые распространенные аннотации и генерируемые атрибуты type из HTML5.

Шаблон редактирования Car.cshtml содержит дескрипторы <input> для свойств PetName и Color. В качестве напоминания ниже приведены только эти дескрипторы:

<input asp-for="PetName" class="form-control" />

<input asp-for="Color" class="form-control"/>

Вспомогательная функция дескриптора для элемента ввода добавляет к визуализируемому дескриптору атрибуты name и id, существующее значение для свойства (если оно есть) и атрибуты проверки достоверности HTML5. Оба поля являются обязательными и имеют ограничение на длину строки в 50 символов. Вот визуализированная разметка для указанных двух свойств:

<input class="form-control" type="text" data-val="true"

    data-val-length="The field Pet Name must be a string with a

maximum length of 50." data-val-length-max="50"

   data-val-required="The Pet Name field is required."

   id="PetName" maxlength="50" name="PetName" value="Zippy">

<input class="form-control valid" type="text" data-val="true"

   data-val-length="The field Color must be a string with a

maximum length of 50." data-val-length-max="50"

   data-val-required="The Color field is required."

   id="Color" maxlength="50" name="Color" value="Black"

   aria-describedby="Color-error" aria-invalid="false">

Вспомогательная функция дескриптора для текстовой области (<textarea>) автоматически добавляет атрибуты id и name и любые атрибуты проверки достоверности HTML5, определенные для свойства. Например, следующая строка создает дескриптор <textarea> для свойства Description:

<textarea asp-for="Description"></textarea>

 Вспомогательная функция дескриптора для элемента выбора (<select>) создает дескрипторы ввода с выбором из свойства модели и коллекции. Как и в других вспомогательных функциях дескрипторов для элементов ввода, к разметке автоматически добавляются атрибуты id и name, а также любые атрибуты data-val из HTML5. Если значение свойства модели совпадает с одним из значений в списке, тогда для этого варианта в разметку добавляется атрибут selected.

Например, пусть имеется модель со свойством по имени Country и список SelectList по имени Countries с таким определением:

public List<SelectListItem> Countries { get; } = new List<SelectListItem>

{

  new SelectListItem { Value = "MX", Text = "Mexico" },

  new SelectListItem { Value = "CA", Text = "Canada" },

  new SelectListItem { Value = "US", Text = "USA"  },

};

Следующая разметка будет визуализировать дескриптор <select> с надлежащими дескрипторами <option>:

<select asp-for="Country" asp-items="Model.Countries"></select>

Если значением свойства Country является CA, тогда в представление будет выведена показанная ниже разметка:

<select id="Country" name="Country">

  <option value="MX">Mexico</option>

  <option selected="selected" value="CA">Canada</option>

  <option value="US">USA</option>

</select>

Вспомогательные функции дескрипторов для сообщения проверки достоверности и для сводки по проверке достоверности в точности отражают вспомогательные функции HTML с именами Html.ValidationMessageFor() и Html.ValidationSummaryFor(). Первая применяется к HTML-дескриптору <span> для отдельного свойства модели, а вторая — к HTML-дескриптору <div> для целой модели. Сводка по проверке достоверности поддерживает варианты Аll (все ошибки), ModelOnly (ошибки только модели, но не свойств модели) и None (никаких ошибок).

Вспомните вспомогательные функции дескрипторов для проверки достоверности из EditorTemplate в файле Car.cshtml (выделены полужирным):

<div asp-validation-summary="All" class="text-danger"></div>

<div class="form-group">

  <label asp-for="PetName" class="col-form-label"></label>

  <input asp-for="PetName" class="form-control" />

  <span asp-validation-for="PetName" class="text-danger"></span>

</div>

<div class="form-group">

  <label asp-for="MakeId" class="col-form-label"></label>

  <select asp-for="MakeId" class="form-control" asp-items="ViewBag.MakeId"></select>

</div>

<div class="form-group">

  <label asp-for="Color" class="col-form-label"></label>

  <input asp-for="Color" class="form-control"/>

  <span asp-validation-for="Color" class="text-danger"></span>

</div>

Эти вспомогательные функции дескрипторов будут отображать ошибки модели, возникшие во время привязки и проверки достоверности, как показано на рис. 31.3.

Вспомогательная функция дескриптора для среды (<environment>) обычно используется для условной загрузки файлов JavaScript и CSS (или подходящей разметки) на основе среды, в которой запущен сайт. Откройте частичное представление _Head.cshtml и модифицируйте разметку следующим образом:

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>@ViewData["Title"] - AutoLot.Mvc</title>

<environment include="Development">

  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />

</environment>

<environment exclude="Development">

  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

</environment>

<link rel="stylesheet" href="~/css/site.css" />