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). RCL lze zabalit a znovu použít. Aplikace mohou zahrnovat RCL a přepsat zobrazení a stránky, které obsahuje. Když se ve webové aplikaci i v RCL najde zobrazení, částečné zobrazení nebo Razor stránka, přednost bude mít Razor značení (.cshtml soubor) ve webové aplikaci.

Informace o tom, jak integrovat npm a webpack do procesu sestavení pro knihovnu tříd Razor (RCL), najdete v tématu Vytvoření webových prostředků klienta pro vaši Razor knihovnu tříd.

Vytvořte knihovnu tříd obsahující Razor uživatelské rozhraní

Visual Studio

• V sadě Visual Studio vyberte Vytvořit nový nový projekt.
• Vyberte Razor knihovnu tříd>Další.
• 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.
• Pro zajištění toho, aby knihovna obsahovala stránky a/nebo zobrazení, vyberte podporu stránek a zobrazení. Ve výchozím nastavení se podporují jenom Razor komponenty. Vyberte Vytvořit.

Šablona Razor knihovny tříd standardně umožňuje Razor vývoj komponent. Možnost stránky a zobrazení podpory podporuje stránky a zobrazení. Další informace o podpoře RCL naleznete v tématu BlazorRazor

.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 standardně umožňuje Razor vývoj komponent. Předat volbu --support-pages-and-views (dotnet new razorclasslib --support-pages-and-views) pro poskytnutí 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 RCL.

Šablony ASP.NET Core předpokládají, že obsah seznamu RCL je ve Areas složce. Viz níže rozložení stránek RCL pro vytvoření RCL, který zpřístupňuje obsah v ~/Pages, namísto ~/Areas/Pages.

Referenční obsah RCL

Na seznam RCL lze odkazovat pomocí:

• Balíček NuGet Viz Vytváření balíčků NuGet a dotnet přidat balíček a Vytvoření a publikování balíčku NuGet.
• {ProjectName}.csproj. Podívejte se na dotnet-add reference.

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

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

V ukázkovém souboru přejmenujte WebApp1/Areas/MyFeature2 na WebApp1/Areas/MyFeature pro otestování priority.

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

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

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 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í RCL se statickými prostředky

RCL může vyžadovat doprovodné statické zdroje, na které může odkazovat buď samotné RCL, nebo aplikace využívající RCL. ASP.NET Core umožňuje vytvářet RCLs (Razor Class Libraries), které zahrnují statické prostředky dostupné pro aplikaci, která je využívá.

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í RCL se všechny související soubory ve složce wwwroot automaticky zahrnou do balíčku.

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

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

Integrace webových prostředků klienta do sestavovacího procesu je náročná. Další informace najdete v tématu Vytvoření webových prostředků klienta pro knihovnu tříd Razor.

Vyloučit statická aktiva

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 se šablona stylů lib.css ve složce wwwroot nepovažuje za statický prostředek a není zahrnuta v publikovaném RCL.

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

Integrace TypeScriptu

Chcete-li zahrnout soubory TypeScript do RCL:

• 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.

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

• Do souboru projektu přidejte následující kód:

  • Nakonfigurujte výstup sestavení TypeScriptu pro složku wwwroot s vlastností TypescriptOutDir.
  • Zahrňte cíl TypeScriptu jako závislost cíle PrepareForBuildDependsOn.
  • Odstraňte výstup v wwwroot folder.

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    // Markup removed for brevity.
    <TypescriptOutDir>wwwroot</TypescriptOutDir>
    <PrepareForBuildDependsOn>
      CompileTypeScriptWithTSConfig;
      GetTypeScriptOutputForPublishing;$(PrepareForBuildDependsOn)
    </PrepareForBuildDependsOn>
  </PropertyGroup>

  <ItemGroup>
    <Content Remove="wwwroot\{path-to-typescript-outputs}" />
  </ItemGroup>

</Project>

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

Soubory ve složce wwwroot v RCL jsou vystaveny buď RCL, nebo cílové aplikaci pod předponou _content/{PACKAGE ID}/. Například knihovna s názvem sestavení Razor.Class.Lib a bez uvedení <PackageId> ve svém projektovém souboru 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žívající aplikace odkazuje na statické prostředky poskytované knihovnou s použitím značek <script>, <style>, <img> a dalších HTML značek. Konzumní aplikace 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í spotřební aplikace z výstupu sestavení (dotnet run) jsou statické webové prostředky ve vývojovém prostředí ve výchozím nastavení povoleny. Pokud chcete podporovat prostředky v jiných prostředích při spuštění z výstupu sestavení, zavolejte UseStaticWebAssets na host builder 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).

Víceprojektový vývojový tok

Při spuštění spotřební aplikace:

• Prostředky v RCL zůstanou v původních složkách. Prostředky se nepřesouvají do spotřebovávající aplikace.
• Jakákoli změna ve složce RCL wwwroot se projeví v aplikaci, která RCL používá, po opětovném sestavení RCL, aniž by bylo nutné znovu sestavit samotnou uživatelskou aplikaci.

Při sestavení RCL se vytvoří manifest, který popisuje umístění statických webových prostředků. Spotřebovávající aplikace načítá manifest během běhu, aby čerpala prostředky z odkazovaných projektů a balíčků. Když se do RCL přidá nový prostředek, musí být RCL přestavěno, aby se aktualizoval jeho manifest a aplikace mohla 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 pokud 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, při zkoumání složky {PACKAGE ID} s publikovanými prostředky pro wwwroot.

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