Содержание
Макеты (или мастер-страницы, layuot) в ASP.NET Core MVC используются для создания единообразного вида всего приложения. Обычно, в макете содержится всё, что повторяется от страницы к странице — скрипты, css, «скелет» html-страницы и т.д. Также, в зависимости от сложности нашего приложения, мы можем создавать несколько макетов, например, для отображения данных пользователю, для администрирования приложения и т.д.
Макет в ASP.NET Core MVC
Макет — этот тот же самый файл *.cshtml, который обычно располагается в папке View/Shared и начинается с символа подчеркивания, например, _Layout.cshtml. Символ нижнего подчеркивания необязательный, но использовать его рекомендуется, чтобы указать, что перед нами специальный файл. Посмотрим, как выглядит типичный макет в ASP.NET Core MVC. Для этого, воспользуемся нашим приложением с записями блога из предыдущей части. Создадим в папке View/Shared файл _AdminLayout.cshtml:
В редакторе кода мы увидим следующее содержимое файла:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
Код макета — это, по сути, полноценная веб-страница: здесь определены основные теги <html>, <head>, <body> и так далее. Также макет может использовать конструкции Razor. Например в этом выражении: @ViewBag.Title из каждого отдельного представления будет передаваться значение для заголовка веб-страницы.
Главное отличие макета от обычных представлений состоит в использовании метода @RenderBody(). На место этого вызова будут подставляться другие представления, использующие макет. Таким образом, мы можем обеспечить единообразное отображение различных представлений. Добавим для этого макета следующим код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<h2>@ViewBag.Title</h2>
<div><a href="/Admin/Index">Записи</a> | <a href="/Admin/Users">Пользователи</a></div>
<div>
@RenderBody()
</div>
</body>
</html>
здесь стоит обратить внимание на определение ссылок, а, точнее, на их атрибуты href:
<div><a href="/Admin/Index">Записи</a> | <a href="/Admin/Users">Пользователи</a></div>
так как мы используем маршрутизацию по умолчанию, то нетрудно понять, что при переходе, например, по ссылке /Admin/Index должно выполнять действие Index() контроллера AdminController, которого пока нет в нашем приложении. Создадим такой контроллер в нашем приложении и определим в нем необходимые действия:
public class AdminController : Controller
{
public IActionResult Index()
{
return View();
}
public IActionResult Users()
{
return View();
}
}
Теперь создадим необходимые представления, которые будут использовать наш макет. Первое представление (Index.cshtml):
@{
Layout = "~/Views/Shared/_AdminLayout.cshtml";
ViewBag.Title = "Записи блога";
}
<h2>Все записи блога</h2>
<button>Добавить новую</button>
Второе представление (Users.cshtml)
@{
Layout = "~/Views/Shared/_AdminLayout.cshtml";
ViewBag.Title = "Пользователи";
}
<h2>Пользователи блога</h2>
<button>Добавить пользователя</button>
В итоге, структура проекта будет выглядеть следующим образом:
В созданных представлениях стоит обратить внимание на следующую строку кода:
Layout = "~/Views/Shared/_AdminLayout.cshtml";
Таким образом мы указываем макет, который будет использоваться представлением. Теперь все готово для проверки работы приложения. Вот как будет выглядеть приложение после перехода по пути /admin
переход по ссылке «Пользователи»
При необходимости, мы можем подключить в макет css-файлы, скрипты и т.д.
Итого
Макеты позволяют создать единообразие в вашем приложении. Обычно, в макеты включаются элементы, которые должны повторяться на всех страницах приложения. По сути, макет — это представление в котором обязательно определяется метод RenderBody() на место которого вставляется представление, переданное из контроллера.