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

Nézetek a ASP.NET Core MVC-ben

Steve Smith és Dave Brock

Ez a dokumentum ASP.NET Core MVC-alkalmazásokban használt nézeteket ismerteti. A Pages szolgáltatással kapcsolatos információkért Razor lásd Razor a Pages architektúráját és a ASP.NET Core alapelveit.

A Model-View-Controller (MVC) mintában a nézet kezeli az alkalmazás adatbemutatóját és felhasználói interakcióit. A nézet egy HTML-sablon beágyazott Razor korrektúrával. Razor A korrektúra olyan kód, amely a HTML-korrektúrával együttműködve létrehoz egy, az ügyfélnek küldött weblapot.

A ASP.NET Core MVC-ben a nézetek .cshtml olyan fájlok, amelyek a C# programozási nyelvet használják a korrektúra használatával Razor . A megtekintési fájlok általában az alkalmazás vezérlőinek nevesített mappákba vannak csoportosítva. A mappák az Views alkalmazás gyökerében található mappában vannak tárolva:

A Visual Studio Megoldáskezelőjének Nézetek mappája meg van nyitva a Home About.cshtml, Contact.cshtml és Index.cshtml fájlok megjelenítéséhez megnyitott mappával

A Home vezérlőt a Home mappán belüli Views mappa jelöli. A Home mappa tartalmazza a weblapok AboutContact és a (kezdőlapok) nézeteitIndex. Amikor egy felhasználó a három weblap egyikét kéri, a Home vezérlő vezérlőműveletei határozzák meg, hogy a három nézet közül melyiket használja a weblap létrehozásához és a felhasználónak való visszaadásához.

Az elrendezésekkel konzisztens weblapszakaszokat biztosíthat, és csökkentheti a kódismétlést. Az elrendezések gyakran tartalmazzák az élőfejet, a navigációs és a menüelemeket, valamint az élőlábat. Az élőfej és az élőláb általában számos metaadatelemhez és szkript- és stíluseszközre mutató hivatkozáshoz tartalmaz sablonfeltáró korrektúrát. Az elrendezések segítenek elkerülni ezt a kazántáblás korrektúrát a nézetekben.

A részleges nézetek a nézetek újrafelhasználható részeinek kezelésével csökkentik a kód duplikációját. A részleges nézet például hasznos lehet egy több nézetben megjelenő blogweboldal szerzői életrajzához. A szerzői életrajzok szokásos nézettartalmak, és nem igényelnek kódot a weblap tartalmának létrehozásához. A szerző életrajzi tartalma csak modellkötéssel érhető el a nézet számára, ezért az ilyen típusú tartalmak részleges nézetének használata ideális.

A nézetösszetevők hasonlóak a részleges nézetekhez, mivel lehetővé teszik az ismétlődő kódok csökkentését, de megfelelőek olyan tartalom megtekintéséhez, amely megköveteli a kód futtatását a kiszolgálón a weblap megjelenítéséhez. A megtekintési összetevők akkor hasznosak, ha a renderelt tartalom adatbázis-interakciót igényel, például egy webhely bevásárlókocsija esetében. A weblap kimenetének létrehozásához az összetevők megtekintése nem korlátozódik a modellkötésre.

A nézetek használatának előnyei

A nézetek segítenek a problémák elkülönítésében az MVC-alkalmazásokban azáltal, hogy elválasztják a felhasználói felület jelölését az alkalmazás más részeitől. Az alábbi SoC-kialakítás modulárissá teszi az alkalmazást, amely számos előnnyel jár:

  • Az alkalmazás könnyebben karbantartható, mert jobban rendszerezett. A nézetek általában alkalmazásfunkciók szerint vannak csoportosítva. Így könnyebben megtalálhatja a kapcsolódó nézeteket, amikor egy funkción dolgozik.
  • Az alkalmazás részei lazán vannak összekapcsolva. Az alkalmazás nézeteit az üzleti logikától és az adatelérési összetevőktől elkülönítve hozhatja létre és frissítheti. Az alkalmazás nézeteit anélkül módosíthatja, hogy feltétlenül frissítenie kellene az alkalmazás más részeit.
  • Egyszerűbb tesztelni az alkalmazás felhasználói felületének részeit, mert a nézetek különálló egységek.
  • A jobb szervezettség miatt kevésbé valószínű, hogy véletlenül megismétli a felhasználói felület szakaszait.

