Skapande av och koncept för Razor-klassbibliotek
- 5 minuter
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
SupportedPlatformdeklarerar att det här biblioteket kan användas i enbrowserplattform, nämligen WebAssembly. -
PackageReferencetillMicrosoft.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