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

Artikel
01/10/2025

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

Visual Studio
.NET CLI

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

Från kommandoraden kör du dotnet new razorclasslib. Till exempel:

dotnet new razorclasslib -o RazorUIClassLib

Mallen Razor klassbibliotek används som standard för Razor-komponentutveckling. Skicka alternativet --support-pages-and-views (dotnet new razorclasslib --support-pages-and-views) för att ge stöd för sidor och vyer.

Mer information finns i dotnet new. Om du vill undvika en filnamnskollision med det genererade visningsbiblioteket kontrollerar du att biblioteksnamnet inte slutar .Views.

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:

NuGet-paket. Se Skapa NuGet-paket och dotnet lägg till paket och Skapa och publicera ett NuGet-paket.
{ProjectName}.csproj. Se till dotnet-add reference.

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

Anteckning

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.

Publicera

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

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

Visual Studio
.NET CLI

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.

Från kommandoraden kör du dotnet new razorclasslib. Till exempel:

dotnet new razorclasslib -o RazorUIClassLib

Mallen Razor klassbibliotek (RCL)-mallen standardinställning är Razor komponentutveckling. Skicka alternativet --support-pages-and-views (dotnet new razorclasslib --support-pages-and-views) för att ge stöd för sidor och vyer.

Mer information finns i dotnet new. Om du vill undvika en filnamnskollision med det genererade visningsbiblioteket kontrollerar du att biblioteksnamnet inte slutar .Views.

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:

NuGet-paket. Se Skapa NuGet-paket och dotnet lägg till paket och Skapa och publicera ett NuGet-paket.
{ProjectName}.csproj. Se till dotnet-add reference.

Åsidosätt vyer, delvyer och sidor

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

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

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:

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

