Zobrazení v ASP.NET Core MVC

Steve Smith a Dave Brock

Tento dokument vysvětluje zobrazení používaná v ASP.NET Core MVC. Informace o Razor stránkách najdete v tématu Úvod do Razor stránek v ASP.NET Core .

Ve vzoru MVC (Model-View-Controller) zpracovává zobrazení prezentaci dat aplikace a interakci uživatele. Zobrazení je šablona HTML s vloženým Razor kódem. Razor markup je kód, který komunikuje s kódem HTML a vytváří webovou stránku, která se odesílá klientovi.

V ASP.NET Core MVC jsou zobrazení soubory, které v kódu používají programovací .cshtml jazyk Razor C#. Soubory zobrazení se obvykle seskupí do složek s názvem pro každý z kontrolerů aplikace. Složky jsou uložené ve Views složce v kořenovém adresáři aplikace:

Složka Views v Průzkumník řešení Visual Studio je otevřená v otevřené složce Home pro zobrazení souborů About.cshtml, Contact.cshtml a Index.cshtml.

Kontroler Home je reprezentován Home složku ve Views složce . Složka Home obsahuje zobrazení webových stránek , a About Contact Index (domovská stránka). Když si uživatel vyžádá jednu z těchto tří webových stránek, akce kontroleru v kontroleru určí, které ze tří zobrazení se použije k vytvoření a vrácení webové Home stránky uživateli.

Pomocí rozložení můžete zajistit konzistentní oddíly webové stránky a omezit opakování kódu. Rozložení často obsahují záhlaví, prvky navigace a nabídky a zápatí. Záhlaví a zápatí obvykle obsahují často používaný kód pro mnoho prvků metadat a odkazy na prostředky skriptu a stylu. Rozložení vám pomůžou vyhnout se tomuto často používaným přirážce ve vašich zobrazeních.

Částečná zobrazení omezují duplikaci kódu tím, že spravují znovu použitelné části zobrazení. Částečné zobrazení je například užitečné pro biografii autora na webu blogu, který se zobrazuje v několika zobrazeních. Autografie je běžný obsah s prohlížením a nevyžaduje spuštění kódu k vytvoření obsahu webové stránky. Obsah autografie je k dispozici pro zobrazení samotnou vazbou modelu, takže použití částečného zobrazení pro tento typ obsahu je ideální.

Komponenty zobrazení se podobají částečným zobrazením v tom, že umožňují omezit opakující se kód, ale jsou vhodné pro zobrazení obsahu, který vyžaduje spuštění kódu na serveru, aby bylo možné webovou stránku vykreslit. Komponenty zobrazení jsou užitečné, když vykreslený obsah vyžaduje interakci s databází, například pro nákupní košík webu. Komponenty zobrazení se při vytváření výstupu webové stránky omezují na vazbu modelu.

Výhody používání zobrazení

Zobrazení pomáhají stanovit oddělení obav v rámci aplikace MVC oddělením značek uživatelského rozhraní od ostatních částí aplikace. Díky následujícímu návrhu SoC je vaše aplikace modulární, což poskytuje několik výhod:

  • Údržba aplikace je jednodušší, protože je lépe uspořádaná. Zobrazení jsou obecně seskupená podle funkce aplikace. To usnadňuje hledání souvisejících zobrazení při práci na funkci.
  • Části aplikace jsou volně sované. Zobrazení aplikace můžete vytvářet a aktualizovat odděleně od obchodní logiky a komponent pro přístup k datům. Zobrazení aplikace můžete upravit, aniž byste museli aktualizovat jiné části aplikace.
  • Testování částí uživatelského rozhraní aplikace je jednodušší, protože zobrazení jsou samostatné jednotky.
  • Z důvodu lepší organizace je méně pravděpodobné, že omylem zopakujete oddíly uživatelského rozhraní.

Vytvoření zobrazení

Zobrazení specifická pro kontroler se vytvoří ve Views/[ControllerName] složce . Zobrazení sdílená mezi řadiči se umístí do Views/Shared složky . Pokud chcete vytvořit zobrazení, přidejte nový soubor a dejte mu stejný název jako jeho přidruženou akci kontroleru s .cshtml příponou souboru. Pokud chcete vytvořit zobrazení, které odpovídá About akci v Home kontroleru, vytvořte About.cshtml ve složce soubor Views/Home :

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

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

