Dela via

Skapa återanvändbart användargränssnitt med hjälp av Razor-klassbiblioteksprojektet i ASP.NET Core

Av Rick Anderson

Razor vyer, sidor, styrenheter, sidmodeller, Razor komponenter, vykomponenter och datamodeller kan byggas in i ett Razor klassbibliotek (RCL). RCL kan paketeras och återanvändas. Program kan inkludera RCL och åsidosätta de vyer och sidor som den innehåller. När en vy, partiell vy eller Razor-sida finns i både webbappen och RCL har Razor-markeringen (.cshtml-filen) i webbappen företräde.

Information om hur du integrerar npm och webpack i byggprocessen för en RCL finns i Build client web assets for your Razor Class Library.

Skapa ett klassbibliotek som innehåller Razor användargränssnitt

  • I Visual Studio väljer du Skapa ett nytt projekt.
  • Välj Razor klassbibliotek>Nästa.
  • Ge biblioteket namnet (till exempel "RazorClassLib"), >Skapa. Om du vill undvika en filnamnskollision med det genererade visningsbiblioteket kontrollerar du att biblioteksnamnet inte slutar .Views.
  • Välj Supportsidor och vyer om du behöver biblioteket för att innehålla sidor och/eller vyer. Som standard stöds endast Razor komponenter. Välj Skapa.

Mallen Razor klassbibliotek används som standard för Razor-komponentutveckling. Alternativet Supportsidor och vyer ger stöd för sidor och vyer. Mer information om RCL-stöd i Blazorfinns i Använd ASP.NET Core Razor-komponenter från ett Razor-klassbibliotek (RCL).

Lägg till Razor filer i RCL:en.

ASP.NET Core-mallarna förutsätter att RCL-innehållet finns i mappen Areas. Se layouten RCL Pages nedan för att skapa en RCL som exponerar innehåll i ~/Pages i stället för ~/Areas/Pages.

Referens-RCL-innehåll

RCL kan refereras till av:

Åsidosätt vyer, delvyer och sidor

När en vy, partiell vy eller Razor-sida finns i både webbappen och RCL har Razor-markeringen (.cshtml-filen) i webbappen företräde. Du kan till exempel lägga till WebApp1/Areas/MyFeature/Pages/Page1.cshtml i WebApp1, och Page1 i WebApp1 kommer att ha företräde framför Page1 i RCL.

I exempelnedladdningen byter du namn på WebApp1/Areas/MyFeature2 till WebApp1/Areas/MyFeature för att testa prioritet.

Kopiera RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml partiell vy till WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml. Uppdatera markering för att ange den nya platsen. Skapa och kör appen för att verifiera att appens version av den delvisa komponenten används.

Om RCL använder Razor Pages aktiverar du tjänsterna och slutpunkterna för Razor Pages i värdappen:

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

Layout för RCL-sidor

Om du vill referera till RCL-innehåll som om det är en del av webbappens Pages mapp skapar du RCL-projektet med följande filstruktur:

  • RazorUIClassLib/Pages
  • RazorUIClassLib/Pages/Shared

Anta att RazorUIClassLib/Pages/Shared innehåller två partiella filer: _Header.cshtml och _Footer.cshtml. Taggarna <partial> kan läggas till i _Layout.cshtml fil:

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

Lägg till filen _ViewStart.cshtml i RCL-projektets Pages-mapp för att använda _Layout.cshtml-filen från värdwebbappen:

@{
    Layout = "_Layout";
}

Skapa en RCL med statiska tillgångar

En RCL kan kräva kompletterande statiska resurser som kan refereras av antingen RCL eller den användande appen av RCL. ASP.NET Core gör det möjligt att skapa RCL:er som innehåller statiska tillgångar som är tillgängliga för en förbrukande app.

Om du vill inkludera tillhörande tillgångar som en del av en RCL skapar du en wwwroot mapp i klassbiblioteket och inkluderar alla nödvändiga filer i mappen.

När du packar en RCL inkluderas alla tillhörande tillgångar i mappen wwwroot automatiskt i paketet.

Använd kommandot dotnet pack i stället för NuGet.exe version nuget pack.

Lägga till klientwebbtillgångar i byggprocessen

Integreringen av kundens webbresurser i byggpipelinen är inte enkel. För mer information, se Bygg klientwebbtillgångar för ditt Razor Klassbibliotek.

Exkludera statiska tillgångar

Om du vill exkludera statiska tillgångar lägger du till önskad exkluderingssökväg till $(DefaultItemExcludes) egenskapsgrupp i projektfilen. Avgränsa poster med semikolon (;).

