Поделиться через

Макет в ASP.NET Core

Авторы: Стив Смит (Steve Smith) и Дейв Брок (Dave Brock)

Страницы и представления часто используют визуальные и программные элементы. В этой статье демонстрируются следующие возможности.

  • Используйте общие макеты.
  • Директивы совместного использования.
  • Запустите общий код перед рендерингом страниц или видов.

В этом документе рассматриваются макеты двух различных подходов к ASP.NET Core MVC: Razor страниц и контроллеров с представлениями. В этом разделе различия минимальны:

  • Razor Страницы находятся в папке Pages .
  • Контроллеры с представлениями используют папку Views для представлений.

Что такое макет

Большинство веб-приложений имеют общий макет, предоставляющий пользователю согласованный интерфейс при переходе с страницы на страницу. Макет обычно включает общие элементы пользовательского интерфейса, такие как верхний колонтитул приложения, элементы навигации или меню и нижний колонтитул.

Пример макета страницы

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

По соглашению макет по умолчанию для приложения ASP.NET Core называется _Layout.cshtml. Файлы макета для новых проектов ASP.NET Core, созданных с помощью шаблонов:

  • Razor Страниц: Pages/Shared/_Layout.cshtml

    Папка Pages в обозревателе решений

  • Контроллер с представлениями: Views/Shared/_Layout.cshtml

    Папка Views в обозревателе решений

Макет определяет шаблон верхнего уровня для представлений в приложении. Приложения не требуют макета. Приложения могут определять несколько макетов с различными представлениями, определяющими различные макеты.

В следующем коде показан файл макета для созданного шаблона проекта с контроллером и представлениями:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-page="/Index" class="navbar-brand">WebApplication1</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-page="/Index">Home</a></li>
                    <li><a asp-page="/About">About</a></li>
                    <li><a asp-page="/Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <partial name="_CookieConsentPartial" />

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2018 - WebApplication1</p>
        </footer>
    </div>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("Scripts", required: false)
</body>
</html>

Определение макета

Razor представления имеют свойство Layout. Индивидуальные представления определяют макет, задавая это свойство.

@{
    Layout = "_Layout";
}

Указанный макет может использовать полный путь (например, /Pages/Shared/_Layout.cshtml или /Views/Shared/_Layout.cshtml) или частичное имя (например: _Layout). При указании частичного имени движок представлений Razor ищет файл макета с помощью стандартного процесса обнаружения. Сначала выполняется поиск в папке, в которой существует метод обработчика (или контроллер), а затем — общая папка. Этот процесс обнаружения идентичен процессу обнаружения, используемому для обнаружения частичных представлений.

По умолчанию каждый макет должен вызывать RenderBody. Где бы ни находился вызов RenderBody, содержимое представления будет отрисовано.

Разделы

Макет может ссылаться на один или несколько разделов, вызвав вызов RenderSection. Разделы предоставляют способ упорядочения определенных элементов страницы. Каждый вызов RenderSection может указать, является ли этот раздел обязательным или необязательным:

<script type="text/javascript" src="~/scripts/global.js"></script>

@RenderSection("Scripts", required: false)

Если обязательный раздел не найден, создается исключение. Отдельные представления указывают содержимое, отображаемое в разделе с помощью синтаксиса @sectionRazor . Если страница или представление определяет раздел, он должен быть отрисован, иначе возникнет ошибка.

Пример @section определения в Razor представлении Pages:

@section Scripts {
     <script type="text/javascript" src="~/scripts/main.js"></script>
}

В приведенном выше коде scripts/main.js добавляется в раздел scripts на странице или представлении. Другие страницы или представления в том же приложении могут не требовать этого сценария и не определять раздел скриптов.

Следующая разметка использует помощник частичного тега для отображения _ValidationScriptsPartial.cshtml:

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

Предыдущая разметка была создана с помощью шаблонов Identity.

Разделы, определенные в странице или представлении, доступны только в непосредственной странице макета. Нельзя ссылаться на них из частичных представлений, компонентов или других частей системы представления.

Пропускание разделов

По умолчанию текст и все разделы на странице содержимого должны отображаться на странице макета. Движок Razor представлений применяет это путем отслеживания того, было ли отрисовано тело и каждый раздел.

Чтобы указать движку представлений игнорировать тело или разделы, вызовите методы IgnoreBody и IgnoreSection.

Текст и каждый раздел страницы Razor должны отображаться или игнорироваться.

Импорт общих директив

Представления и страницы могут использовать Razor директивы для импорта пространств имен и внедрения зависимостей. Директивы, совместно используемые многими представлениями, могут быть указаны в общем _ViewImports.cshtml файле. Файл _ViewImports поддерживает следующие директивы:

  • @addTagHelper
  • @removeTagHelper
  • @tagHelperPrefix
  • @using
  • @model
  • @inherits
  • @inject
  • @namespace

Файл не поддерживает другие Razor функции, такие как функции и определения разделов.

Пример _ViewImports.cshtml файла:

@using WebApplication1
@using WebApplication1.Models
@using WebApplication1.Models.AccountViewModels
@using WebApplication1.Models.ManageViewModels
@using Microsoft.AspNetCore.Identity
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

_ViewImports.cshtml Файл для приложения ASP.NET Core MVC обычно помещается в папку Pages (или Views). _ViewImports.cshtml Файл можно поместить в любую папку, в этом случае она будет применена только к страницам или представлениям в этой папке и ее вложенным папкам. _ViewImports файлы обрабатываются начиная с корневого уровня, а затем для каждой папки, ведущей к расположению страницы или представления. _ViewImports Параметры, указанные на корневом уровне, могут быть переопределены на уровне папки.

Например, предположим:

  • Файл корневого уровня _ViewImports.cshtml включает @model MyModel1 и @addTagHelper *, MyTagHelper1.
  • Вложенная папка _ViewImports.cshtml содержит @model MyModel2 и @addTagHelper *, MyTagHelper2.

Страницы и представления в подпапке будут иметь доступ как к вспомогательным объектам тегов, так и к модели MyModel2.

Если в иерархии файлов обнаружены несколько _ViewImports.cshtml файлов, объединенное поведение директив включает:

  • @addTagHelper, @removeTagHelper: все работают, в последовательности
  • @tagHelperPrefix: ближайший к представления переопределяет остальные
  • @model: ближайший к виду переопределяет все остальные.
  • @inherits: ближайший к представлению переопределяет любые другие
  • @using: все включены; дубликаты игнорируются
  • @inject: для каждого свойства то, которое находится ближе всего в иерархии к представлению, переопределяет остальные свойства с тем же именем.

Выполнение кода перед каждым представлением

Код, который должен выполняться перед каждым представлением или страницей, должен быть помещен в файл _ViewStart.cshtml. По принятой договоренности файл _ViewStart.cshtml принято располагать в папке Pages (или Views). Указания, перечисленные в списке _ViewStart.cshtml, выполняются перед каждым полным представлением (а не макетами и частичными представлениями). Подобно ViewImports.cshtml, _ViewStart.cshtml иерархически упорядочен. _ViewStart.cshtml Если файл определен в папке представления или страниц, он будет выполняться после того, как он определен в корневой папке Pages (или Views) (если таковые есть).

Пример _ViewStart.cshtml файла:

@{
    Layout = "_Layout";
}

Приведенный выше файл указывает, что все представления будут использовать макет _Layout.cshtml.

_ViewStart.cshtml и _ViewImports.cshtmlобычно не помещаются в папку /Pages/Shared (или /Views/Shared). Версии этих файлов на уровне приложения должны размещаться непосредственно в папке /Pages (или /Views).

  • Last updated on