Язык программирования C#9 и платформа .NET5 - Эндрю Троелсен
Шрифт:
Интервал:
Закладка:
В шаблоне редактирования задействовано несколько вспомогательных функций дескрипторов (asp-for, asp-items, asp-validation-for и asp-validation-summary), которые рассматриваются позже в главе.
Шаблон редактирования Car вызывается с помощью вспомогательных функций HTML, которые называются EditorFor() и EditorForModel(). Подобно шаблонам отображения упомянутые функции будут искать представление с именем Car.cshtml или с таким же именем, как у метода.
Компоновки
По аналогии с мастер-страницами Web Forms в MVC поддерживаются компоновки, которые совместно используются представлениями, чтобы обеспечить согласованный внешний вид страниц сайта. Перейдите в каталог ViewsShared и откройте файл _Layout.cshtml. Это полноценный HTML-файл с дескрипторами <head> и <body>.
Файл _Layout.cshtml является основой, в которую визуализируются другие представления. Кроме того, поскольку большая часть страницы (такая как разметка для навигации и верхнего и/или нижнего колонтитула) поддерживается страницей компоновки, страницы представлений сохраняются небольшими и простыми. Найдите в файле _Layout.cshtml следующую строку кода Razor:
@RenderBody()
Эта строка указывает странице компоновки, где визуализировать представление. Теперь перейдите к строке, расположенной прямо перед закрывающим дескриптором </body>, которая создает новый раздел для компоновки и объявляет его необязательным:
@await RenderSectionAsync("scripts", required: false)
Разделы также могут помечаться как обязательные путем передачи для второго параметра (required) значения true. Вдобавок они могут визуализироваться синхронным образом:
@RenderSection("Header",true)
Любой код и/или разметка в блоке @ section файла представления будет визуализироваться не там, где вызывается @RenderBody(), а в месте определения раздела, присутствующего в компоновке. Например, пусть у вас есть представление со следующей реализацией раздела:
@section Scripts {
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
}
Код из представления визуализируется в компоновке на месте определения раздела. Если компоновка содержит показанное ниже определение:
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
тогда будет добавлен раздел представления, приводя в результате к отправке браузеру следующей разметки:
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
В ASP.NET Core появились два новых метода: IgnoreBody() и IgnoreSection(). В случае помещения внутрь компоновки эти методы отменяют визуализацию тела представления или указанного раздела соответственно. Они позволяют включать или отключать функции представления в компоновке на основе условной логики, такой как уровни безопасности.
Указание стандартной компоновки для представлений
Как упоминалось ранее, стандартная страница компоновки определяется в файле _ViewStart.cshtml. Любое представление, где не указана компоновка, будет использовать компоновку, определенную в первом файле _ViewStart.cshtml, который обнаруживается в каталоге представления или выше него в структуре каталогов.
Частичные представления
Частичные представления концептуально похожи на пользовательские элементы управления в Web Forms. Частичные представления удобны для инкапсуляции пользовательского интерфейса, что помогает сократить объем повторяющегося кода и/или разметки. Частичное представление не задействует компоновку и внедряется внутрь другого представления или визуализируется с помощью компонента представления (рассматривается позже в главе).
Обновление компоновки с использованием частичных представлений
Временами файлы могут становиться большими и громоздкими. Один из способов справиться с такой проблемой предусматривает разбиение компоновки на набор специализированных частичных представлений.
Создание частичных представлений
Создайте внутри каталога Shared новый каталог подназванием Partials и добавьте в него три пустых представления с именами _Head.cshtml, _JavaScriptFiles.cshtml и _Menu.cshtml.
Частичное представление Head
Вырежьте содержимое между дескрипторами <head></head> в компоновке и вставьте его в файл _Head.cshtml:
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - AutoLot.Mvc</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
Замените разметку, удаленную из файла _Layout.cshtml, вызовом для визуализации нового частичного представления:
<head>
<partial name="Partials/_Head"/>
</head>
Дескриптор <partial> — это еще один пример вспомогательной функции дескриптора. В атрибуте name указывается имя частичного представления с путем, начинающимся с текущего каталога представления, которым в данном случае является ViewsShared.
Частичное представление Menu
Для частичного представления Menu вырежьте всю разметку между дескрипторами <header></header> (не <headx/head>) и вставьте ее в файл Menu.cshtml. Модифицируйте файл Layout.cshtml, чтобы визуализировать частичное представление Menu:
<header>
<partial name="Partials/_Menu"/>
</header>
Частичное представление JavaScriptFiles
Наконец, вырежьте дескрипторы <script> для файлов JavaScript и вставьте их в частичное представление JavaScriptFiles. Удостоверьтесь в том, что оставили дескриптор RenderSection на своем месте. Вот частичное представление JavaScriptFiles:
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
Ниже приведена текущая разметка в файле _Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<partial name="Partials/_Head" />
</head>
<body>
<header>
<partial name="Partials/_Menu" />
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - AutoLot.Mvc - <a asp-area="" asp-controller="Home"
asp-action="Privacy">Privacy</a>
</div>
</footer>
<partial name="Partials/_JavaScriptFiles" />
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Отправка данных представлениям
Существует несколько способов отправки данных представлению. В случае строго типизированных представлений данные можно отправлять, когда представления визуализируются (либо из метода действия, либо через вспомогательную функцию дескриптора <partial>).
Строго типизированные представления и модели представлений
При передаче методу View() модели или модели представления значение присваивается свойству @model строго типизированного представления (обратите внимание на букву m в нижнем регистре):
@model IEnumerable<Order>
Свойство @model устанавливает тип для представления, к которому затем можно получать доступ с использованием Razor-команды @Model (обратите внимание на букву М в верхнем регистре):
@foreach (var item in Model)
{
// Делать что-то.
}
В методе действия RazorViewSyntax() демонстрируется представление, получающее данные из этого метода действия:
[HttpGet]
public IActionResult RazorSyntax([FromServices] ICarRepo carRepo)
{
var car = carRepo.Find(1);
return View(car);
}
Значение