I följande exempel betraktas inte lib.css-formatmallen i mappen wwwroot som en statisk tillgång och ingår inte i den publicerade RCL:en:

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

Typescript-integrering

Så här inkluderar du TypeScript-filer i en RCL:

  • Referera till Microsoft.TypeScript.MSBuild NuGet-paketet i projektet.

    Note

    Mer information om hur du lägger till paket i .NET-appar finns i artiklarna under Installera och hantera paket på Arbetsflöde för paketförbrukning (NuGet-dokumentation). Bekräfta rätt paketversioner på NuGet.org.

  • Placera TypeScript-filerna (.ts) utanför mappen wwwroot. Placera till exempel filerna i en Client mapp.

  • Lägg till följande markering i projektfilen:

    • Konfigurera TypeScript-kompileringsutdata för mappen wwwroot med egenskapen TypescriptOutDir.
    • Inkludera TypeScript-målet som ett beroende av det PrepareForBuildDependsOn målet.
    • Ta bort utdata i 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>

Använda innehåll från en refererad RCL

Filerna som ingår i mappen wwwroot för RCL exponeras för antingen RCL eller den förbrukande appen under prefixet _content/{PACKAGE ID}/. Ett bibliotek med sammansättningsnamnet Razor.Class.Lib och utan en <PackageId> som anges i projektfilen resulterar till exempel i en sökväg till statiskt innehåll på _content/Razor.Class.Lib/. När du skapar ett NuGet-paket och sammansättningsnamnet inte är samma som paket-ID :t (<PackageId> i bibliotekets projektfil) använder du paket-ID:t enligt beskrivningen i projektfilen för {PACKAGE ID}.

Den förbrukande appen refererar till statiska tillgångar som tillhandahålls av biblioteket med <script>, <style>, <img>och andra HTML-taggar. Den förbrukande appen måste ha stöd för statiska filer aktiverat i:

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

När du kör den konsumerande appen från kompilatutdata (dotnet run) aktiveras statiska webbtillgångar som standardinställning i utvecklingsläge. Anropa UseStaticWebAssets på värdbyggaren i Program.csför att stöda resurser i andra miljöer vid körning från byggutdata.

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

Det är inte nödvändigt att ringa UseStaticWebAssets vid körning av en app från publicerade resultat (dotnet publish).

Utvecklingsflöde för flera projekt

När appen som förbrukar resurser körs:

  • Tillgångarna i RCL finns kvar i sina ursprungliga mappar. Tillgångarna flyttas inte till den förbrukande appen.
  • Alla ändringar i RCL:s wwwroot-mapp återspeglas i den mottagande appen efter att RCL:en har återskapats, utan att återskapa den mottagande appen.

När RCL skapas skapas ett manifest som beskriver de statiska webbtillgångsplatserna. Den användande appen läser manifestet vid körning för att använda resurser från refererade projekt och paket. När en ny tillgång läggs till i en RCL måste RCL återskapas för att uppdatera manifestet innan en förbrukande app kan komma åt den nya tillgången.

Publish

När appen publiceras kopieras de tillhörande tillgångarna från alla refererade projekt och paket till mappen wwwroot för den publicerade appen under _content/{PACKAGE ID}/. När du skapar ett NuGet-paket och sammansättningsnamnet inte är samma som paket-ID :t (<PackageId> i bibliotekets projektfil) använder du paket-ID:t som anges i projektfilen för {PACKAGE ID} när du undersöker mappen wwwroot för de publicerade tillgångarna.

Ytterligare resurser

Razor vyer, sidor, styrenheter, sidmodeller, Razor komponenter, vykomponenter och datamodeller kan byggas in i ett Razor klassbibliotek (RCL). RCL kan paketeras och återanvändas. Program kan inkludera RCL och åsidosätta de vyer och sidor som den innehåller. När en vy, partiell vy eller Razor-sida finns i både webbappen och RCL har Razor-markeringen (.cshtml-filen) i webbappen företräde.

Information om hur du integrerar npm och webpack i byggprocessen för ett Razor-klassbibliotek finns i Build client web assets for your Razor Class Library.

Skapa ett klassbibliotek som innehåller Razor användargränssnitt

  • I Visual Studio väljer du Skapa ett nytt projekt.
  • Välj Razor klassbibliotek>Nästa.
  • Ge biblioteket namnet (till exempel "RazorClassLib"), >Skapa. Om du vill undvika en filnamnskollision med det genererade visningsbiblioteket kontrollerar du att biblioteksnamnet inte slutar .Views.
  • Välj supportsidor och vyer om du behöver stöd för vyer. Som standardinställning stöds endast Razor-sidor. Välj Skapa.

