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

  • Článek

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í

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

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í:

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

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í knihovny Razor tříd, naleznete v tématu Sestavení webových prostředků klienta pro knihovnu Razortříd.

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

  • 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 podporovat zobrazení, vyberte stránky a zobrazení podpory. Ve výchozím nastavení se podporují jenom Razor stránky. Vyberte Vytvořit.

Šablona Razor knihovny tříd (RCL) ve výchozím nastavení umožňuje Razor vývoj komponent. Možnost Stránky a zobrazení podpory podporují stránky a zobrazení.

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í:

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 .

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").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();

Poznámka: .NET 6 vyžaduje pouze volání builder.WebHost.UseWebRoot("wwwroot").UseStaticWebAssets. Další informace najdete u tohoto problému na GitHubu.

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

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.

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

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

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

Šablona Razor knihovny tříd (RCL) ve výchozím nastavení umožňuje Razor vývoj komponent. Možnost Stránky a zobrazení podpory podporují stránky a zobrazení.

Přidejte Razor soubory do seznamu RCL.

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

Referenční obsah seznamu RCL

Na seznam RCL lze odkazovat pomocí:

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.

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 .

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 ResolveCurrentProjectStaticWebAssets cíle tak, že do PropertyGroup souboru projektu přidáte následující cíl:

    <ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
  CompileTypeScript;
  $(ResolveCurrentProjectStaticWebAssetsInputs)
</ResolveCurrentProjectStaticWebAssetsInputsDependsOn>

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ů v Startup.Configure:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    app.UseStaticFiles();

    ...
}

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:

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStaticWebAssets();
                webBuilder.UseStartup<Startup>();
            });
}

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

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.

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

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

  • V nabídce Soubor sady Visual Studio vyberte Nový>projekt.
  • Vyberte ASP.NET Základní webová aplikace.
  • Pojmenujte knihovnu (například RazorClassLib). > Aby nedocházelo ke kolizi názvu souboru s vygenerovanou knihovnou zobrazení, ujistěte se, že název knihovny nekončí .Views.
  • Ověřte , že je vybraná ASP.NET Core 2.1 nebo novější.
  • Vyberte Razor ok knihovny>tříd.

Seznam RCL obsahuje následující soubor projektu:

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

    <PropertyGroup>
        <TargetFramework>netcoreapp3.1</TargetFramework>
        <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
    </PropertyGroup>

    <ItemGroup>
        <FrameworkReference Include="Microsoft.AspNetCore.App" />
    </ItemGroup>


</Project>

Přidejte Razor soubory do seznamu RCL.

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

Referenční obsah seznamu RCL

Na seznam RCL lze odkazovat pomocí:

Návod: Vytvoření projektu RCL a použití z Razor projektu Pages

Celý projekt si můžete stáhnout a otestovat ho místo jeho vytváření. Ukázkový soubor ke stažení obsahuje další kód a odkazy, které usnadňují testování projektu. V tomto problému s GitHubem můžete zanechat zpětnou vazbu s komentáři ke stažení ukázek a podrobných pokynů.

Otestování aplikace pro stažení

Pokud jste dokončenou aplikaci nestáhli a raději byste vytvořili projekt návodu, přejděte k další části.

.sln Otevřete soubor v sadě Visual Studio. Spustit aplikaci.

Postupujte podle pokynů v testovací webové aplikaci 1.

Vytvoření seznamu RCL

V této části se vytvoří seznam RCL. Razor soubory se přidají do seznamu RCL.

Vytvořte projekt RCL:

  • V nabídce Soubor sady Visual Studio vyberte Nový>projekt.
  • Vyberte ASP.NET Základní webová aplikace.
  • Pojmenujte aplikaci RazorUIClassLib>OK.
  • Ověřte , že je vybraná ASP.NET Core 2.1 nebo novější.
  • Vyberte Razor ok knihovny>tříd.
  • Přidejte částečný Razor soubor zobrazení s názvem RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml.

Přidání Razor souborů a složek do projektu

  • Nahraďte kód RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml následujícím kódem:

    <h3>_Message.cshtml partial view.</h3>

<p>RazorUIClassLib\Areas\MyFeature\Pages\Shared\_Message.cshtml</p>

  • Nahraďte kód RazorUIClassLib/Areas/MyFeature/Pages/Page1.cshtml následujícím kódem:

    @page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<h2>Hello from a Razor UI class library!</h2>
<p> From  RazorUIClassLib\Areas\MyFeature\Pages\Page1.cshtml</p>

<partial name="_Message" />

    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers k použití částečného zobrazení (<partial name="_Message" />). Místo zahrnutí @addTagHelper direktivy můžete přidat _ViewImports.cshtml soubor. Příklad:

    dotnet new viewimports -o RazorUIClassLib/Areas/MyFeature/Pages

    Další informace o _ViewImports.cshtmlimportu sdílených direktiv naleznete v tématu Import sdílených direktiv.

  • Sestavte knihovnu tříd, abyste ověřili, že neexistují žádné chyby kompilátoru:

    dotnet build RazorUIClassLib

Výstup sestavení obsahuje RazorUIClassLib.dll a RazorUIClassLib.Views.dll. RazorUIClassLib.Views.dll obsahuje zkompilovaný Razor obsah.

Razor Použití knihovny uživatelského rozhraní z Razor projektu Pages

Razor Vytvořte webovou aplikaci Pages:

  • V Průzkumník řešení klikněte pravým tlačítkem na řešení >Přidat>nový projekt.

  • Vyberte ASP.NET Základní webová aplikace.

  • Pojmenujte webovou aplikaci 1.

  • Ověřte , že je vybraná ASP.NET Core 2.1 nebo novější.

  • Vyberte OK webové aplikace>.

  • V Průzkumník řešení klikněte pravým tlačítkem na WebApp1 a vyberte Nastavit jako počáteční projekt.

  • V Průzkumník řešení klikněte pravým tlačítkem na WebApp1 a vyberte Sestavit závislosti> projektu.

  • Zkontrolujte RazorUIClassLib jako závislost webové aplikace 1.

  • V Průzkumník řešení klikněte pravým tlačítkem na WebApp1 a vyberte Přidat>odkaz.

  • V dialogovém okně Správce odkazů zkontrolujte ok RazorUIClassLib>.

Spustit aplikaci.

Test webové aplikace 1

Přejděte a /MyFeature/Page1 ověřte, že Razor se knihovna tříd uživatelského rozhraní používá.

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.

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>

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.

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

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

  • 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 podporovat zobrazení, vyberte stránky a zobrazení podpory. Ve výchozím nastavení se podporují jenom Razor stránky. Vyberte Vytvořit.

Šablona Razor knihovny tříd (RCL) ve výchozím nastavení umožňuje Razor vývoj komponent. Možnost Stránky a zobrazení podpory podporují stránky a zobrazení.

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í:

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:

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    services.AddRazorPages();
}

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");

        endpoints.MapRazorPages();
    });
}

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 .

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 ResolveCurrentProjectStaticWebAssets cíle tak, že do PropertyGroup souboru projektu přidáte následující cíl:

    <ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
  CompileTypeScript;
  $(ResolveCurrentProjectStaticWebAssetsInputs)
</ResolveCurrentProjectStaticWebAssetsInputsDependsOn>

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ů v Startup.Configure:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    app.UseStaticFiles();

    ...
}

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:

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStaticWebAssets();
                webBuilder.UseStartup<Startup>();
            });
}

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