Anteckning

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.
Konfigurera TypeScript-kompileringsutdata för mappen wwwroot. Ange egenskapen TypescriptOutDir inuti en PropertyGroup i projektfilen:
```
<TypescriptOutDir>wwwroot</TypescriptOutDir>
```
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>
```

Konsumera innehåll från en refererad RCL

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

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 den förbrukande appen 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 användande appen efter att RCL:en har återskapats utan att återskapa den användande appen.

Publicera

Ytterligare resurser

Razor vyer, sidor, styrenheter, sidmodeller, Razor komponenter, vynkomponenter 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

Visual Studio
.NET CLI

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 ☑ supportsidor och vyer för att stödja 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.

Från kommandoraden kör du dotnet new razorclasslib. Till exempel:

dotnet new razorclasslib -o RazorUIClassLib

Mallen Razor klassbibliotek (RCL) är som standard för utveckling av Razor-komponenter. Skicka alternativet --support-pages-and-views (dotnet new razorclasslib --support-pages-and-views) för att ge stöd för sidor och vyer.

Mer information finns i dotnet new. Om du vill undvika en filnamnskollision med det genererade visningsbiblioteket kontrollerar du att biblioteksnamnet inte slutar .Views.

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:

NuGet-paket. Se Skapa NuGet-paket och dotnet lägg till paket och Skapa och publicera ett NuGet-paket.
{ProjectName}.csproj. Se till dotnet-add reference.

Åsidosätt vyer, delvyer och sidor

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

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

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:

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

Anteckning

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.
Konfigurera TypeScript-kompileringsutdata för mappen wwwroot. Ange egenskapen TypescriptOutDir inuti en PropertyGroup i projektfilen:
```
<TypescriptOutDir>wwwroot</TypescriptOutDir>
```

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>

Förbruka innehåll från en refererad RCL

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 den konsumerande appen 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 förbrukande appen efter att RCL:en har återskapats och utan att den förbrukande appen återskapas.

Publicera

Ytterligare resurser

Använd ASP.NET Core Razor-komponenter från ett Razor-klassbibliotek (RCL)

Razor vyer, sidor, kontroller, sidmodeller, Razor komponenter, Vy-komponenter, 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

Visual Studio
.NET CLI

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>

Från kommandoraden kör du dotnet new razorclasslib. Till exempel:

dotnet new razorclasslib -o RazorUIClassLib

Mer information finns i dotnet new. Om du vill undvika en filnamnskollision med det genererade visningsbiblioteket kontrollerar du att biblioteksnamnet inte slutar .Views.

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:

NuGet-paket. Se Skapa NuGet-paket och dotnet lägg till paket och Skapa och publicera ett NuGet-paket.
{ProjectName}.csproj. Se till dotnet-add reference.

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.

Visual Studio
.NET CLI

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

Från en kommandotolk i katalogen cli skapar du RCL och webbappen.

dotnet build

Flytta till katalogen WebApp1 och kör appen:

dotnet run

Följ anvisningarna i Test WebApp1

Skapa en RCL

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

Visual Studio
.NET CLI

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.

Kör följande från kommandoraden:

dotnet new razorclasslib -o RazorUIClassLib
dotnet new page -n _Message -np -o RazorUIClassLib/Areas/MyFeature/Pages/Shared
dotnet new viewstart -o RazorUIClassLib/Areas/MyFeature/Pages

Föregående kommandon:

Skapar RazorUIClassLib RCL.
Skapar en Razor _Message sida och lägger till den i RCL:en. Parametern -np skapar sidan utan PageModel.
Skapar en _ViewStart.cshtml fil och lägger till den i RCL:en.

Den _ViewStart.cshtml filen krävs för att använda layouten för projektet Razor Pages (som läggs till i nästa avsnitt).

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

Visual Studio
.NET CLI

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.

Skapa en Razor Pages-webbapp och en lösningsfil som innehåller appen Razor Pages och RCL:

dotnet new webapp -o WebApp1
dotnet new sln
dotnet sln add WebApp1
dotnet sln add RazorUIClassLib
dotnet add WebApp1 reference RazorUIClassLib

Skapa och kör webbappen:

cd WebApp1
dotnet run

Testa WebApp1

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

Åsidosätt vyer, delvyer och sidor

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

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, kontroller, 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

Visual Studio
.NET CLI

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.

Från kommandoraden kör du dotnet new razorclasslib. Till exempel:

dotnet new razorclasslib -o RazorUIClassLib

Mer information finns i dotnet new. Om du vill undvika en filnamnskollision med det genererade visningsbiblioteket kontrollerar du att biblioteksnamnet inte slutar .Views.

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:

NuGet-paket. Se Skapa NuGet-paket och dotnet lägg till paket och Skapa och publicera ett NuGet-paket.
{ProjectName}.csproj. Se till dotnet-add reference.

Åsidosätt vyer, delvyer och sidor

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

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

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:

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

Anteckning

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.
Konfigurera TypeScript-kompileringsutdata för mappen wwwroot. Ange egenskapen TypescriptOutDir inuti en PropertyGroup i projektfilen:
```
<TypescriptOutDir>wwwroot</TypescriptOutDir>
```

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>

Förbruka innehåll från en refererad RCL

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

    app.UseStaticFiles();

    ...
}

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 den konsumerande appen 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 konsumerande appen efter att RCL:en har återskapats och utan att den konsumerande appen återskapas.

Dela via

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

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

Referens-RCL-innehåll

Åsidosätt vyer, delvyer och sidor

Layout för RCL-sidor

Skapa en RCL med statiska tillgångar

Lägga till klientwebbtillgångar i byggprocessen

Exkludera statiska tillgångar

Typescript-integrering

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

Utvecklingsflöde för flera projekt

Publicera

Ytterligare resurser

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

Referens-RCL-innehåll

Åsidosätt vyer, delvyer och sidor

Layout för RCL-sidor

Skapa en RCL med statiska tillgångar

Exkludera statiska tillgångar

Typescript-integrering

Konsumera innehåll från en refererad RCL

Utvecklingsflöde för flera projekt

Publicera

Ytterligare resurser

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

Referens-RCL-innehåll

Åsidosätt vyer, delvyer och sidor

Layout för RCL-sidor

Skapa en RCL med statiska tillgångar

Exkludera statiska tillgångar

Typescript-integrering

Förbruka innehåll från en refererad RCL

Utvecklingsflöde för flera projekt

Publicera

Ytterligare resurser

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

Referens-RCL-innehåll

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

Testa nedladdningsappen

Skapa en RCL

Lägga till Razor filer och mappar i projektet

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

Testa WebApp1

Åsidosätt vyer, delvyer och sidor

Layout för RCL-sidor

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

Referens-RCL-innehåll

Åsidosätt vyer, delvyer och sidor

Layout för RCL-sidor

Skapa en RCL med statiska tillgångar

Exkludera statiska tillgångar

TypeScript-integrering

Förbruka innehåll från en refererad RCL

Utvecklingsflöde för flera projekt

Publicera

Ytterligare resurser

Ytterligare resurser