Mallen Razor klassbibliotek (RCL)-mallen standardinställning är Razor komponentutveckling. Alternativet Supportsidor och vyer ger stöd för sidor och vyer.

Lägg till Razor filer i RCL:en.

ASP.NET Core-mallarna förutsätter att RCL-innehållet finns i mappen Areas. Se layouten RCL Pages nedan för att skapa en RCL som exponerar innehåll i ~/Pages i stället för ~/Areas/Pages.

Referens-RCL-innehåll

RCL kan refereras till av:

Åsidosätt vyer, delvyer och sidor

När en vy, partiell vy eller Razor-sida finns i både webbappen och RCL har Razor-markeringen (.cshtml-filen) i webbappen företräde. Du kan till exempel lägga till WebApp1/Areas/MyFeature/Pages/Page1.cshtml i WebApp1, och Page1 i WebApp1 kommer att ha företräde framför Page1 i RCL.

I exempelnedladdningen byter du namn på WebApp1/Areas/MyFeature2 till WebApp1/Areas/MyFeature för att testa prioritet.

Kopiera RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml partiell vy till WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml. Uppdatera markering för att ange den nya platsen. Skapa och kör appen för att verifiera att appens version av den delvisa komponenten används.

Om RCL använder Razor Pages aktiverar du tjänsterna och slutpunkterna för Razor Pages i värdappen:

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

Layout för RCL-sidor

Om du vill referera till RCL-innehåll som om det är en del av webbappens Pages mapp skapar du RCL-projektet med följande filstruktur:

  • RazorUIClassLib/Pages
  • RazorUIClassLib/Pages/Shared

Anta att RazorUIClassLib/Pages/Shared innehåller två partiella filer: _Header.cshtml och _Footer.cshtml. Taggarna <partial> kan läggas till i _Layout.cshtml fil:

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

Lägg till filen _ViewStart.cshtml i RCL-projektets Pages-mapp för att använda _Layout.cshtml-filen från värdwebbappen:

@{
    Layout = "_Layout";
}

Skapa en RCL med statiska tillgångar

En RCL kan kräva kompletterande statiska resurser som kan refereras av antingen RCL eller den användande appen av RCL. ASP.NET Core gör det möjligt att skapa RCL:er som innehåller statiska tillgångar som är tillgängliga för en förbrukande app.

Om du vill inkludera tillhörande tillgångar som en del av en RCL skapar du en wwwroot mapp i klassbiblioteket och inkluderar alla nödvändiga filer i mappen.

När du packar en RCL inkluderas alla tillhörande tillgångar i mappen wwwroot automatiskt i paketet.

Använd kommandot dotnet pack i stället för NuGet.exe version nuget pack.

Exkludera statiska tillgångar

Om du vill exkludera statiska tillgångar lägger du till önskad exkluderingssökväg till $(DefaultItemExcludes) egenskapsgrupp i projektfilen. Avgränsa poster med semikolon (;).

I följande exempel betraktas inte lib.css-formatmallen i mappen wwwroot som en statisk tillgång och ingår inte i den publicerade RCL:en:

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

Typescript-integrering

Så här inkluderar du TypeScript-filer i en RCL:

  1. Referera till Microsoft.TypeScript.MSBuild NuGet-paketet i projektet.

    Note

    Mer information om hur du lägger till paket i .NET-appar finns i artiklarna under Installera och hantera paket på Arbetsflöde för paketförbrukning (NuGet-dokumentation). Bekräfta rätt paketversioner på NuGet.org.

  2. Placera TypeScript-filerna (.ts) utanför mappen wwwroot. Placera till exempel filerna i en Client mapp.

  3. Konfigurera TypeScript-kompileringsutdata för mappen wwwroot. Ange egenskapen TypescriptOutDir inuti en PropertyGroup i projektfilen:

    <TypescriptOutDir>wwwroot</TypescriptOutDir>

  4. Inkludera TypeScript-målet som ett beroende av PrepareForBuildDependsOn-målet genom att lägga till följande mål i en PropertyGroup i projektfilen.

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

Använda innehåll från en refererad RCL

Filerna som ingår i mappen wwwroot för RCL exponeras för antingen RCL eller den förbrukande appen under prefixet _content/{PACKAGE ID}/. Ett bibliotek med sammansättningsnamnet Razor.Class.Lib och utan en <PackageId> som anges i projektfilen resulterar till exempel i en sökväg till statiskt innehåll på _content/Razor.Class.Lib/. När du skapar ett NuGet-paket och sammansättningsnamnet inte är samma som paket-ID :t (<PackageId> i bibliotekets projektfil) använder du paket-ID:t enligt beskrivningen i projektfilen för {PACKAGE ID}.

