Rozložení v ASP.NET Core

Steve Smith a Dave Brock

Stránky a zobrazení často sdílí vizuální a programové prvky. Tento článek ukazuje, jak:

  • Použijte společná rozložení.
  • Direktivy Share.
  • Před vykreslováním stránek nebo zobrazení spouštějte běžný kód.

tento dokument popisuje rozložení dvou různých přístupů k ASP.NET Core MVC: Razor stránky a řadiče se zobrazeními. Rozdíly jsou pro toto téma minimální:

  • Razor Stránky jsou ve složce stránky .
  • Řadiče se zobrazeními používají pro zobrazení složku zobrazení .

Co je rozložení

Většina webových aplikací má společné rozložení, které uživatelům poskytuje konzistentní prostředí při přechodu ze stránky na stránku. Rozložení obvykle zahrnuje běžné prvky uživatelského rozhraní, jako jsou záhlaví aplikace, navigace nebo prvky nabídky a zápatí.

Příklad rozložení stránky

Mnoho stránek v aplikaci také často používá běžné struktury HTML, jako jsou skripty a šablony stylů. Všechny tyto sdílené prvky mohou být definovány v souboru rozložení , na který lze následně odkazovat jakýmkoli zobrazením použitým v aplikaci. Rozložení omezují výskyt duplicitního kódu v zobrazeních.

podle konvence je výchozím rozložením pro aplikaci ASP.NET Core název _Layout. cshtml. soubory rozložení pro nové projekty ASP.NET Core vytvořené pomocí šablon jsou:

  • Razor Stránky: stránky/Shared/_Layout. cshtml

    Složka stránky v Průzkumník řešení

  • Kontroler se zobrazeními: views/Shared/_Layout. cshtml

    Složka zobrazení v Průzkumník řešení

Rozložení definuje šablonu na nejvyšší úrovni pro zobrazení v aplikaci. Aplikace nevyžadují rozložení. Aplikace mohou definovat více než jedno rozložení s různými zobrazeními určujícími různá rozložení.

Následující kód ukazuje soubor rozložení pro šablonu vytvořenou v projektu pomocí kontroleru a zobrazení:

<!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>

Určení rozložení

Razor zobrazení mají Layout vlastnost. Jednotlivá zobrazení určují rozložení nastavením této vlastnosti:

@{
    Layout = "_Layout";
}

Zadané rozložení může použít úplnou cestu (například /Pages/Shared/_Layout. cshtml nebo /views/Shared/_Layout. cshtml) nebo částečný název (například: _Layout ). Pokud je k dispozici částečný název, Razor modul zobrazení vyhledá soubor rozložení pomocí standardního procesu zjišťování. Složka, ve které existuje metoda obslužné rutiny (nebo kontrolér), je nejdříve prohledána a za ní následuje sdílená složka. Tento proces zjišťování je stejný jako proces, který se používá ke zjišťování částečných zobrazení.

Ve výchozím nastavení musí každé rozložení volat RenderBody . Všude RenderBody , kde je umístěno volání, se vykreslí obsah zobrazení.

Oddíly

Rozložení může volitelně odkazovat na jeden nebo více oddílů voláním RenderSection . Oddíly poskytují způsob, jak uspořádat, kde by měly být umístěny určité prvky stránky. Každé volání, které umožňuje RenderSection určit, zda je tato část povinná nebo volitelná:

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

@RenderSection("Scripts", required: false)

Pokud není požadovaný oddíl nalezen, je vyvolána výjimka. Jednotlivá zobrazení určují obsah, který se má vykreslit v rámci oddílu pomocí @section Razor syntaxe. Pokud stránka nebo zobrazení definují oddíl, je nutné jej vykreslit (nebo dojde k chybě).

Příklad @section definice v Razor zobrazení stránky:

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

V předchozím kódu se skripty/main.js přidaly do scripts oddílu na stránce nebo zobrazení. Jiné stránky nebo zobrazení ve stejné aplikaci pravděpodobně nevyžadují tento skript a nedefinují oddíl Scripts.

Následující kód používá pomocníka částečné značky k vykreslování _ValidationScriptsPartial. cshtml:

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

