Skapande av och koncept för Razor-klassbibliotek

Komponenter i webbprogram ger utvecklare möjlighet att återanvända delar av ett programanvändargränssnitt i hela programmet. Med hjälp av Razor-klassbibliotek kan utvecklare dela och återanvända dessa komponenter i många program.

I den här lektionen får du lära dig hur du skapar ett Razor-klassbibliotek. Sedan använder du den för att dela renderat och statiskt innehåll för Blazor-program för att anpassa och visa.

Razor-klassbiblioteken

Ett Razor-klassbibliotek är en .NET-projekttyp. Den innehåller Razor-komponenter, sidor, HTML-filer, CSS-filer (Cascading Style Sheet), JavaScript, bilder och annat statiskt webbinnehåll som ett Blazor-program kan referera till. Precis som andra .NET-klassbiblioteksprojekt kan Razor-klassbibliotek paketeras som ett NuGet-paket och delas på NuGet-paketlagringsplatser som NuGet.org.

Nu ska vi titta på standardmallen för att skapa ett Razor-klassbibliotek.

Skapa ett projekt med hjälp av standardmallen

Du kan också börja skapa ett Razor-klassbibliotek i Visual Studio genom att välja File>New Project.

Du kan också skapa projekt i ett kommandoradsgränssnitt genom att köra följande kommando:

dotnet new razorclasslib -o MyProjectName

Den här mallen levererar en första komponent med namnet Component1, som innehåller flera viktiga funktioner som komponenterna kan använda:

• En isolerad sammanhängande formatmall med namnet Component1.razor.css, som lagras i samma mapp som Component1.razor. Filen Component1.razor.css ingår villkorligt i ett Blazor-program som refererar till Component1.
• Statiskt innehåll, till exempel bilder och JavaScript-filer, som är tillgängligt för en Blazor-applikation vid körning och refereras i Component1. Det här innehållet levereras i en wwwroot- mapp som fungerar på samma sätt som en wwwroot-mapp i ett ASP.NET Core- eller Blazor-program.
• .NET-kod, som kör funktioner som finns i den inkluderade JavaScript-filen.

Skillnader mellan ett klassbibliotek och ett Razor-klassbibliotek

Ett klassbibliotek är en vanlig paketleveransstruktur i .NET-program och ett Razor-klassbibliotek liknar strukturen med några andra funktioner som konfigurerats i projektfilen.

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

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  
  <ItemGroup>
    <SupportedPlatform Include="browser" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
  </ItemGroup>

</Project>

• Projektfilen innehåller en SDK-referens till Microsoft.NET.Sdk.Razor för att deklarera att den innehåller och skapar Razor-innehåll som ett Razor-klassbibliotek.
• Posten SupportedPlatform deklarerar att det här biblioteket kan användas i en browser plattform, nämligen WebAssembly.
• PackageReference till Microsoft.AspNetCore.Components.Web-biblioteket ger åtkomst till de grundläggande Blazor-komponenterna som levereras med ramverket. Med den här åtkomsten kan du använda dessa enkla komponenter för att skapa mer komplexa komponenter.

Razor-komponentinnehåll

Den här första Razor-komponenten är enkel. Den innehåller bara ett HTML-div-element med ett kort textblock:

<div class="my-component">
    This component is defined in the <strong>FirstRazorLibrary</strong> library.
</div>

Den här komponenten interagerar med andra Blazor-komponenter och sidor som refererar till den på samma sätt som du förväntar dig att en komponent som levereras i samma projekt fungerar. Det vill: CSS-isolerat skript i Component1.razor.css-filen återges infogat med resten av programmets CSS i application.css-filen.

Leverans av statiska tillgångar

Du kan referera till innehållet i wwwroot-mappen relativt bland det andra innehållet i mappen. Du kan också relativt referera till komponenternas enskilda CSS-filer, till exempel Component1.razor.css, som filer i samma basmapp. Standard-CSS lägger till en två pixlar bred streckad röd kantlinje och en stil för bakgrundsbild som använder background.png-bilden i mappen wwwroot. Ingen sökväg krävs för att göra den här referensen från CSS till innehållet som finns i mappen wwwroot.

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

Innehållet i wwwroot-mappen är tillgängligt för referens av värdbaserade Blazor-program med en absolut mappreferens i formatet:

/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}

Referera till ett Razor-klassbibliotek

I en .NET-lösning, där Razor-klassbiblioteket finns på disken bredvid ett Blazor-program som refererar till biblioteket, kan du uppdatera Blazor-programmet så att det refererar till Razor-klassbiblioteket med hjälp av standarddialogrutan Visual Studio Lägg till referens och med hjälp av kommandot .NET CLI add reference enligt följande:

dotnet add reference ../MyClassLibrary

För bibliotek som levereras i NuGet-paketformulär kan du lägga till en referens med hjälp av installationsprogrammet för Visual Studio NuGet-paketet eller med hjälp av kommandot .NET CLI add package, som du ser här:

dotnet add package MyClassLibrary