Den förbrukande appen refererar till statiska tillgångar som tillhandahålls av biblioteket med <script>, <style>, <img>och andra HTML-taggar. Den förbrukande appen måste ha stöd för statiska filer aktiverat i:

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

När du kör den konsumerande appen från kompilatutdata (dotnet run) aktiveras statiska webbtillgångar som standardinställning i utvecklingsläge. Anropa UseStaticWebAssets på värdbyggaren i Program.csför att stöda resurser i andra miljöer vid körning från byggutdata.

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

Obs! .NET 6 kräver bara anrop builder.WebHost.UseWebRoot("wwwroot").UseStaticWebAssets. För mer information, se denna GitHub-fråga.

Det är inte nödvändigt att ringa UseStaticWebAssets vid körning av en app från publicerade resultat (dotnet publish).

Utvecklingsflöde för flera projekt

När appen som förbrukar resurser körs:

  • Tillgångarna i RCL finns kvar i sina ursprungliga mappar. Tillgångarna flyttas inte till den förbrukande appen.
  • Alla ändringar i RCL:s wwwroot-mapp återspeglas i den mottagande appen efter att RCL:en har återskapats, utan att återskapa den mottagande appen.

När RCL skapas skapas ett manifest som beskriver de statiska webbtillgångsplatserna. Den användande appen läser manifestet vid körning för att använda resurser från refererade projekt och paket. När en ny tillgång läggs till i en RCL måste RCL återskapas för att uppdatera manifestet innan en förbrukande app kan komma åt den nya tillgången.

Publish

När appen publiceras kopieras de tillhörande tillgångarna från alla refererade projekt och paket till mappen wwwroot för den publicerade appen under _content/{PACKAGE ID}/. När du skapar ett NuGet-paket och sammansättningsnamnet inte är samma som paket-ID :t (<PackageId> i bibliotekets projektfil) använder du paket-ID:t som anges i projektfilen för {PACKAGE ID} när du undersöker mappen wwwroot för de publicerade tillgångarna.

Ytterligare resurser

Razor vyer, sidor, styrenheter, sidmodeller, Razor komponenter, vykomponenter och datamodeller kan byggas in i ett Razor klassbibliotek (RCL). RCL kan paketeras och återanvändas. Program kan inkludera RCL och åsidosätta de vyer och sidor som den innehåller. När en vy, partiell vy eller Razor-sida finns i både webbappen och RCL har Razor-markeringen (.cshtml-filen) i webbappen företräde.

Visa eller ladda ned exempelkod (hur du laddar ned)

Skapa ett klassbibliotek som innehåller Razor användargränssnitt

  • I Visual Studio väljer du Skapa ett nytt projekt.
  • Välj Razor klassbibliotek>Nästa.
  • Ge biblioteket namnet (till exempel "RazorClassLib"), >Skapa>Nästa. Om du vill undvika en filnamnskollision med det genererade visningsbiblioteket kontrollerar du att biblioteksnamnet inte slutar .Views.
  • Välj Målramverk. Kontrollera ☑ support-sidor och vyer för att aktivera vyer. Som standard stöds endast Razor komponenter. Välj Skapa.

Mallen Razor klassbibliotek (RCL) är som standard för utveckling av Razor-komponenter. Alternativet Supportsidor och vyer ger stöd för sidor och vyer.

Lägg till Razor filer i RCL:en.

ASP.NET Core-mallarna förutsätter att RCL-innehållet finns i mappen Areas. Se layouten RCL Pages för att skapa en RCL som exponerar innehåll i ~/Pages i stället för ~/Areas/Pages.

Referens-RCL-innehåll

RCL kan refereras till av:

Åsidosätt vyer, delvyer och sidor

När en vy, partiell vy eller Razor-sida finns i både webbappen och RCL har Razor-markeringen (.cshtml-filen) i webbappen företräde. Du kan till exempel lägga till WebApp1/Areas/MyFeature/Pages/Page1.cshtml i WebApp1, och Page1 i WebApp1 kommer att ha företräde framför Page1 i RCL.

I exempelnedladdningen byter du namn på WebApp1/Areas/MyFeature2 till WebApp1/Areas/MyFeature för att testa prioritet.

Kopiera RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml partiell vy till WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml. Uppdatera markering för att ange den nya platsen. Skapa och kör appen för att verifiera att appens version av den delvisa komponenten används.

Layout för RCL-sidor

Om du vill referera till RCL-innehåll som om det är en del av webbappens Pages mapp skapar du RCL-projektet med följande filstruktur:

  • RazorUIClassLib/Pages
  • RazorUIClassLib/Pages/Shared

