Vytvoření opakovaně použitelného uživatelského rozhraní pomocí Razor projektu knihovny tříd v ASP.NET Core

Autor: Rick Anderson

Razor zobrazení, stránky, kontrolery, modely stránek, Razor komponenty, komponenty zobrazení a datové modely lze integrovat do Razor knihovny tříd (RCL). Seznam RCL lze zabalit a znovu použít. Aplikace můžou obsahovat seznam RCL a přepsat zobrazení a stránky, které obsahuje. Když se ve webové aplikaci i v seznamu RCL najde zobrazení, částečné zobrazení nebo Razor stránka, Razor bude mít přednost revize (.cshtml soubor) ve webové aplikaci.

Informace o tom, jak integrovat npm a webpack do procesu sestavení pro seznam RCL, najdete v tématu Sestavení webových prostředků klienta pro knihovnuRazor tříd.

Vytvoření knihovny tříd obsahující Razor uživatelské rozhraní

Visual Studio

• V sadě Visual Studio vyberte Vytvořit nový nový projekt.
• Vyberte Razor Další knihovnu>tříd.
• Pojmenujte knihovnu (například RazorClassLib), >Vytvořte. Aby nedocházelo ke kolizi názvu souboru s vygenerovanou knihovnou zobrazení, ujistěte se, že název knihovny nekončí .Views.
• Pokud potřebujete, aby knihovna obsahovala stránky nebo zobrazení, vyberte stránky a zobrazení podpory. Ve výchozím nastavení se podporují jenom Razor komponenty. Vyberte Vytvořit.

Šablona Razor knihovny tříd ve výchozím nastavení umožňuje Razor vývoj komponent. Možnost Stránky a zobrazení podpory podporují stránky a zobrazení. Další informace o podpoře seznamu RCL naleznete v Blazortématu Využití ASP.NET základních Razor komponent z Razor knihovny tříd (RCL).

.NET CLI

Z příkazového řádku spusťte dotnet new razorclasslibpříkaz . Příklad:

dotnet new razorclasslib -o RazorUIClassLib

Šablona Razor knihovny tříd ve výchozím nastavení umožňuje Razor vývoj komponent. --support-pages-and-views Předejte možnost (dotnet new razorclasslib --support-pages-and-views) pro zajištění podpory pro stránky a zobrazení.

Další informace najdete v tématu dotnet new. Aby nedocházelo ke kolizi názvu souboru s vygenerovanou knihovnou zobrazení, ujistěte se, že název knihovny nekončí .Views.

Přidejte Razor soubory do seznamu RCL.

Šablony ASP.NET Core předpokládají, že obsah seznamu RCL je ve Areas složce. Pokud chcete vytvořit seznam RCL, který místo toho zpřístupňuje obsah ~/Pages ~/Areas/Pages, podívejte se níže na rozložení Stránek RCL.

Referenční obsah seznamu RCL

Na seznam RCL lze odkazovat pomocí:

• Balíček NuGet Viz Vytváření balíčků NuGet a přidání balíčku dotnet a vytvoření a publikování balíčku NuGet.
• {ProjectName}.csproj. Viz odkaz na dotnet-add.

Přepsání zobrazení, částečných zobrazení a stránek

Když se ve webové aplikaci i v seznamu RCL najde zobrazení, částečné zobrazení nebo Razor stránka, Razor bude mít přednost revize (.cshtml soubor) ve webové aplikaci. Například přidání WebApp1/Areas/MyFeature/Pages/Page1.cshtml do webové aplikace1 a Stránka1 v aplikaci WebApp1 bude mít přednost před Stránkou1 v seznamu RCL.

Ve stažení ukázky přejmenujte WebApp1/Areas/MyFeature2 na WebApp1/Areas/MyFeature prioritu testování.

RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml Zkopírujte částečné zobrazení do WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtmlsložky . Aktualizujte kód tak, aby označí nové umístění. Sestavte a spusťte aplikaci, abyste ověřili, že se používá verze částečné aplikace.

Pokud seznam RCL používá Razor stránky, povolte Razor v hostitelské aplikaci služby Pages a koncové body:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

Rozložení Stránek seznamu RCL

Pokud chcete odkazovat na obsah seznamu RCL, jako by byl součástí složky webové aplikace Pages , vytvořte projekt RCL s následující strukturou souborů:

• RazorUIClassLib/Pages
• RazorUIClassLib/Pages/Shared

Předpokládejme, že RazorUIClassLib/Pages/Shared obsahuje dva částečné soubory: _Header.cshtml a _Footer.cshtml. Značky <partial> se dají přidat do _Layout.cshtml souboru:

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

_ViewStart.cshtml Přidejte soubor do složky projektu Pages RCL pro použití _Layout.cshtml souboru z hostitelské webové aplikace:

@{
    Layout = "_Layout";
}

Vytvoření seznamu RCL se statickými prostředky

Seznam RCL může vyžadovat doprovodné statické prostředky, na které může odkazovat RCL nebo spotřebovává aplikace seznamu RCL. ASP.NET Core umožňuje vytvářet seznamy RCLS, které obsahují statické prostředky, které jsou dostupné pro využívání aplikace.

Pokud chcete zahrnout doprovodné prostředky jako součást seznamu RCL, vytvořte wwwroot složku v knihovně tříd a zahrňte do této složky všechny požadované soubory.