Nézet létrehozása

A vezérlőre jellemző nézetek a Views/[ControllerName] mappában jönnek létre. A vezérlők között megosztott nézetek a Views/Shared mappába kerülnek. Nézet létrehozásához adjon hozzá egy új fájlt, és adja meg ugyanazt a nevet, mint a hozzá tartozó vezérlőművelet a .cshtml fájlkiterjesztéssel. A vezérlő műveletének AboutHome megfelelő nézet létrehozásához hozzon létre egy About.cshtml fájlt a Views/Home mappában:

@{
    ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<p>Use this area to provide additional information.</p>

Razor A korrektúra a @ szimbólummal kezdődik. C#-utasítások futtatásához helyezze a Razor C# kódot a kapcsos zárójelek ({ ... }) által beállított kódblokkokban. Lásd például a fent látható "Névjegy" hozzárendelését ViewData["Title"] . Az értékeket a HTML-ben úgy jelenítheti meg, hogy egyszerűen hivatkozik az értékre a @ szimbólummal. Tekintse meg a fenti elemek tartalmát <h2><h3> .

A fent látható tartalom csak a teljes weblap része, amely a felhasználó számára jelenik meg. A lap többi elrendezése és a nézet egyéb gyakori aspektusai más nézetfájlokban vannak megadva. További információkért tekintse meg az Elrendezés témakört.

A vezérlők nézeteinek megadása

A nézetek általában a műveletekből ViewResultadnak vissza egy olyan elemet, amely egy típus ActionResult. A műveletmetódus létrehozhat és visszaadhat közvetlenül, ViewResult de ez általában nem történik meg. Mivel a legtöbb vezérlő öröklődik, Controlleregyszerűen a View segédmetódus használatával adja vissza a következőt ViewResult:

HomeController.cs:

public IActionResult About()
{
    ViewData["Message"] = "Your application description page.";

    return View();
}

Amikor ez a művelet visszatér, az About.cshtml utolsó szakaszban látható nézet a következő weblapként jelenik meg:

Az Edge böngészőben renderelt lap ismertetése

A View segédmetódusnak számos túlterhelése van. Megadhatja a következőket:

  • Explicit nézet a visszatéréshez:

    return View("Orders");

  • A nézetnek átadni kívánt modell :

    return View(Orders);

  • Nézet és modell is:

    return View("Orders", Orders);

Felderítés megtekintése

Amikor egy művelet egy nézetet ad vissza, egy nézetfelderítésnek nevezett folyamat következik be. Ez a folyamat határozza meg, hogy melyik nézetfájlt használja a nézet neve alapján.

A metódus (View) alapértelmezett viselkedése azreturn View();, hogy egy olyan nézetet ad vissza, amelynek a neve megegyezik azzal a műveletmetódussal, amelyből meghívták. A vezérlő metódusnevével például AboutActionResult megkeresheti a nézetfájlt About.cshtml. Először a futtatókörnyezet a nézet mappájába Views/[ControllerName] néz. Ha nem talál egyező nézetet, a nézet mappájában keres Shared .

Nem számít, ha implicit módon adja vissza a ViewResultreturn View(); nézet nevét, vagy explicit módon adja át a metódusnak.Viewreturn View("<ViewName>"); A nézetfelderítés mindkét esetben ebben a sorrendben keres egyező nézetfájlt:

  1. Views/\[ControllerName]/\[ViewName].cshtml
  2. Views/Shared/\[ViewName].cshtml

Nézetnév helyett egy nézetfájl elérési útja is megadható. Ha az alkalmazás gyökerétől kezdve abszolút elérési utat használ (opcionálisan "/" vagy "~/" kezdetű), a .cshtml bővítményt meg kell adni:

return View("Views/Home/About.cshtml");

A relatív elérési út használatával a bővítmény nélkül is megadhat nézeteket a .cshtml különböző könyvtárakban. HomeControllerA nézeten belül relatív elérési úttal térhet visszaIndex:Manage

return View("../Manage/Index");

Hasonlóképpen az aktuális vezérlőspecifikus könyvtárat is megjelölheti a "./" előtaggal:

return View("./About");

A részleges nézetek és nézetösszetevők hasonló (de nem azonos) felderítési mechanizmusokat használnak.

Egyéni IViewLocationExpanderbeállítással testre szabhatja a nézetek alkalmazáson belüli elhelyezésének alapértelmezett konvencióját.

A nézetfelderítés a nézetfájlok fájlnév szerinti megkeresésére támaszkodik. Ha a mögöttes fájlrendszer megkülönbözteti a kis- és nagybetűket, a nézetnevek valószínűleg megkülönböztetik a kis- és nagybetűket. Az operációs rendszerek közötti kompatibilitás érdekében egyezzen a vezérlő és a műveletnevek, valamint a kapcsolódó nézetmappák és fájlnevek közötti kis- és nagybetűkkel. Ha hibát tapasztal, hogy egy nézetfájl nem található a kis- és nagybetűkre érzékeny fájlrendszer használata során, ellenőrizze, hogy a burkolat megegyezik-e a kért nézetfájl és a tényleges nézetfájl neve között.

Kövesse az ajánlott eljárásokat a nézetek fájlszerkezetének rendszerezéséhez, hogy tükrözze a vezérlők, műveletek és nézetek közötti kapcsolatokat a karbantarthatóság és az egyértelműség érdekében.

Adatok továbbítása nézeteknek

Adatok továbbítása nézeteknek több módszerrel:

  • Erősen gépelt adatok: nézetmodell
  • Gyengén beírt adatok
    • ViewData (ViewDataAttribute)
    • ViewBag

Erősen gépelt adatok (nézetmodell)

A leg robusztusabb módszer egy modelltípus megadása a nézetben. Ezt a modellt gyakran nézetmodellnek nevezik. A nézetmodell-típus egy példányát a műveletből adja át a nézetnek.

A nézetmodell használatával adatokat adhat át egy nézetnek, így a nézet kihasználhatja az erős típusellenőrzés előnyeit. Az erős gépelés (vagy erősen gépelt) azt jelenti, hogy minden változó és állandó explicit módon definiált típussal rendelkezik (például string, intvagy DateTime). A nézetben használt típusok érvényességét a rendszer fordításkor ellenőrzi.

A Visual Studio és a Visual Studio Code az IntelliSense nevű szolgáltatással szigorúan beírt osztálytagokat listáz. Ha látni szeretné egy nézetmodell tulajdonságait, írja be a nézetmodell változónevét, majd egy pontot (.). Ez segít gyorsabban írni a kódot kevesebb hibával.

Adjon meg egy modellt az @model irányelv használatával. A modell használata a következővel @Model:

@model WebApplication1.ViewModels.Address

<h2>Contact</h2>
<address>
    @Model.Street<br>
    @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100
</address>

Ha meg szeretné adni a modellt a nézetnek, a vezérlő paraméterként adja át:

public IActionResult Contact()
{
    ViewData["Message"] = "Your contact page.";

    var viewModel = new Address()
    {
        Name = "Microsoft",
        Street = "One Microsoft Way",
        City = "Redmond",
        State = "WA",
        PostalCode = "98052-6399"
    };

    return View(viewModel);
}

A nézethez megadható modelltípusokra nincsenek korlátozások. Azt javasoljuk, hogy egyszerű régi CLR-objektum (POCO) nézetmodelleket használ, és ne definiálja a viselkedést (metódusokat). A nézetmodell-osztályok általában a Models mappában vagy egy külön ViewModels mappában vannak tárolva az alkalmazás gyökerénél. A Address fenti példában használt nézetmodell egy POCO-nézetmodell, amely a következő nevű Address.csfájlban van tárolva:

namespace WebApplication1.ViewModels
{
    public class Address
    {
        public string Name { get; set; }
        public string Street { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string PostalCode { get; set; }
    }
}

Semmi sem akadályozza meg abban, hogy ugyanazokat az osztályokat használja mind a nézetmodellek, mind az üzleti modelltípusok esetében. A különálló modellek használata azonban lehetővé teszi, hogy a nézetek az alkalmazás üzleti logikájától és adathozzáférési részeitől függetlenül változnak. A modellek és a nézetmodellek elkülönítése biztonsági előnyöket is kínál, ha a modellek modellkötést és érvényesítést használnak a felhasználó által az alkalmazásnak küldött adatokhoz.

Gyengén beírt adatok (ViewData, [ViewData] attribútum és ViewBag)

ViewBag alapértelmezés szerint nem érhető el a következő helyen Razor : LaposztályokPageModel.

Az erősen beírt nézetek mellett a nézetek hozzáférhetnek egy gyenge gépelt (más néven lazán gépelt) adatgyűjteményhez. Az erős típusokkal ellentétben a gyenge típusok (vagy laza típusok) azt jelentik, hogy nem deklarálja explicit módon a használt adattípust. A gyengén beírt adatok gyűjteményével kis mennyiségű adatot adhat át a vezérlőkben és nézetekben.

Adatok továbbítása ... Example
Vezérlő és nézet Legördülő lista feltöltése adatokkal.
Nézet és elrendezés nézet <title> Az elem tartalmának beállítása az elrendezési nézetben egy nézetfájlból.
Részleges nézet és nézet Egy widget, amely a felhasználó által kért weblap alapján jeleníti meg az adatokat.

Ez a gyűjtemény a vezérlők és ViewData nézetek tulajdonságain keresztül ViewBag hivatkozhat rá. A ViewData tulajdonság gyengén beírt objektumok szótára. A ViewBag tulajdonság egy burkoló, ViewData amely dinamikus tulajdonságokat biztosít az alapul szolgáló ViewData gyűjtemény számára. Megjegyzés: A kulcskeresések a kis- és ViewDatanagybetűk szempontjából ViewBag nem érzéketlenek.

ViewData és ViewBag futásidőben dinamikusan feloldódnak. Mivel nem kínálnak fordítási idő típusú ellenőrzést, mindkettő általában nagyobb hibalehetőséget kínál, mint egy nézetmodell használata. Ezért egyes fejlesztők inkább minimálisan vagy soha nem használják ViewData és ViewBag.

ViewData

ViewData egy ViewDataDictionary kulcsokon keresztül string elért objektum. A sztringadatok közvetlenül tárolhatók és használhatók anélkül, hogy öntvényre lenne szükség, de a kinyerésükkor más ViewData objektumértékeket is adott típusokra kell leadnia. ViewData A vezérlők adatainak továbbítása nézetekbe és nézetekbe, beleértve a részleges nézeteket és elrendezéseket is.

Az alábbi példa egy üdvözlés és egy cím ViewData értékét állítja be egy művelettel:

public IActionResult SomeAction()
{
    ViewData["Greeting"] = "Hello";
    ViewData["Address"]  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}

Az adatok használata nézetben:

@{
    // Since Address isn't a string, it requires a cast.
    var address = ViewData["Address"] as Address;
}

@ViewData["Greeting"] World!

<address>
    @address.Name<br>
    @address.Street<br>
    @address.City, @address.State @address.PostalCode
</address>

[ViewData] attribútum

Egy másik megközelítés, amely használja a ViewDataDictionary .ViewDataAttribute Az attribútummal Razor megjelölt vezérlők vagy [ViewData] lapmodellek tulajdonságai a szótárból tárolják és töltik be az értékeiket.

Az alábbi példában a Home vezérlő egy Title tulajdonsággal [ViewData]van megjelölve. A About metódus beállítja a Névjegy nézet címét:

public class HomeController : Controller
{
    [ViewData]
    public string Title { get; set; }

    public IActionResult About()
    {
        Title = "About Us";
        ViewData["Message"] = "Your application description page.";

        return View();
    }
}

Az elrendezésben a cím a ViewData szótárból olvasható:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"] - WebApplication</title>
    ...

ViewBag

ViewBag alapértelmezés szerint nem érhető el a következő helyen Razor : LaposztályokPageModel.

ViewBag Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.DynamicViewData egy olyan objektum, amely dinamikus hozzáférést biztosít a .-ban ViewDatatárolt objektumokhoz. ViewBag használata kényelmesebb lehet, mivel nem igényel öntést. Az alábbi példa bemutatja, hogyan használható ViewBag ugyanazzal az eredménnyel, mint a fenti:ViewData

public IActionResult SomeAction()
{
    ViewBag.Greeting = "Hello";
    ViewBag.Address  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}

@ViewBag.Greeting World!

<address>
    @ViewBag.Address.Name<br>
    @ViewBag.Address.Street<br>
    @ViewBag.Address.City, @ViewBag.Address.State @ViewBag.Address.PostalCode
</address>

Használata és ViewData egyidejű használata ViewBag

ViewBag alapértelmezés szerint nem érhető el a következő helyen Razor : LaposztályokPageModel.

ViewData Mivel ViewBag ugyanazzal a mögöttes ViewData gyűjteményre hivatkozik, használhatja mindkettőtViewData, és ViewBag az értékek olvasása és írása során kombinálhatja és egyezhet közöttük.

A cím ViewBag és a leírás ViewData beállítása a nézet tetején About.cshtml :

@{
    Layout = "/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "About Contoso";
    ViewData["Description"] = "Let us tell you about Contoso's philosophy and mission.";
}

Olvassa el a tulajdonságokat, de megfordítsa a használatot ViewData és ViewBaga . A fájlban _Layout.cshtml szerezze be a címet a következővel ViewData , és szerezze be a leírást ViewBag:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"]</title>
    <meta name="description" content="@ViewBag.Description">
    ...

Ne feledje, hogy a sztringek nem igényelnek cast for ViewData. Öntvény nélkül is használható @ViewData["Title"] .

ViewData Egyszerre és ViewBag egyszerre is működik, ahogy a tulajdonságok keverése és egyező olvasása és írása is. A következő korrektúra jelenik meg:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>About Contoso</title>
    <meta name="description" content="Let us tell you about Contoso's philosophy and mission.">
    ...

A két és a ViewDataViewBag

ViewBag alapértelmezés szerint nem érhető el a következő helyen Razor : LaposztályokPageModel.

  • ViewData
    • Származik ViewDataDictionary, így szótártulajdonságokkal rendelkezik, amelyek hasznosak lehetnek, például ContainsKey, Add, Removeés Clear.
    • A szótárban lévő kulcsok sztringek, ezért a szóköz engedélyezett. Példa: ViewData["Some Key With Whitespace"]
    • A használathoz stringminden más típust ViewData be kell vetni a nézetben.
  • ViewBag
    • Származik Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.DynamicViewData, így lehetővé teszi a dinamikus tulajdonságok létrehozását pont jelöléssel (@ViewBag.SomeKey = <value or object>), és nincs szükség öntésre. A szintaxis ViewBag gyorsabbá teszi a vezérlők és nézetek hozzáadását.
    • Egyszerűbb a null értékek ellenőrzése. Példa: @ViewBag.Person?.Name

Mikor érdemes használni ViewData vagy ViewBag

Mindkettő ViewData , és ViewBag ugyanolyan érvényes módszer arra, hogy kis mennyiségű adatot továbbítsunk a vezérlők és nézetek között. Az, hogy melyiket érdemes használni, az a preferencián alapul. Keverheti és egyeztetheti ViewDataViewBag az objektumokat, de a kód könnyebben olvasható és karbantartható egy következetesen használt megközelítéssel. Mindkét módszer futásidőben dinamikusan oldható fel, így hajlamos a futásidejű hibák okozására. Egyes fejlesztőcsapatok elkerülik őket.

Dinamikus nézetek

Azok a nézetek, amelyek nem deklarálnak modelltípust, @model de amelyeknek átadtak egy modellpéldányt (például return View(Address);) dinamikusan hivatkozhatnak a példány tulajdonságaira:

<address>
    @Model.Street<br>
    @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100
</address>

Ez a funkció rugalmasságot kínál, de nem nyújt fordítási védelmet vagy IntelliSense-t. Ha a tulajdonság nem létezik, a weblap létrehozása futásidőben meghiúsul.

További nézetfunkciók

A címkesegédek megkönnyítik a kiszolgálóoldali viselkedés hozzáadását a meglévő HTML-címkékhez. A Címkesegédek használatával nem kell egyéni kódot vagy segítőket írni a nézetekben. A címkesegítők attribútumként vannak alkalmazva a HTML-elemekre, és a szerkesztők figyelmen kívül hagyják őket, amelyek nem tudják feldolgozni őket. Ez lehetővé teszi a nézet korrektúrák szerkesztését és megjelenítését különböző eszközökben.

Egyéni HTML-korrektúra létrehozása számos beépített HTML-segítővel érhető el. Az összetettebb felhasználói felületi logikát a Nézetösszetevők kezelhetik. A nézetösszetevők ugyanazt a SoC-t biztosítják, amelyet a vezérlők és a nézetek kínálnak. Kiküszöbölhetik a gyakori felhasználói felületi elemek által használt adatokkal foglalkozó műveletek és nézetek szükségességét.

A ASP.NET Core számos más aspektusához hasonlóan a nézetek is támogatják a függőséginjektálást, lehetővé téve a szolgáltatások nézetekbe való beszúrását.

CSS-elkülönítés

A CSS-stílusok elkülönítése az egyes lapokra, nézetekre és összetevőkre a csökkentés vagy az elkerülése érdekében:

  • A globális stílusokkal kapcsolatos függőségek, amelyek fenntartása nehézkes lehet.
  • Stílusütközések beágyazott tartalomban.

Ha hatókörrel rendelkező CSS-fájlt szeretne hozzáadni egy laphoz vagy nézethez, helyezze a CSS-stílusokat a fájl nevének .cshtml.css megfelelő társfájlba.cshtml. A következő példában egy Index.cshtml.css fájl olyan CSS-stílusokat biztosít, amelyek csak az oldalra vagy nézetre Index.cshtml vonatkoznak.

Pages/Index.cshtml.css (Razor oldal) vagy Views/Index.cshtml.css (MVC):

h1 {
    color: red;
}

A CSS elkülönítése a létrehozáskor történik. A keretrendszer újraírja a CSS-választókat, hogy megfeleljenek az alkalmazás oldalai vagy nézetei által megjelenített korrektúrának. Az újraírt CSS-stílusok kötegelve vannak, és statikus objektumként jönnek létre. {APP ASSEMBLY}.styles.css A helyőrző {APP ASSEMBLY} a projekt szerelvényneve. A csomagban lévő CSS-stílusokra mutató hivatkozás az alkalmazás elrendezésébe kerül.

<head> Az alkalmazás Pages/Shared/_Layout.cshtml (Razor Pages) vagy (MVC) tartalmában adja hozzá vagy Views/Shared/_Layout.cshtml erősítse meg a csatolt CSS-stílusokra mutató hivatkozás jelenlétét:

<link rel="stylesheet" href="~/{APP ASSEMBLY}.styles.css" />

Az alábbi példában az alkalmazás szerelvényének neve a következő WebApp:

<link rel="stylesheet" href="WebApp.styles.css" />

A hatókörrel rendelkező CSS-fájlban definiált stílusok csak az egyező fájl renderelt kimenetére lesznek alkalmazva. Az előző példában h1 az alkalmazásban máshol definiált CSS-deklarációk nem ütköznek a Indexcímsorstílussal. A CSS-stílus kaszkádolt és öröklési szabályai továbbra is érvényben maradnak a hatókörön belüli CSS-fájlok esetében. Például a fájl egy <h1> elemére Index.cshtml közvetlenül alkalmazott stílusok felülbírálják a hatókörrel rendelkező CSS-fájl stílusait a fájlban Index.cshtml.css.

Megjegyzés:

Annak érdekében, hogy a CSS-stílusok elkülönítése biztosítható legyen az összekapcsolás során, a CSS kódblokkokban Razor való importálása nem támogatott.

A CSS-elkülönítés csak HTML-elemekre vonatkozik. A CSS-elkülönítés a címkesegítők számára nem támogatott.

A csomagolt CSS-fájlban minden lap, nézet vagy Razor összetevő egy hatókörazonosítóhoz van társítva a formátumban b-{STRING}, ahol a {STRING} helyőrző egy tíz karakterből álló sztring, amelyet a keretrendszer hoz létre. Az alábbi példa a Lapok alkalmazás lapjának előző <h1> eleméhez Index tartozó stílust Razor ismerteti:

/* /Pages/Index.cshtml.rz.scp.css */
h1[b-3xxtam6d07] {
    color: red;
}

Azon a Index lapon, amelyen a CSS-stílust alkalmazza a csomagfájlból, a hatókörazonosító HTML-attribútumként van hozzáfűzve:

<h1 b-3xxtam6d07>

Az azonosító egyedi az alkalmazás számára. A létrehozáskor létrejön egy projektcsomag a konvencióval {STATIC WEB ASSETS BASE PATH}/Project.lib.scp.css, ahol a helyőrző {STATIC WEB ASSETS BASE PATH} a statikus webeszközök alapelérési útja.

Más projektek, például NuGet-csomagok vagy Razor osztálykódtárak használata esetén a csomagban lévő fájl:

  • CsS-importálást használó stílusokra hivatkozik.
  • Nem a stílusokat használó alkalmazás statikus webes objektumaként van közzétéve.

CSS-előfeldolgozó támogatása

A CSS-előfeldolgozók olyan funkciók használatával fejlesztik a CSS-fejlesztést, mint a változók, a beágyazás, a modulok, a mixins és az öröklés. Bár a CSS-elkülönítés natív módon nem támogatja a CSS-előfeldolgozókat( például Sass vagy Less), a CSS-előfeldolgozók integrálása zökkenőmentes, amíg az előfeldolgozó összeállítása még azelőtt történik, hogy a keretrendszer újraírja a CSS-választókat a buildelési folyamat során. A Visual Studio használatával például konfigurálhatja a meglévő előprocesszor-fordítást a Visual Studio Feladatfuttató kezelőjében a Létrehozás előtt feladatként.

Számos külső NuGet-csomag, például AspNetCore.SassCompiler, képes SASS-/SCSS-fájlokat fordítani a buildelési folyamat elején, mielőtt a CSS elkülönítése megtörténik, és nincs szükség további konfigurációra.

CSS-elkülönítés konfigurálása

A CSS-elkülönítés lehetővé teszi bizonyos speciális forgatókönyvek konfigurálásának engedélyezését, például ha függőségek vannak a meglévő eszközöktől vagy munkafolyamatoktól.

Hatókörazonosító formátumának testreszabása

Ebben a szakaszban a {Pages|Views} helyőrző a Pages Pages-alkalmazásokhoz Razor vagy Views az MVC-alkalmazásokhoz tartozik.

Alapértelmezés szerint a hatókör-azonosítók a formátumot b-{STRING}használják, ahol a {STRING} helyőrző egy tíz karakterből áll, amelyet a keretrendszer hoz létre. A hatókörazonosító formátumának testreszabásához frissítse a projektfájlt egy kívánt mintára:

<ItemGroup>
  <None Update="{Pages|Views}/Index.cshtml.css" CssScope="custom-scope-identifier" />
</ItemGroup>

Az előző példában a létrehozott Index.cshtml.css CSS a hatókörazonosítót b-{STRING} a következőre custom-scope-identifiermódosítja: .

Hatókörazonosítók használatával érje el az öröklést hatókörrel rendelkező CSS-fájlokkal. A következő projektfájl-példában egy BaseView.cshtml.css fájl a nézetek gyakori stílusát tartalmazza. Egy DerivedView.cshtml.css fájl örökli ezeket a stílusokat.

<ItemGroup>
  <None Update="{Pages|Views}/BaseView.cshtml.css" CssScope="custom-scope-identifier" />
  <None Update="{Pages|Views}/DerivedView.cshtml.css" CssScope="custom-scope-identifier" />
</ItemGroup>

A helyettesítő karakter (*) operátorral több fájlban oszthat meg hatókör-azonosítókat:

<ItemGroup>
  <None Update="{Pages|Views}/*.cshtml.css" CssScope="custom-scope-identifier" />
</ItemGroup>

Statikus webes objektumok alapútvonalának módosítása

A hatókörbe tartozó CSS-fájl az alkalmazás gyökerénél jön létre. A projektfájlban a StaticWebAssetBasePath tulajdonság használatával módosítsa az alapértelmezett elérési utat. Az alábbi példa a hatókörbe tartozó CSS-fájlt és az alkalmazás többi eszközét az _content elérési útra helyezi:

<PropertyGroup>
  <StaticWebAssetBasePath>_content/$(PackageId)</StaticWebAssetBasePath>
</PropertyGroup>

Automatikus kötegelés letiltása

Ha le szeretné tiltani, hogy a keretrendszer futásidőben tegye közzé és betöltse a hatókörben lévő fájlokat, használja a tulajdonságot DisableScopedCssBundling . A tulajdonság használatakor más eszközök vagy folyamatok felelősek az izolált CSS-fájlok címtárból obj való levételéért, valamint azok futtatókörnyezetben való közzétételéért és betöltéséért:

<PropertyGroup>
  <DisableScopedCssBundling>true</DisableScopedCssBundling>
</PropertyGroup>

Razor osztálykódtár (RCL) támogatása

Ha egy osztálytár (RCL) izoláltRazor stílusokat biztosít, a <link> címke attribútuma href arra mutat{STATIC WEB ASSET BASE PATH}/{PACKAGE ID}.bundle.scp.css, ahol a helyőrzők a következők:

  • {STATIC WEB ASSET BASE PATH}: A statikus webes objektum alap elérési útja.
  • {PACKAGE ID}: A kódtár csomagazonosítója. A csomagazonosító alapértelmezés szerint a projekt szerelvényneve, ha a csomagazonosító nincs megadva a projektfájlban.

Az alábbi példában:

  • A statikus webes objektum alap elérési útja a következő _content/ClassLib: .
  • Az osztálytár szerelvényének neve .ClassLib

Pages/Shared/_Layout.cshtml (Razor oldal) vagy Views/Shared/_Layout.cshtml (MVC):

<link href="_content/ClassLib/ClassLib.bundle.scp.css" rel="stylesheet">

Az RCL-ekkel kapcsolatos további információkért tekintse meg a következő cikkeket:

A CSS-elkülönítésről további Blazor információt a ASP.NET Core Blazor CSS-elkülönítés című témakörben talál.

  • Last updated on