Anta att RazorUIClassLib/Pages/Shared innehåller två partiella filer: _Header.cshtml och _Footer.cshtml. Taggarna <partial> kan läggas till i _Layout.cshtml fil:

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

Lägg till filen _ViewStart.cshtml i RCL-projektets Pages-mapp för att använda _Layout.cshtml-filen från värdwebbappen:

@{
    Layout = "_Layout";
}

Skapa en RCL med statiska tillgångar

En RCL kan kräva kompletterande statiska resurser som kan refereras av antingen RCL eller den användande appen av RCL. ASP.NET Core gör det möjligt att skapa RCL:er som innehåller statiska tillgångar som är tillgängliga för en förbrukande app.

Om du vill inkludera tillhörande tillgångar som en del av en RCL skapar du en wwwroot mapp i klassbiblioteket och inkluderar alla nödvändiga filer i mappen.

När du packar en RCL inkluderas alla tillhörande tillgångar i mappen wwwroot automatiskt i paketet.

Använd kommandot dotnet pack i stället för NuGet.exe version nuget pack.

Exkludera statiska tillgångar

Om du vill exkludera statiska tillgångar lägger du till önskad exkluderingssökväg till $(DefaultItemExcludes) egenskapsgrupp i projektfilen. Avgränsa poster med semikolon (;).

I följande exempel betraktas inte lib.css-formatmallen i mappen wwwroot som en statisk tillgång och ingår inte i den publicerade RCL:en:

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

Typescript-integrering

Så här inkluderar du TypeScript-filer i en RCL:

  1. Referera till Microsoft.TypeScript.MSBuild NuGet-paketet i projektet.

    Note

    Mer information om hur du lägger till paket i .NET-appar finns i artiklarna under Installera och hantera paket på Arbetsflöde för paketförbrukning (NuGet-dokumentation). Bekräfta rätt paketversioner på NuGet.org.

  2. Placera TypeScript-filerna (.ts) utanför mappen wwwroot. Placera till exempel filerna i en Client mapp.

  3. Konfigurera TypeScript-kompileringsutdata för mappen wwwroot. Ange egenskapen TypescriptOutDir inuti en PropertyGroup i projektfilen:

    <TypescriptOutDir>wwwroot</TypescriptOutDir>

  4. Inkludera TypeScript-målet som ett beroende av ResolveCurrentProjectStaticWebAssets-målet genom att lägga till följande mål i en PropertyGroup i projektfilen.

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

Använda innehåll från en refererad RCL

Filerna som ingår i mappen wwwroot för RCL exponeras för antingen RCL eller den förbrukande appen under prefixet _content/{PACKAGE ID}/. Ett bibliotek med sammansättningsnamnet Razor.Class.Lib och utan en <PackageId> som anges i projektfilen resulterar till exempel i en sökväg till statiskt innehåll på _content/Razor.Class.Lib/. När du skapar ett NuGet-paket och sammansättningsnamnet inte är samma som paket-ID :t (<PackageId> i bibliotekets projektfil) använder du paket-ID:t enligt beskrivningen i projektfilen för {PACKAGE ID}.

Den förbrukande appen refererar till statiska tillgångar som tillhandahålls av biblioteket med <script>, <style>, <img>och andra HTML-taggar. Den förbrukande appen måste ha stöd för statiska filer aktiverade i Startup.Configure:

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

    app.UseStaticFiles();

    ...
}

När du kör den konsumerande appen från kompilatutdata (dotnet run) aktiveras statiska webbtillgångar som standardinställning i utvecklingsläge. Anropa UseStaticWebAssets på värdbyggaren i Program.csför att stöda resurser i andra miljöer vid körning från byggutdata.

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

Det är inte nödvändigt att ringa UseStaticWebAssets vid körning av en app från publicerade resultat (dotnet publish).

Utvecklingsflöde för flera projekt

När appen som förbrukar resurser körs:

  • Tillgångarna i RCL finns kvar i sina ursprungliga mappar. Tillgångarna flyttas inte till den förbrukande appen.
  • Alla ändringar i RCL:s wwwroot-mapp återspeglas i den mottagande appen efter att RCL:en har återskapats, utan att återskapa den mottagande appen.

När RCL skapas skapas ett manifest som beskriver de statiska webbtillgångsplatserna. Den användande appen läser manifestet vid körning för att använda resurser från refererade projekt och paket. När en ny tillgång läggs till i en RCL måste RCL återskapas för att uppdatera manifestet innan en förbrukande app kan komma åt den nya tillgången.