Předchozí kód byl vygenerován pomocí generování uživatelského Identity rozhraní .

Oddíly definované na stránce nebo zobrazení jsou k dispozici pouze na stránce jejího okamžitého rozložení. Nelze na ně odkazovat z částečných, zobrazení součástí nebo jiných částí systému zobrazení.

Ignorují se oddíly.

Ve výchozím nastavení musí být tělo a všechny oddíly na stránce obsahu vykresleny na stránce rozložení. RazorModul zobrazení tento modul vynutil sledováním, zda byl text a jednotlivé oddíly vykresleny.

Chcete-li, aby modul zobrazení mohl ignorovat tělo nebo oddíly, zavolejte IgnoreBody IgnoreSection metody a.

Tělo a každý oddíl Razor stránky musí být vykresleny nebo ignorovány.

Import sdílených direktiv

Zobrazení a stránky můžou pomocí Razor direktiv importovat obory názvů a používat vkládání závislostí. Direktivy sdílené pomocí mnoha zobrazení mohou být zadány v běžném souboru _ViewImports. cshtml . _ViewImportsSoubor podporuje následující direktivy:

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

Soubor nepodporuje jiné Razor funkce, jako jsou třeba definice funkcí a oddílů.

Vzorový _ViewImports.cshtml soubor:

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

soubor _ViewImports. cshtml pro aplikaci ASP.NET Core MVC je obvykle umístěn ve složce pages (nebo views). _ViewImports soubor. cshtml lze umístit do jakékoli složky. v takovém případě bude použito pouze na stránky nebo zobrazení v této složce a jejích podsložkách. _ViewImports soubory jsou zpracovávány na kořenové úrovni a následně pro každou složku, která je v umístění stránky nebo samotného zobrazení. _ViewImports nastavení zadaná na kořenové úrovni lze přepsat na úrovni složky.

Předpokládejme například:

  • _ViewImports soubor. cshtml na kořenové úrovni zahrnuje @model MyModel1 a @addTagHelper *, MyTagHelper1 .
  • Podsložka _ViewImports soubor. cshtml obsahuje @model MyModel2 a @addTagHelper *, MyTagHelper2 .

Stránky a zobrazení v podsložce budou mít přístup k oběma pomocníkům značek i k MyModel2 modelu.

Pokud je v hierarchii souborů nalezeno více _ViewImports. cshtml souborů, kombinované chování direktiv jsou:

  • @addTagHelper, @removeTagHelper : všechny spuštěné, v pořadí
  • @tagHelperPrefix: nejbližší z nich přepisuje všechny ostatní.
  • @model: nejbližší z nich přepisuje všechny ostatní.
  • @inherits: nejbližší z nich přepisuje všechny ostatní.
  • @using: vše je zahrnuto; duplicity se ignorují.
  • @inject: pro každou vlastnost, která je nejblíže k zobrazení, potlačí všechny ostatní se stejným názvem vlastnosti.

Spuštění kódu před každým zobrazením

Kód, který musí být spuštěn před každým zobrazením nebo stránkou, by měl být umístěn v souboru _ViewStart. cshtml . Podle konvence je soubor _ViewStart. cshtml umístěný ve složce Pages (nebo views). Příkazy uvedené v _ViewStart. cshtml jsou spouštěny před všemi úplnými zobrazeními (nikoli rozloženími, nikoli v částečných zobrazeních). Podobně jako ViewImports. cshtmlje _ViewStart. cshtml hierarchicky. Je-li soubor _ViewStart. cshtml definován ve složce zobrazení nebo stránky, bude spuštěn po jednom definovaném kořenu složky stránky (nebo zobrazení) (pokud existuje).

Ukázkový _ViewStart soubor. cshtml :

@{
    Layout = "_Layout";
}

Výše uvedený soubor určuje, že všechna zobrazení budou používat rozvržení _Layout. cshtml .

_ViewStart. cshtml a _ViewImports. cshtml nejsou obvykle umístěny ve složce /Pages/Shared (nebo /views/Shared). Verze těchto souborů na úrovni aplikace by měly být umístěné přímo ve složce /Pages (nebo /views).