Razor značka začíná @ symbolem . Spusťte příkazy jazyka C# umístěním kódu C# do Razor bloků kódu nastavených složenou závorkou ( { ... } ). Podívejte se například na přiřazení "About" k ViewData["Title"] výše uvedenému příkladu. Hodnoty můžete zobrazit v html jednoduše tak, že na hodnotu odkazujete @ symbolem . Podívejte se na obsah prvků <h2> <h3> a výše.

Výše uvedený obsah je součástí celé webové stránky, která se uživateli vykreslí. Zbytek rozložení stránky a další běžné aspekty zobrazení jsou určené v jiných souborech zobrazení. Další informace najdete v tématu Rozložení.

Jak kontrolery určují zobrazení

Zobrazení se obvykle vrací z akcí jako ViewResult , což je typ ActionResult . Metoda akce může vytvořit a vrátit objekt přímo, ale to se ViewResult běžně dělá. Vzhledem k tomu, že většina kontrolerů dědí z , stačí Controller pomocí View pomocné metody vrátit ViewResult :

HomeController.cs:

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

    return View();
}

Po návratu této akce se About.cshtml zobrazení zobrazené v poslední části vykreslí jako následující webová stránka:

Informace o stránce vykreslené v prohlížeči Edge

Pomocná View metoda má několik přetížení. Volitelně můžete zadat:

  • Explicitní zobrazení, které se má vrátit:

    return View("Orders");
    
  • Model, který se má předat do zobrazení:

    return View(Orders);
    
  • Zobrazení i model:

    return View("Orders", Orders);
    

Zobrazení zjišťování

Když akce vrátí zobrazení, dojde k procesu zvaného zobrazení zjišťování. Tento proces určuje, který soubor zobrazení se použije, na základě názvu zobrazení.

Výchozím chováním metody ( ) je vrácení zobrazení se stejným názvem jako metoda akce, ze které View return View(); je volána. Například název metody kontroleru slouží k vyhledání About ActionResult souboru zobrazení s názvem About.cshtml . Nejprve modul runtime vyhledá Views/[ControllerName] zobrazení ve složce . Pokud tam nenajde odpovídající zobrazení, vyhledá zobrazení Shared ve složce.

Nezáleží na tom, jestli implicitně vrátíte s nebo explicitně předáte název zobrazení ViewResult return View(); View metodě pomocí return View("<ViewName>"); . V obou případech zobrazte hledání zjišťování odpovídajícího souboru zobrazení v tomto pořadí:

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

Místo názvu zobrazení může být zadaná cesta k souboru zobrazení. Pokud používáte absolutní cestu začínající v kořenovém adresáři aplikace (volitelně začínající na "/" nebo "~/"), je nutné .cshtml zadat rozšíření:

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

Můžete také použít relativní cestu k určení zobrazení v různých adresářích bez .cshtml rozšíření. Uvnitř HomeController objektu můžete vrátit Index zobrazení s Manage relativní cestou:

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

Podobně můžete aktuální adresář specifický pro kontroler označit předponou "./":

return View("./About");

Částečná zobrazení a součásti zobrazení používají podobné (ale ne identické) mechanismy zjišťování.

Výchozí konvenci pro umístění zobrazení v aplikaci můžete přizpůsobit pomocí vlastního IViewLocationExpander .

Zjišťování zobrazení spoléhá na hledání souborů zobrazení podle názvu souboru. Pokud se v základním systému souborů rozlišují malá a velká písmena, rozlišují se v názvech zobrazení pravděpodobně malá a velká písmena. Z důvodu kompatibility napříč operačními systémy se musí shodovat velká a malá písmena mezi názvy kontroleru a akce a přidruženými složkami zobrazení a názvy souborů. Pokud při práci se systémem souborů rozlišující velká a malá písmena narazíte na chybu, že se soubor zobrazení nenašel, zkontrolujte, jestli se velikost písmen mezi požadovaným souborem zobrazení a skutečným názvem souboru zobrazení shoduje.

Dodržujte osvědčený postup uspořádání struktury souborů pro vaše zobrazení tak, aby odrážely vztahy mezi kontrolery, akcemi a zobrazeními pro zajištění udržovatelnosti a přehlednosti.