Při balení seznamu RCL se všechny doprovodné prostředky ve wwwroot složce automaticky zahrnou do balíčku.

dotnet pack Místo verze NuGet.exe nuget packpoužijte příkaz .

Přidání webových prostředků klienta do procesu sestavení

Integrace webových prostředků klienta do kanálu buildu je netriviální. Další informace najdete v tématu Sestavení webových prostředků klienta pro knihovnu Razor tříd.

Vyloučení statických prostředků

Chcete-li vyloučit statické prostředky, přidejte požadovanou cestu vyloučení do $(DefaultItemExcludes) skupiny vlastností v souboru projektu. Oddělte položky středníkem (;).

V následujícím příkladu lib.css se šablona stylů ve wwwroot složce nepovažuje za statický prostředek a není součástí publikovaného seznamu RCL:

<PropertyGroup>
  <DefaultItemExcludes>$(DefaultItemExcludes);wwwroot\lib.css</DefaultItemExcludes>
</PropertyGroup>

Integrace TypeScriptu

Zahrnutí souborů TypeScript do seznamu RCL:

1. Odkazujte na Microsoft.TypeScript.MSBuild balíček NuGet v projektu.

   Poznámka:

   Pokyny k přidávání balíčků do aplikací .NET najdete v článcích v části Instalace a správa balíčků na webu Pracovní postup používání balíčků (dokumentace k NuGetu). Ověřte správné verze balíčků na NuGet.org.

2. Umístěte soubory TypeScriptu (.ts) mimo wwwroot složku. Například soubory umístěte do Client složky.

3. Nakonfigurujte výstup sestavení TypeScriptu wwwroot pro složku. TypescriptOutDir Nastavte vlastnost uvnitř PropertyGroup souboru projektu:

   <TypescriptOutDir>wwwroot</TypescriptOutDir>
   

4. Zahrňte cíl TypeScriptu jako závislost PrepareForBuildDependsOn cíle tak, že do PropertyGroup souboru projektu přidáte následující cíl:

   <PrepareForBuildDependsOn>
     CompileTypeScript;
     GetTypeScriptOutputForPublishing;$(PrepareForBuildDependsOn)
   </PrepareForBuildDependsOn>
   

Využívání obsahu z odkazovaného seznamu RCL

Soubory zahrnuté ve wwwroot složce seznamu RCL jsou vystaveny buď seznamu RCL, nebo spotřebované aplikaci pod předponou _content/{PACKAGE ID}/. Například knihovna s názvem Razor.Class.Lib sestavení a bez <PackageId> zadaného v souboru projektu vede k cestě ke statickému obsahu na adrese _content/Razor.Class.Lib/. Při vytváření balíčku NuGet a název sestavení není stejný jako ID balíčku (<PackageId> v souboru projektu knihovny), použijte ID balíčku, jak je uvedeno v souboru projektu pro {PACKAGE ID}.

Využívání aplikace odkazuje na statické prostředky poskytované knihovnou se značkami , <style>, <img>a dalšími značkami <script>HTML. Aplikace, která využívá, musí mít povolenou podporu statických souborů:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

Při spuštění aplikace z výstupu sestavení (dotnet run) jsou ve vývojovém prostředí ve výchozím nastavení povolené statické webové prostředky. Pokud chcete podporovat prostředky v jiných prostředích při spuštění z výstupu sestavení, zavolejte UseStaticWebAssets tvůrce hostitelů v Program.cs:

var builder = WebApplication.CreateBuilder(args);

builder.WebHost.UseWebRoot("wwwroot");
builder.WebHost.UseStaticWebAssets();

builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Volání UseStaticWebAssets se nevyžaduje při spuštění aplikace z publikovaného výstupu (dotnet publish).

Tok vývoje s více projekty

Při spuštění aplikace s využitím:

• Prostředky v seznamu RCL zůstanou v původních složkách. Prostředky se nepřesouvají do spotřebová aplikace.
• Jakákoli změna ve složce seznamu RCL wwwroot se projeví v spotřebě aplikace po opětovném vytvoření seznamu RCL a bez opětovného sestavení náročné aplikace.

Při sestavení seznamu RCL se vytvoří manifest, který popisuje umístění statických webových prostředků. Spotřeba aplikace načte manifest za běhu, aby spotřebovala prostředky z odkazovaných projektů a balíčků. Když se do seznamu RCL přidá nový prostředek, musí být seznam RCL znovu sestaven, aby se aktualizoval jeho manifest, aby mohl uživatel získat přístup k novému prostředku.

Publikovat

Při publikování aplikace se doprovodné prostředky ze všech odkazovaných projektů a balíčků zkopírují do wwwroot složky publikované aplikace v části _content/{PACKAGE ID}/. Při vytváření balíčku NuGet a název sestavení není stejný jako ID balíčku (<PackageId> v souboru projektu knihovny), použijte ID balíčku, jak je uvedeno v souboru projektu pro {PACKAGE ID} zkoumání wwwroot složky publikovaných prostředků.

Další materiály

• Zobrazení nebo stažení ukázkového kódu (postup stažení)

• Využívání komponent ASP.NET Core Razor v knihovně tříd Razor (RCL)

• Blazor izolace základní šablon stylů CSS ASP.NET