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. Pak ho použijete ke sdílení vykresleného a statického obsahu pro aplikace Blazor k přizpůsobení a zobrazení.
Knihovny tříd Razor
Knihovna tříd Razor je typ projektu .NET. Obsahuje komponenty Razor, stránky, HTML, soubory CSS (Cascading Style Sheet), JavaScript, obrázky a další statický webový obsah, na který může aplikace Blazor odkazovat. 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 v sadě Visual Studio začít vytvářet knihovnu tříd Razor tak, že vyberete Soubor>Nový projekt.
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 poskytuje 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žena ve stejné složce jako Component1.razor. Soubor Component1.razor.css je podmíněně součástí aplikace Blazor, která odkazuje na Component1.
- Statický obsah, jako jsou obrázky a soubory JavaScriptu, které jsou k dispozici pro aplikaci Blazor za běhu a odkazované v rámci Component1. Tento obsah se doručuje ve složce 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.
Rozdíly mezi běžnou 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 sadu SDK Microsoft.NET.Sdk.Razor, aby deklaroval, že obsahuje a vytváří obsah Razor jako knihovna tříd Razor.
- Položka
SupportedPlatformdeklaruje, že tuto knihovnu lze použít na platforměbrowser, konkrétně WebAssembly. - Knihovna od
PackageReferencedoMicrosoft.AspNetCore.Components.Webposkytuje přístup ke komponentám základní knihovny Blazor, které jsou dodávány s frameworkem. Tento přístup umožňuje používat tyto jednoduché komponenty, které vám pomůžou sestavovat složitější komponenty.
Obsah komponenty Razor
Tato počáteční komponenta Razor je jednoduchá. Obsahuje pouze html div element 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ý styl CSS v souboru Component1.razor.css je vykreslen inline se zbytkem CSS aplikace v souboru application.css.
Doručování statických prostředků
Na obsah složky wwwroot můžete odkazovat relativně mezi ostatními soubory v této složce. Můžete také relativně odkazovat na jednotlivé soubory CSS komponent, například Component1.razor.css, jako soubory ve stejné základní složce. Výchozí CSS například přidá červený čárkovaný rámeček o tloušťce dva pixely 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');
}
Obsah složky wwwroot je k dispozici pro odkazování 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 .NET řešení, kde se knihovna tříd Razor nachází na disku vedle aplikace Blazor, která na tuto knihovnu odkazuje, můžete aktualizovat aplikaci Blazor tak, aby odkazovala na knihovnu tříd Razor pomocí standardního dialogového okna Přidat referenci ve Visual Studio a pomocí příkazu .NET CLI add reference, jak je znázorněno zde:
dotnet add reference ../MyClassLibrary
Pro knihovny, které jsou doručovány 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 zde:
dotnet add package MyClassLibrary