Předání dat do zobrazení

Předejte data zobrazením pomocí několika přístupů:

  • Data silného typu: viewmodel
  • Slabě typovaná data
    • ViewData (ViewDataAttribute)
    • ViewBag

Data silného typu (viewmodel)

Nej robustnějším přístupem je určení typu modelu v zobrazení. Tento model se běžně označuje jako model viewmodel. Instanci typu modelu viewmodel předáte z akce do zobrazení.

Použití modelu viewmodel k předání dat do zobrazení umožňuje, aby zobrazení využilo silné kontroly typu. Silné psaní (nebo silné typy) znamená, že každá proměnná a konstanta mají explicitně definovaný typ (například string , nebo int DateTime ). Platnost typů použitých v zobrazení se kontroluje v době kompilace.

Visual Studio a Visual Studio Code členů třídy silného typu pomocí funkce s názvem IntelliSense. Pokud chcete zobrazit vlastnosti modelu viewmodel, zadejte název proměnné pro model viewmodel následovaný tečkou ( . ). To vám pomůže psát kód rychleji s menším počtem chyb.

Zadejte model pomocí @model direktivy . Použití modelu s @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>

Aby kontroler poskytl model do zobrazení, předá ho jako parametr:

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);
}

Pro typy modelů, které můžete poskytnout zobrazení, neexistují žádná omezení. Doporučujeme používat modely zobrazení objektů POCO (Plain Old CLR Object) s malým nebo žádným chováním (metodami). Třídy modelu viewmodel jsou obvykle uložené ve složce nebo v samostatné složce v Models ViewModels kořenovém adresáři aplikace. Model Address viewmodel použitý v příkladu výše je model zobrazení poco uložený v souboru s názvem Address.cs :

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; }
    }
}

Nic vám nebrání v použití stejných tříd pro typy modelu viewmodel i pro typy obchodních modelů. Použití samostatných modelů ale umožňuje, aby se vaše zobrazení lichaly nezávisle na obchodní logice a částech aplikace pro přístup k datům. Oddělení modelů a modelů viewmodel nabízí také výhody zabezpečení, pokud modely používají vazbu modelu a ověřování dat odeslaných do aplikace uživatelem.

Slabě typovaná data ( ViewData , [ViewData] atribut a ViewBag )

ViewBagnení ve výchozím nastavení k dispozici pro použití v nástroji Razor Třídy PageModel stránek.

Kromě zobrazení se silnými typy mají zobrazení přístup ke slabě typované kolekci dat (také nazývané volně typované). Na rozdíl od silných typů slabé typy (nebo volné typy) znamená, že explicitně nedeklarujete typ dat, která používáte. Kolekci slabě typovaných dat můžete použít k předávání malých objemů dat do kontrolerů a zobrazení a z kontrolerů a zobrazení.

Předávání dat mezi ... Příklad
Kontroler a zobrazení Naplnění rozevíracího seznamu daty
Zobrazení a zobrazení rozložení Nastavení <title> obsahu elementu v zobrazení rozložení ze souboru zobrazení
Částečné zobrazení a zobrazení Widget, který zobrazuje data na základě webové stránky, kterou si uživatel vyžádal

Na tuto kolekci je možné odkazovat pomocí vlastností ViewData nebo ViewBag u kontrolerů a zobrazení. Vlastnost ViewData je slovník slabě typovaných objektů. Vlastnost ViewBag je obálka, která ViewData poskytuje dynamické vlastnosti pro podkladovou ViewData kolekci. Poznámka: Při vyhledávání klíčů se u i rozlišují malá a ViewData velká ViewBag písmena.

ViewData a ViewBag se dynamicky řeší za běhu. Vzhledem k tomu, že nabízejí kontrolu typů v době kompilace, jsou obě obecně náchylnější k chybám než použití modelu viewmodel. Z tohoto důvodu někteří vývojáři dávají přednost minimálně nebo nikdy použít a ViewData ViewBag .

ViewData

ViewData je ViewDataDictionary objekt, ke kterým se přistupuje string prostřednictvím klíčů. Řetězcová data lze ukládat a používat přímo bez potřeby přetypování, ale při extrahování je musíte přetypovat na ViewData konkrétní typy jiných objektů. Můžete použít k předání dat z kontrolerů do zobrazení a v rámci ViewData zobrazení, včetně částečných zobrazení a rozložení.

