Язык программирования C#9 и платформа .NET5
Шрифт:
Запустив приложение и перейдя на страницу
RazorSyntax
, вы можете быть удивлены тем, что шаблон отображения Car
не применяется. Причина в том, что шаблон находится в каталоге представления Cars
, а метод действия RazorSyntax
и представление вызываются из HomeController
. Методы действий в HomeController
будут осуществлять поиск представлений в каталогах Home
и Shared
и потому не найдут шаблон отображения Car
. Если вы переместите файл
Car.cshtml
в каталог Shared\DisplayTemplates
, тогда представление RazorSyntax
будет использовать шаблон отображения Car
. Шаблон отображения CarWithColor
Шаблон
CarWithColor
похож на шаблон Car
. Разница в том, что этот шаблон изменяет цвет текста Color (Цвет) на основе значения свойства Color
модели. Добавьте в каталог Cars\DisplayTemplates
новый шаблон по имени CarWithColors.cshtml
и приведите разметку к следующему виду:
@model Car
<hr />
<div>
<dl class="row">
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.PetName)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.PetName)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.MakeNavigation)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.MakeNavigation.Name)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Color)
</dt>
<dd class="col-sm-10" style="color:@Model.Color">
@Html.DisplayFor(model => model.Color)
</dd>
</dl>
</div>
Чтобы применить шаблон
CarWithColors.cshtml
вместо Car.cshtml
, вызовите DisplayForModel
с именем шаблона (обратите внимание, что правила местоположения по-прежнему актуальны):
@Html.DisplayForModel("CarWithColors")
Каталог EditorTemplates
Каталог
EditorTemplates
работает аналогично каталогу DisplayTemplates
, но находящиеся в нем шаблоны используются для редактирования. Шаблон редактирования Car
Создайте внутри каталога
Views\Cars
новый каталог под названием EditorTemplates
и добавьте в него новое представление по имени Car.cshtml
. Удалите сгенерированный код вместе с комментариями и замените его показанным ниже кодом, который является разметкой для редактирования сущности Car
:
@model Car
<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>
В шаблоне редактирования задействовано несколько вспомогательных функций дескрипторов (
asp-for
, asp-items
, asp-validation-for
и asp-validation-summary
), которые рассматриваются позже в главе. Шаблон редактирования
Car
вызывается с помощью вспомогательных функций HTML, которые называются EditorFor
и EditorForModel
. Подобно шаблонам отображения упомянутые функции будут искать представление с именем Car.cshtml
или с таким же именем, как у метода. Компоновки
По аналогии с мастер-страницами Web Forms в MVC поддерживаются компоновки, которые совместно используются представлениями, чтобы обеспечить согласованный внешний вид страниц сайта. Перейдите в каталог
Views\Shared
и откройте файл _Layout.cshtml
. Это полноценный HTML-файл с дескрипторами <head>
и <body>
. Файл
_Layout.cshtml
является основой, в которую визуализируются другие представления. Кроме того, поскольку большая часть страницы (такая как разметка для навигации и верхнего и/или нижнего колонтитула) поддерживается страницей компоновки, страницы представлений сохраняются небольшими и простыми. Найдите в файле _Layout.cshtml
следующую строку кода Razor:
@RenderBody
Эта строка указывает странице компоновки, где визуализировать представление. Теперь перейдите к строке, расположенной прямо перед закрывающим дескриптором
</body>
, которая создает новый раздел для компоновки и объявляет его необязательным:
@await RenderSectionAsync("scripts", required: false)
Разделы также могут помечаться как обязательные путем передачи для второго параметра (
required
) значения true
. Вдобавок они могут визуализироваться синхронным образом: Поделиться с друзьями: