Megosztás a következőn keresztül:

Elrendezés a ASP.NET Core-ban

Steve Smith és Dave Brock

A lapok és nézetek gyakran osztanak meg vizuális és programozott elemeket. Ez a cikk bemutatja, hogyan:

  • Használjon gyakori elrendezéseket.
  • Irányelvek megosztása.
  • Lapok vagy nézetek megjelenítése előtt futtassa a közös kódot.

Ez a dokumentum az ASP.NET Core MVC két különböző megközelítésének elrendezését ismerteti: Razor oldalak, és nézetekkel rendelkező vezérlők. Ebben a témakörben a különbségek minimálisak:

  • Razor A lapok a Lapok mappában találhatók.
  • A nézetekkel rendelkező vezérlők a Nézetek mappát használják a nézetekhez.

Mi az az elrendezés?

A legtöbb webalkalmazás közös elrendezéssel rendelkezik, amely egységes felületet biztosít a felhasználónak lapról lapra navigáláskor. Az elrendezés általában olyan gyakori felhasználói felületi elemeket tartalmaz, mint az alkalmazásfej, a navigációs vagy a menüelemek és az élőláb.

Lapelrendezési példa

Gyakori HTML-struktúrákat, például szkripteket és stíluslapokat is gyakran használnak egy alkalmazás számos oldala. Ezen megosztott elemek mindegyike definiálható egy elrendezésfájlban , amelyre az alkalmazásban használt bármely nézet hivatkozhat. Az elrendezések csökkentik az ismétlődő kódot a nézetekben.

Konvenció szerint egy ASP.NET Core-alkalmazás alapértelmezett elrendezése neve ._Layout.cshtml A sablonokkal létrehozott új ASP.NET Core-projektek elrendezésfájljai a következők:

  • Razor Oldalak: Pages/Shared/_Layout.cshtml

    Lapok mappa a Megoldáskezelőben

  • Nézetekkel ellátott vezérlő: Views/Shared/_Layout.cshtml

    Nézetek mappa a Megoldáskezelőben

Az elrendezés egy legfelső szintű sablont határoz meg az alkalmazásban lévő nézetekhez. Az alkalmazásokhoz nincs szükség elrendezésre. Az alkalmazások több elrendezést is definiálhatnak, különböző nézetekkel, amelyek különböző elrendezéseket határoznak meg.

Az alábbi kód egy vezérlővel és nézetekkel létrehozott sablonprojekt elrendezésfájlját mutatja be:

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

Elrendezés megadása

Razor nézeteknek van egy Layout tulajdonságuk. Az egyes nézetek ennek a tulajdonságnak a beállításával adhatnak meg elrendezést:

@{
    Layout = "_Layout";
}

A megadott elrendezés teljes elérési utat (például /Pages/Shared/_Layout.cshtml vagy /Views/Shared/_Layout.cshtml) vagy részleges nevet (például: _Layout) használhat. Ha részleges nevet ad meg, a nézetmotor a Razor szokásos felderítési folyamattal megkeresi az elrendezésfájlt. A rendszer először azt a mappát keresi meg, amelyben a kezelőmetódus (vagy vezérlő) létezik, majd a Megosztott mappa következik. Ez a felderítési folyamat megegyezik a részleges nézetek felderítésére használt eljárással.

Alapértelmezés szerint minden elrendezésnek meg kell hívnia RenderBody. A hívás RenderBody helyének helyén a nézet tartalma jelenik meg.

Szakaszok

Az elrendezések igény szerint hivatkozhatnak egy vagy több szakaszra a hívással RenderSection. A szakaszok lehetővé teszik bizonyos oldalelemek elhelyezésének rendszerezését. Minden RenderSection hívás megadhatja, hogy az adott szakasz szükséges-e vagy sem.

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

@RenderSection("Scripts", required: false)

Ha nem található egy kötelező szakasz, a rendszer kivételt jelez. Az egyes nézetek a szintaxis használatával @sectionRazor határozzák meg a szakaszon belül megjelenítendő tartalmat. Ha egy oldal vagy nézet meghatároz egy szakaszt, akkor azt renderelni kell (vagy hiba történik).

Egy példa definíció @section a Razor Pages nézetben:

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

Az előzően említett kódban scripts/main.js hozzá van adva a scripts szakaszhoz egy lapon vagy nézetben. Előfordulhat, hogy ugyanazon alkalmazás más lapjai vagy nézetei nem igénylik ezt a szkriptet, és nem definiálnak szkriptszakaszt.

Az alábbi korrektúra a Részleges címke segéd használatával jeleníti meg a következőt _ValidationScriptsPartial.cshtml:

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

Az előző jelölés előre kialakított sablonokkal lett létrehozva Identity.

A lapon vagy nézetben definiált szakaszok csak az azonnali elrendezési lapon érhetők el. Ezekre nem lehet hivatkozni részleges elemekből, nézetösszetevőkből vagy a nézetrendszer más részeiből.

Szakaszok figyelmen kívül hagyása

Alapértelmezés szerint a tartalomoldal törzsét és minden szakaszát az elrendezési oldalnak kell megjelenítenie. A Razor nézetmotor ezt úgy kényszeríti ki, hogy nyomon követi, hogy a törzs és az egyes szakaszok renderelve lettek-e.

Ha arra szeretné utasítani a nézetmotort, hogy figyelmen kívül hagyja a törzset vagy a szakaszokat, hívja meg a IgnoreBody és IgnoreSection metódusokat.

A Razor oldal törzsét és minden szakaszát vagy renderelni kell, vagy figyelmen kívül kell hagyni.

Megosztott irányelvek importálása

A nézetek és lapok használhatják Razor direktívákat névterek importálására és függőségi injektálásra. A számos nézet által megosztott irányelvek meghatározhatók egy közös _ViewImports.cshtml fájlban. A _ViewImports fájl a következő irányelveket támogatja:

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

A fájl nem támogatja az egyéb Razor funkciókat, például a függvényeket és a szakaszdefiníciókat.

Mintafájl _ViewImports.cshtml :

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

Az _ViewImports.cshtml ASP.NET Core MVC-alkalmazás fájlja általában a Lapok (vagy Nézetek) mappába kerül. A _ViewImports.cshtml fájlok bármely mappában elhelyezhetők, ebben az esetben csak az adott mappában és almappáiban lévő oldalakra vagy nézetekre lesz alkalmazva. _ViewImports a fájlok feldolgozása a gyökérszinten kezdődik, majd minden olyan mappánál, amely a lap helyéhez vagy a megtekintéshez vezet. _ViewImports a gyökérszinten megadott beállítások felül bírálhatók a mappa szintjén.

Tegyük fel például:

  • A gyökérszintű _ViewImports.cshtml fájl tartalmazza a @model MyModel1 és @addTagHelper *, MyTagHelper1 elemeket.
  • Az almappa _ViewImports.cshtml fájlja tartalmazza @model MyModel2 és @addTagHelper *, MyTagHelper2.

Az almappában lévő lapok és nézetek egyaránt hozzáférhetnek a Tag Helper segédeszközökhöz és a MyModel2 modellhez.

Ha több _ViewImports.cshtml fájl található a fájlhierarchiában, az irányelvek együttes viselkedése a következő:

  • @addTagHelper, @removeTagHelper: minden fut, sorrendben
  • @tagHelperPrefix: a nézethez legközelebbi felülírja a többit
  • @model: a nézethez legközelebbi felülbírálja a többit
  • @inherits: a nézethez legközelebbi felülírja a többit
  • @using: minden elemet belefoglaltunk; az ismétlődéseket figyelmen kívül hagyjuk
  • @inject: minden tulajdonság esetében a nézethez legközelebbi tulajdonság felülbírálja az azonos tulajdonságnévvel rendelkező többit

Kód futtatása minden nézet előtt

Az egyes nézetek vagy lapok előtt futtatandó kódot a _ViewStart.cshtml fájlba kell helyezni. Konvenció szerint a _ViewStart.cshtml fájl a Lapok (vagy Nézetek) mappában található. A felsorolt _ViewStart.cshtml utasítások minden teljes nézet előtt futnak (nem elrendezések és nem részleges nézetek). A(z) ViewImports.cshtml_ViewStart.cshtml hasonlóan hierarchikus. Ha egy _ViewStart.cshtml fájl a nézet vagy a Lapok mappában van definiálva, az a Lapok (vagy Nézetek) mappa gyökérmappájában (ha van ilyen) definiált fájl után fog futni.

Mintafájl _ViewStart.cshtml :

@{
    Layout = "_Layout";
}

A fenti fájl azt határozza meg, hogy minden nézet használja az elrendezést _Layout.cshtml .

_ViewStart.cshtml és _ViewImports.cshtml általában nem a /Pages/Shared (vagy /Views/Shared) mappába kerülnek. Ezeknek a fájloknak az alkalmazásszintű verzióit közvetlenül a /Pages (vagy /Views) mappába kell helyezni.

  • Last updated on