Následuje příklad, který nastaví hodnoty pozdravu a adresy pomocí ViewData v akci:

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

    return View();
}

Práce s daty v zobrazení:

@{
    // 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>

Atribut [ViewData]

Dalším přístupem, který používá ViewDataDictionary , je ViewDataAttribute . Vlastnosti kontrolerů nebo Razor stránkových modelů označených atributem mají své hodnoty uložené a [ViewData] načtené ze slovníku.

V následujícím příkladu Home obsahuje kontroler vlastnost Title označenou jako [ViewData] . Metoda About nastaví název zobrazení O nás:

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

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

        return View();
    }
}

V rozložení se název načte ze slovníku ViewData:

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

ViewBag

ViewBagnení ve výchozím nastavení k dispozici pro použití v nástroji Razor Třídy PageModel stránek.

ViewBag je Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.DynamicViewData objekt, který poskytuje dynamický přístup k objektům uloženým v ViewData . ViewBag může být pro práci pohodlnější, protože nevyžaduje přetypování. Následující příklad ukazuje, jak použít ViewBag se stejným výsledkem jako při použití ViewData výše:

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>

Použití ViewData ViewBag a současně

ViewBagnení ve výchozím nastavení k dispozici pro použití v nástroji Razor Třídy PageModel stránek.

Vzhledem k tomu, že a odkazují na stejnou podkladovou kolekci, můžete při čtení a zápisu hodnot použít a a kombinovat a ViewData ViewBag ViewData ViewData ViewBag shodovat mezi nimi.

Nastavte název pomocí ViewBag a popis pomocí v horní části ViewData About.cshtml zobrazení:

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

Čtení vlastností, ale obrácení použití a ViewData ViewBag . V souboru _Layout.cshtml získejte název pomocí a ViewData získejte popis pomocí ViewBag :

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

Nezapomeňte, že řetězce nevyžadují přetypování pro ViewData . Můžete použít bez @ViewData["Title"] přetypování.

Současně funguje použití i , stejně jako kombinace a porovnávání čtení ViewData ViewBag a zápisu vlastností. Vykreslí se následující kód:

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

Shrnutí rozdílů mezi ViewData a ViewBag

ViewBagnení ve výchozím nastavení k dispozici pro použití v nástroji Razor Třídy PageModel stránek.

  • ViewData
    • Je odvozen z ViewDataDictionary , takže obsahuje vlastnosti slovníku, které mohou být užitečné, například , , a ContainsKey Add Remove Clear .
    • Klíče ve slovníku jsou řetězce, takže jsou povolené prázdné znaky. Příklad: ViewData["Some Key With Whitespace"]
    • Pro použití musí být v zobrazení string přetypování jakéhokoli jiného typu než ViewData .
  • ViewBag
    • Je odvozen z , takže umožňuje vytváření dynamických vlastností pomocí tečkové notace ( ) a Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.DynamicViewData nevyžaduje se žádné @ViewBag.SomeKey = <value or object> přetypování. Syntaxe ViewBag urychluje přidávání do kontrolerů a zobrazení.
    • Jednodušší kontrola hodnot null. Příklad: @ViewBag.Person?.Name

Kdy použít ViewData nebo ViewBag

I ViewData ViewBag jsou stejně platné přístupy pro předávání malých objemů dat mezi kontrolery a zobrazeními. Volba toho, který z nich se má použít, je založená na předvolbách. Můžete ale kombinovat a párovat objekty a a díky konzistentnímu používání jednoho přístupu je kód snadněji čitelný a ViewData ViewBag udržovat. Oba přístupy se dynamicky řeší za běhu, a proto jsou náchylné k chybám za běhu. Některé vývojové týmy se jim vyhýbat.

Dynamická zobrazení

Zobrazení, která nedeklarují typ modelu pomocí , ale mají předané instance modelu (například ), mohou dynamicky odkazovat na @model return View(Address); vlastnosti instance:

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

Tato funkce nabízí flexibilitu, ale nenabízí ochranu kompilace ani IntelliSense. Pokud vlastnost neexistuje, generování webové stránky selže za běhu.

Další funkce zobrazení