Publish

När appen publiceras kopieras de tillhörande tillgångarna från alla refererade projekt och paket till mappen wwwroot för den publicerade appen under _content/{PACKAGE ID}/. När du skapar ett NuGet-paket och sammansättningsnamnet inte är samma som paket-ID :t (<PackageId> i bibliotekets projektfil) använder du paket-ID:t som anges i projektfilen för {PACKAGE ID} när du undersöker mappen wwwroot för de publicerade tillgångarna.

Ytterligare resurser

Razor vyer, sidor, styrenheter, sidmodeller, Razor komponenter, vykomponenter och datamodeller kan byggas in i ett Razor klassbibliotek (RCL). RCL kan paketeras och återanvändas. Program kan inkludera RCL och åsidosätta de vyer och sidor som den innehåller. När en vy, partiell vy eller Razor-sida finns i både webbappen och RCL har Razor-markeringen (.cshtml-filen) i webbappen företräde.

Visa eller ladda ned exempelkod (hur du laddar ned)

Skapa ett klassbibliotek som innehåller Razor användargränssnitt

  • Välj New>på menyn i Visual Studio File .
  • Välj ASP.NET Core Web Application.
  • Ge biblioteket namnet (till exempel "RazorClassLib") >OK. Om du vill undvika en filnamnskollision med det genererade visningsbiblioteket kontrollerar du att biblioteksnamnet inte slutar .Views.
  • Kontrollera att ASP.NET Core 2.1 eller senare har valts.
  • Välj Razor klassbibliotek>OK.

En RCL har följande projektfil:

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

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

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


</Project>

Lägg till Razor filer i RCL:en.

ASP.NET Core-mallarna förutsätter att RCL-innehållet finns i mappen Areas. Se layouten RCL Pages för att skapa en RCL som exponerar innehåll i ~/Pages i stället för ~/Areas/Pages.

Referens-RCL-innehåll

RCL kan refereras till av:

Genomgång: Skapa ett RCL-projekt och använda från ett Razor Pages-projekt

Du kan ladda ned hela projektet och testa det istället för att skapa det. Exempelnedladdningen innehåller ytterligare kod och länkar som gör projektet enkelt att testa. Du kan lämna feedback i det här GitHub-problemet med dina kommentarer om nedladdningsexempel jämfört med stegvisa instruktioner.

Testa nedladdningsappen

Om du inte har laddat ned den färdiga appen och hellre vill skapa genomgångsprojektet går du vidare till nästa avsnitt.

Öppna filen .sln i Visual Studio. Kör appen.

Följ anvisningarna i Test WebApp1

Skapa en RCL

I det här avsnittet skapas en RCL. Razor-filer läggs till i RCL.

Skapa RCL-projektet:

  • Välj New>på menyn i Visual Studio File .
  • Välj ASP.NET Core Web Application.
  • Ge appen namnet RazorUIClassLib>OK.
  • Kontrollera att ASP.NET Core 2.1 eller senare har valts.
  • Välj Razor klassbibliotek>OK.
  • Lägg till en Razor partiell vyfil med namnet RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml.

Lägga till Razor filer och mappar i projektet

  • Ersätt markeringen i RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml med följande kod:

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

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

  • Ersätt markeringen i RazorUIClassLib/Areas/MyFeature/Pages/Page1.cshtml med följande kod:

    @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 måste användas för att använda den partiella vyn (<partial name="_Message" />). I stället för att inkludera @addTagHelper-direktivet kan du lägga till en _ViewImports.cshtml fil. Till exempel:

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

    Mer information om _ViewImports.cshtmlfinns i Importering av delade direktiv

  • Skapa klassbiblioteket för att kontrollera att det inte finns några kompilatorfel:

    dotnet build RazorUIClassLib

Byggutdata innehåller RazorUIClassLib.dll och RazorUIClassLib.Views.dll. RazorUIClassLib.Views.dll innehåller det kompilerade Razor innehållet.

Använda Razor UI-biblioteket från ett Razor Pages-projekt

Skapa webbappen Razor Pages:

  • Från Solution Explorerhögerklickar du på lösningen >Lägg till>Nytt projekt.

  • Välj ASP.NET Core Web Application.

  • Ge appen namnet WebApp1.

  • Kontrollera att ASP.NET Core 2.1 eller senare har valts.

  • Välj webbprogram>OK.

  • Från Solution Explorerhögerklickar du på WebApp1 och väljer Ange som startprojekt.

  • Från Solution Explorerhögerklickar du på WebApp1 och väljer Byggberoenden>Projektberoenden.

  • Kontrollera RazorUIClassLib som ett beroende av WebApp1.

  • Från Solution Explorerhögerklickar du på WebApp1 och väljer Lägg till>Referens.

  • I dialogrutan Reference Manager kontrollerar du RazorUIClassLib>OK.

Kör appen.

Testa WebApp1

Bläddra till /MyFeature/Page1 för att kontrollera att Razor UI-klassbiblioteket används.

Åsidosätt vyer, delvyer och sidor

När en vy, partiell vy eller Razor-sida finns i både webbappen och RCL har Razor-markeringen (.cshtml-filen) i webbappen företräde. Du kan till exempel lägga till WebApp1/Areas/MyFeature/Pages/Page1.cshtml i WebApp1, och Page1 i WebApp1 kommer att ha företräde framför Page1 i RCL.

I exempelnedladdningen byter du namn på WebApp1/Areas/MyFeature2 till WebApp1/Areas/MyFeature för att testa prioritet.

Kopiera RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml partiell vy till WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml. Uppdatera markering för att ange den nya platsen. Skapa och kör appen för att verifiera att appens version av den delvisa komponenten används.

Layout för RCL-sidor

Om du vill referera till RCL-innehåll som om det är en del av webbappens Pages mapp skapar du RCL-projektet med följande filstruktur:

  • RazorUIClassLib/Pages
  • RazorUIClassLib/Pages/Shared

Anta att RazorUIClassLib/Pages/Shared innehåller två partiella filer: _Header.cshtml och _Footer.cshtml. Taggarna <partial> kan läggas till i _Layout.cshtml fil:

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

Razor vyer, sidor, styrenheter, sidmodeller, Razor komponenter, vykomponenter och datamodeller kan byggas in i ett Razor klassbibliotek (RCL). RCL kan paketeras och återanvändas. Program kan inkludera RCL och åsidosätta de vyer och sidor som den innehåller. När en vy, partiell vy eller Razor-sida finns i både webbappen och RCL har Razor-markeringen (.cshtml-filen) i webbappen företräde.

Visa eller ladda ned exempelkod (hur du laddar ned)

Skapa ett klassbibliotek som innehåller Razor användargränssnitt

  • I Visual Studio väljer du Skapa ett nytt projekt.
  • Välj Razor klassbibliotek>Nästa.
  • Ge biblioteket namnet (till exempel "RazorClassLib"), >Skapa. Om du vill undvika en filnamnskollision med det genererade visningsbiblioteket kontrollerar du att biblioteksnamnet inte slutar .Views.
  • Välj supportsidor och vyer om du behöver stöd för vyer. Som standardinställning stöds endast Razor-sidor. Välj Skapa.

Mallen Razor klassbibliotek (RCL) är som standard för utveckling av Razor-komponenter. Alternativet Supportsidor och vyer ger stöd för sidor och vyer.

Lägg till Razor filer i RCL:en.

ASP.NET Core-mallarna förutsätter att RCL-innehållet finns i mappen Areas. Se layouten RCL Pages nedan för att skapa en RCL som exponerar innehåll i ~/Pages i stället för ~/Areas/Pages.

Referens-RCL-innehåll

RCL kan refereras till av:

Åsidosätt vyer, delvyer och sidor

När en vy, partiell vy eller Razor-sida finns i både webbappen och RCL har Razor-markeringen (.cshtml-filen) i webbappen företräde. Du kan till exempel lägga till WebApp1/Areas/MyFeature/Pages/Page1.cshtml i WebApp1, och Page1 i WebApp1 kommer att ha företräde framför Page1 i RCL.

I exempelnedladdningen byter du namn på WebApp1/Areas/MyFeature2 till WebApp1/Areas/MyFeature för att testa prioritet.

Kopiera RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml partiell vy till WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml. Uppdatera markering för att ange den nya platsen. Skapa och kör appen för att verifiera att appens version av den delvisa komponenten används.

Om RCL använder Razor Pages aktiverar du tjänsterna och slutpunkterna för Razor Pages i värdappen:

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

Layout för RCL-sidor

Om du vill referera till RCL-innehåll som om det är en del av webbappens Pages mapp skapar du RCL-projektet med följande filstruktur:

  • RazorUIClassLib/Pages
  • RazorUIClassLib/Pages/Shared

Anta att RazorUIClassLib/Pages/Shared innehåller två partiella filer: _Header.cshtml och _Footer.cshtml. Taggarna <partial> kan läggas till i _Layout.cshtml fil:

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

Lägg till filen _ViewStart.cshtml i RCL-projektets Pages-mapp för att använda _Layout.cshtml-filen från värdwebbappen:

@{
    Layout = "_Layout";
}

