Vytváření a koncepty knihovny tříd Razor

5 min

Komponenty ve webových aplikacích umožňují vývojářům opakovaně používat části uživatelského rozhraní aplikace v celé aplikaci. Pomocí knihoven tříd Razor můžou vývojáři sdílet a opakovaně používat tyto komponenty v mnoha aplikacích.

V této lekci se dozvíte, jak vytvořit knihovnu tříd Razor a pak ji použít ke sdílení vykresleného a statického obsahu pro aplikace Blazor k přizpůsobení a zobrazení.

O knihovnách tříd Razor

Knihovna tříd Razor je typ projektu .NET, který obsahuje komponenty Razor, stránky, HTML, soubory CSS (Cascading Style Sheet), JavaScript, obrázky a další statický webový obsah, na který může odkazovat aplikace Blazor. Stejně jako u jiných projektů knihovny tříd .NET je možné knihovny tříd Razor seskupit jako balíček NuGet a sdílet je v úložištích balíčků NuGet, jako je například NuGet.org.

Pojďme se podívat na výchozí šablonu pro vytvoření knihovny tříd Razor.

Vytvoření projektu pomocí výchozí šablony

Volitelně můžete začít vytvářet knihovnu tříd Razor v sadě Visual Studio výběrem možnosti Soubor>nový projekt.

Screenshot of the

Projekty můžete také vytvořit v rozhraní příkazového řádku spuštěním následujícího příkazu:

dotnet new razorclasslib -o MyProjectName

Tato šablona dodává počáteční komponentu s názvem Component1, která obsahuje několik důležitých funkcí, které mohou vaše komponenty používat:

Izolovaná kaskádová šablona stylů s názvem Component1.razor.css, která je uložená ve stejné složce jako Component1.razor. Soubor Component1.razor.css je podmíněně součástí aplikace Blazor, která odkazuje na Komponent1.
Statický obsah, jako jsou obrázky a soubory JavaScriptu, které jsou k dispozici pro aplikaci Blazor za běhu a odkazované v rámci komponenty Component1. Tento obsah se doručí do složky wwwroot , která se chová stejným způsobem jako složka wwwroot v aplikaci ASP.NET Core nebo Blazor.
Kód .NET, který spouští funkce, které se nacházejí v zahrnuté javascriptové souboru.

Screenshot of Visual Studio Solution Explorer, showing the default project contents.

Rozdíly mezi knihovnou tříd a knihovnou tříd Razor

Knihovna tříd je běžná struktura doručování balíčků v aplikacích .NET a knihovna tříd Razor je podobná struktuře s několika dalšími funkcemi nakonfigurovanými v souboru projektu.

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

Soubor projektu obsahuje odkaz na microsoft.NET.Sdk.Razor, který deklaruje, že obsahuje a vytváří obsah Razor jako knihovnu tříd Razor.
Položka SupportedPlatform deklaruje, že tuto knihovnu lze použít na platformě browser , konkrétně WebAssembly.
Microsoft.AspNetCore.Components.Web Knihovna PackageReference poskytuje přístup k základním komponentám Blazor, které jsou dodávány s architekturou. Díky tomu můžete tyto jednoduché komponenty použít k vytváření složitějších komponent.

Obsah komponenty Razor

Počáteční komponenta Razor, která je doručena, je jednoduchá. Obsahuje pouze element HTML div s krátkým blokem textu:

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

Tato komponenta komunikuje s dalšími komponentami a stránkami Blazoru, které na ni odkazují stejným způsobem, jakým byste očekávali, že se komponenta doručená ve stejném projektu bude chovat. To znamená, že izolovaný skript CSS v souboru Component1.razor.css se vykreslí přímo se zbytkem šablony stylů CSS aplikace v souboru application.css .

Doručování statických prostředků

Na obsah složky wwwroot můžete odkazovat relativně mimo jiné obsah této složky a na jednotlivé soubory CSS komponent, například Component1.razor.css, jako jsou soubory ve stejné základní složce. Výchozí šablona stylů CSS například přidá 2 pixely přerušované červené ohraničení a styl obrázku na pozadí, který používá obrázek background.png ve složce wwwroot . K vytvoření tohoto odkazu ze šablon stylů CSS do obsahu, který se nachází ve složce wwwroot , není nutná žádná cesta.

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

Na obsah složky wwwroot lze odkazovat hostovanými aplikacemi Blazor s absolutním odkazem na složku ve formátu:

/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}

Odkaz na knihovnu tříd Razor

V řešení .NET, kde se knihovna tříd Razor nachází na disku vedle aplikace Blazor, která odkazuje na knihovnu, můžete aktualizovat aplikaci Blazor tak, aby odkazovat na knihovnu tříd Razor pomocí standardního dialogového okna Přidat odkaz sady Visual Studio a pomocí příkazu .NET CLIadd reference, jak je znázorněno zde:

dotnet add reference ../MyClassLibrary

Pro knihovny doručované ve formuláři balíčku NuGet můžete přidat odkaz pomocí instalačního programu balíčku NuGet sady Visual Studio nebo pomocí příkazu .NET CLI add package , jak je znázorněno tady:

dotnet add package MyClassLibrary