Pomocná opatření značek usnadňuje přidání chování na straně serveru do existujících značek HTML. Používání pomocníků značek zabraňuje tomu, aby v zobrazeních bylo potřeba psát vlastní kód nebo pomocné objekty. Pomocná opatření značek se používají jako atributy prvků HTML a editory je ignorují, aby je nezpracují. To vám umožní upravovat a vykreslovat značky zobrazení v různých nástrojích.

K vygenerování vlastního kódu HTML můžete použít mnoho integrovaných pomocníků HTML. Složitější logiku uživatelského rozhraní může zpracovat komponenta View Components. Komponenty zobrazení poskytují stejný SoC jako kontrolery a zobrazení. Mohou eliminovat potřebu akcí a zobrazení, které se zabývají daty používanými běžnými prvky uživatelského rozhraní.

Stejně jako mnoho dalších aspektů ASP.NET Core zobrazení podporujíinjektáž závislostí, což umožňuje vkládání služeb do zobrazení.

Izolace šablon stylů CSS

Izolujte styly CSS na jednotlivé stránky, zobrazení a komponenty, abyste snížili nebo vyhnuli:

  • Závislosti na globálních stylech, které může být obtížné udržovat.
  • Konflikty stylu ve vnořeném obsahu.

Pokud chcete přidat vymezený soubor CSS pro stránku nebo zobrazení, umístěte styly CSS do doprovodných souborů, které odpovídají názvu .cshtml.css .cshtml souboru. V následujícím příkladu soubor Index.cshtml.css poskytuje styly CSS, které se použijí jenom na stránku Index.cshtml nebo zobrazení.

Pages/Index.cshtml.css ( Razor Stránky) nebo Views/Index.cshtml.css (MVC):

h1 {
    color: red;
}

Izolace šablon stylů CSS probíhá v době sestavení. Tato rozhraní přepíše selektory CSS tak, aby odpovídaly značce vykreslené stránkami nebo zobrazeními aplikace. Přepsané styly CSS se sesbalí a vyprodukuje jako statický prostředek {APP ASSEMBLY}.styles.css . Zástupný {APP ASSEMBLY} symbol je název sestavení projektu. Odkaz na styly šablon stylů CSS, který je součástí balíčku, se umístí do rozložení aplikace.

V obsahu <head> (Pages) nebo Pages/Shared/_Layout.cshtml (MVC) aplikace přidejte nebo potvrďte přítomnost odkazu na sbalené Razor Views/Shared/_Layout.cshtml styly CSS:

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

V následujícím příkladu je název sestavení aplikace WebApp :

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

Styly definované v souboru CSS s vymezenou oborem se použijí jenom na vykreslený výstup odpovídajícího souboru. V předchozím příkladu nejsou deklarace CSS definované jinde v aplikaci v konfliktu h1 Index se stylem nadpisu . Pravidla kaskádového a dědičnosti stylu CSS zůstávají v platnosti pro vymezené soubory CSS. Například styly použité přímo na prvek v souboru <h1> přepíší styly souboru CSS s vymezenou příponou Index.cshtml v Index.cshtml.css souboru .

Poznámka

Aby bylo možné zaručit izolaci stylu CSS při sdružování, import šablon stylů CSS do bloků kódu Razor se nepodporuje.

Izolace šablon stylů CSS se vztahuje pouze na elementy HTML. Izolace šablon stylů CSS se nepodporuje u pomocníků značek.

V balíčku souboru CSS je každá stránka, zobrazení nebo komponenta přidružená k identifikátoru oboru ve formátu , kde zástupný text je řetězec s deseti znaky vygenerovaný Razor b-{STRING} {STRING} architekturou. Následující příklad poskytuje styl pro předchozí <h1> prvek na stránce aplikace Index Razor Pages:

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

Na stránce, na které se ze souboru v sadě používá styl CSS, se identifikátor oboru připojí Index jako atribut HTML:

<h1 b-3xxtam6d07>

Identifikátor je pro aplikaci jedinečný. V době sestavení se vytvoří sada projektů s konvencí , kde zástupný symbol je základní cesta {STATIC WEB ASSETS BASE PATH}/Project.lib.scp.css {STATIC WEB ASSETS BASE PATH} statických webových prostředků.

Pokud se využívají jiné projekty, například NuGet balíčky nebo knihovny tříd Razor ,přibalený soubor:

  • Odkazuje na styly pomocí importů CSS.
  • Není publikovaný jako statický webový prostředek aplikace, která využívá styly.

Podpora preprocesoru CSS

Preprocesory CSS jsou užitečné pro zlepšení vývoje šablon stylů CSS s využitím funkcí, jako jsou proměnné, vnoření, moduly, mixiny a dědičnost. I když izolace šablon stylů CSS nativně nepodporuje preprocesory CSS, jako jsou Sass nebo Less, integrace preprocesorů CSS je bezproblémová, pokud k kompilaci preprocesoru dochází před tím, než rozhraní přepíše selektory CSS během procesu sestavení. Pomocí Visual Studio můžete například nakonfigurovat existující kompilaci preprocesoru jako úlohu Před sestavením v Visual Studio spouštěče úloh.

Mnoho balíčků třetích stran NuGet, například , může kompilovat soubory SASS/SCSS na začátku procesu sestavení před izolací šablon stylů CSS a nevyžaduje Delegate.SassBuilder žádnou další konfiguraci.

Konfigurace izolace šablon stylů CSS

Izolace šablon stylů CSS umožňuje konfiguraci pro některé pokročilé scénáře, například když existují závislosti na existujících nástrojích nebo pracovních postupech.

Přizpůsobení formátu identifikátoru oboru

V této části je zástupný {Pages|Views} symbol buď pro aplikace Pages Razor Pages, nebo pro aplikace Views MVC.

Ve výchozím nastavení používají identifikátory oboru formát , kde zástupný symbol je řetězec s deseti znaky b-{STRING} {STRING} vygenerovaný architekturou. Pokud chcete přizpůsobit formát identifikátoru oboru, aktualizujte soubor projektu na požadovaný vzor:

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

V předchozím příkladu šablona stylů CSS vygenerovaná pro Index.cshtml.css změní identifikátor oboru z na b-{STRING} custom-scope-identifier .

Pomocí identifikátorů oboru můžete dosáhnout dědičnosti pomocí vymezených souborů CSS. V následujícím příkladu souboru projektu obsahuje BaseView.cshtml.css soubor společné styly napříč zobrazeními. Soubor DerivedView.cshtml.css dědí tyto styly.

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

Ke sdílení identifikátorů oboru mezi více soubory použijte operátor se zástupným znakem ( * ):

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

Změna základní cesty pro statické webové prostředky

Vymezený soubor CSS se vygeneruje v kořenovém adresáři aplikace. V souboru projektu použijte vlastnost StaticWebAssetBasePath ke změně výchozí cesty. Následující příklad umístí vymezený soubor CSS a zbývající prostředky aplikace do _content cesty:

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

Zákaz automatického sdružování

Pokud chcete vyjádřit nesouhlas s publikováním architektury a načítáním souborů s vymezenou oborem za běhu, použijte DisableScopedCssBundling vlastnost . Při použití této vlastnosti zodpovídají za převzetí izolovaných souborů CSS z adresáře a jejich publikování a načítání za běhu jiné obj nástroje nebo procesy:

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

Razor Podpora knihovny tříd (RCL)

Pokud Razor knihovna tříd (RCL) poskytuje izolované styly, atribut značky odkazuje na <link> , kde href {STATIC WEB ASSET BASE PATH}/{PACKAGE ID}.bundle.scp.css zástupné symboly jsou:

  • {STATIC WEB ASSET BASE PATH}: Základní cesta statického webového assetu.
  • {PACKAGE ID}: Identifikátor balíčku knihovny. Identifikátor balíčku je ve výchozím nastavení název sestavení projektu, pokud identifikátor balíčku není zadaný v souboru projektu.

V následujícím příkladu:

  • Základní cesta statického webového assetu je _content/ClassLib .
  • Název sestavení knihovny tříd je ClassLib .

Pages/Shared/_Layout.cshtml ( Razor Stránky) nebo Views/Shared/_Layout.cshtml (MVC):

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

Další informace o seznamech RCL najdete v následujících článcích:

Informace o Blazor izolaci šablon stylů CSS najdete v tématu BlazorASP.NET Core Izolace šablon stylů CSS .