Skapa en RCL med statiska tillgångar

En RCL kan kräva kompletterande statiska resurser som kan refereras av antingen RCL eller den användande appen av RCL. ASP.NET Core gör det möjligt att skapa RCL:er som innehåller statiska tillgångar som är tillgängliga för en förbrukande app.

Om du vill inkludera tillhörande tillgångar som en del av en RCL skapar du en wwwroot mapp i klassbiblioteket och inkluderar alla nödvändiga filer i mappen.

När du packar en RCL inkluderas alla tillhörande tillgångar i mappen wwwroot automatiskt i paketet.

Använd kommandot dotnet pack i stället för NuGet.exe version nuget pack.

Exkludera statiska tillgångar

Om du vill exkludera statiska tillgångar lägger du till önskad exkluderingssökväg till $(DefaultItemExcludes) egenskapsgrupp i projektfilen. Avgränsa poster med semikolon (;).

I följande exempel betraktas inte lib.css-formatmallen i mappen wwwroot som en statisk tillgång och ingår inte i den publicerade RCL:en:

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

Typescript-integrering

Så här inkluderar du TypeScript-filer i en RCL:

  1. Referera till Microsoft.TypeScript.MSBuild NuGet-paketet i projektet.

    Note

    Mer information om hur du lägger till paket i .NET-appar finns i artiklarna under Installera och hantera paket på Arbetsflöde för paketförbrukning (NuGet-dokumentation). Bekräfta rätt paketversioner på NuGet.org.

  2. Placera TypeScript-filerna (.ts) utanför mappen wwwroot. Placera till exempel filerna i en Client mapp.

  3. Konfigurera TypeScript-kompileringsutdata för mappen wwwroot. Ange egenskapen TypescriptOutDir inuti en PropertyGroup i projektfilen:

    <TypescriptOutDir>wwwroot</TypescriptOutDir>

  4. Inkludera TypeScript-målet som ett beroende av ResolveCurrentProjectStaticWebAssets-målet genom att lägga till följande mål i en PropertyGroup i projektfilen.

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

Använda innehåll från en refererad RCL

Filerna som ingår i mappen wwwroot för RCL exponeras för antingen RCL eller den förbrukande appen under prefixet _content/{PACKAGE ID}/. Ett bibliotek med sammansättningsnamnet Razor.Class.Lib och utan en <PackageId> som anges i projektfilen resulterar till exempel i en sökväg till statiskt innehåll på _content/Razor.Class.Lib/. När du skapar ett NuGet-paket och sammansättningsnamnet inte är samma som paket-ID :t (<PackageId> i bibliotekets projektfil) använder du paket-ID:t enligt beskrivningen i projektfilen för {PACKAGE ID}.

Den förbrukande appen refererar till statiska tillgångar som tillhandahålls av biblioteket med <script>, <style>, <img>och andra HTML-taggar. Den förbrukande appen måste ha stöd för statiska filer aktiverade i Startup.Configure:

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

    app.UseStaticFiles();

    ...
}

När du kör den konsumerande appen från kompilatutdata (dotnet run) aktiveras statiska webbtillgångar som standardinställning i utvecklingsläge. Anropa UseStaticWebAssets på värdbyggaren i Program.csför att stöda resurser i andra miljöer vid körning från byggutdata.

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

Det är inte nödvändigt att ringa UseStaticWebAssets vid körning av en app från publicerade resultat (dotnet publish).

Utvecklingsflöde för flera projekt

När appen som förbrukar resurser körs:

  • Tillgångarna i RCL finns kvar i sina ursprungliga mappar. Tillgångarna flyttas inte till den förbrukande appen.
  • Alla ändringar i RCL:s wwwroot-mapp återspeglas i den mottagande appen efter att RCL:en har återskapats, utan att återskapa den mottagande appen.

När RCL skapas skapas ett manifest som beskriver de statiska webbtillgångsplatserna. Den användande appen läser manifestet vid körning för att använda resurser från refererade projekt och paket. När en ny tillgång läggs till i en RCL måste RCL återskapas för att uppdatera manifestet innan en förbrukande app kan komma åt den nya tillgången.

Publish

När appen publiceras kopieras de tillhörande tillgångarna från alla refererade projekt och paket till mappen wwwroot för den publicerade appen under _content/{PACKAGE ID}/. När du skapar ett NuGet-paket och sammansättningsnamnet inte är samma som paket-ID :t (<PackageId> i bibliotekets projektfil) använder du paket-ID:t som anges i projektfilen för {PACKAGE ID} när du undersöker mappen wwwroot för de publicerade tillgångarna.

Ytterligare resurser