Pojęcia dotyczące bibliotek klas Razor i ich tworzenie

5 min

Składniki w aplikacjach internetowych zapewniają deweloperom możliwość ponownego używania części interfejsu użytkownika aplikacji w całej aplikacji. Korzystając z bibliotek klas Razor, deweloperzy mogą udostępniać i ponownie używać tych składników w wielu aplikacjach.

W tej lekcji dowiesz się, jak utworzyć bibliotekę klas Razor, a następnie użyć jej do udostępniania renderowanej i statycznej zawartości dla aplikacji Blazor w celu dostosowywania i wyświetlania.

Informacje o bibliotekach klas Razor

Biblioteka klas Razor to typ projektu platformy .NET, który zawiera składniki Razor, strony, pliki HTML, kaskadowy arkusz stylów (CSS), JavaScript, obrazy i inną statyczną zawartość internetową, do których można odwoływać się przez aplikację Platformy Blazor. Podobnie jak w przypadku innych projektów bibliotek klas platformy .NET biblioteki klas Razor mogą być dołączane jako pakiet NuGet i udostępniane w repozytoriach pakietów NuGet, takich jak NuGet.org.

Przyjrzyjmy się szablonowi domyślnego do tworzenia biblioteki klas Razor.

Tworzenie projektu przy użyciu szablonu domyślnego

Opcjonalnie możesz rozpocząć tworzenie biblioteki klas Razor w programie Visual Studio, wybierając pozycję Plik>Nowy projekt.

Zrzut ekranu panelu

Projekty można również tworzyć w interfejsie wiersza polecenia, uruchamiając następujące polecenie:

dotnet new razorclasslib -o MyProjectName

Ten szablon dostarcza początkowy składnik o nazwie Component1, który zawiera kilka ważnych funkcji, których składniki mogą używać:

Izolowany kaskadowy arkusz stylów o nazwie Component1.razor.css, który jest przechowywany w tym samym folderze co Component1.razor. Plik Component1.razor.css jest warunkowo zawarty w aplikacji platformy Blazor, która odwołuje się do Component1.
Zawartość statyczna, taka jak obrazy i pliki JavaScript, która jest dostępna dla aplikacji Blazor w czasie wykonywania i przywoływalna w Component1. Ta zawartość jest dostarczana w folderze wwwroot, który zachowuje się w taki sam sposób jak folder wwwroot w aplikacji ASP.NET Core lub Blazor.
Kod platformy .NET, który wykonuje funkcje znajdujące się w dołączonym pliku JavaScript.

Zrzut ekranu Przedstawiający domyślną zawartość projektu w Eksploratorze rozwiązań programu Visual Studio.

Różnice między biblioteką klas a biblioteką klas Razor

Biblioteka klas jest wspólną strukturą dostarczania pakietów w aplikacjach platformy .NET, a biblioteka klas Razor jest podobna w strukturze z kilkoma innymi funkcjami skonfigurowanymi w pliku 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>

Plik projektu zawiera odwołanie do zestawu SDK Microsoft.NET.Sdk.Razor, aby zadeklarować, że zawiera zawartość Razor i tworzy ją jako bibliotekę klas Razor.
Wpis SupportedPlatform deklaruje, że ta biblioteka może być używana na platformie browser, czyli WebAssembly.
PackageReference do biblioteki Microsoft.AspNetCore.Components.Web zapewnia dostęp do podstawowych składników platformy Blazor dostarczanych ze strukturą. Dzięki temu można użyć tych prostych składników, aby ułatwić tworzenie bardziej złożonych składników.

Zawartość składnika Razor

Początkowy dostarczany składnik Razor jest prosty. Zawiera tylko element div HTML z krótkim blokiem tekstu:

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

Ten składnik współdziała z innymi składnikami i stronami platformy Blazor, które odwołują się do niego w taki sam sposób, jak oczekiwano, że składnik dostarczony w tym samym projekcie będzie działać. Oznacza to, że izolowany skrypt CSS w pliku Component1.razor.css jest wbudowany razem z resztą CSS aplikacji w pliku application.css.

Dostarczanie zasobów statycznych

Możesz odwołać się do zawartości folderu wwwroot w sposób względny względem innej zawartości tego folderu i poszczególnych plików CSS składników, takich jak Component1.razor.css, jako do plików znajdujących się w tym samym katalogu głównym. Na przykład domyślny arkusz CSS aplikuje obramowanie kreskowane o grubości 2 pikseli w kolorze czerwonym oraz styl tła z obrazem, który używa obrazu background.png w folderze wwwroot. Nie jest wymagana ścieżka do odwołania z arkusza CSS do zawartości znajdującej się w folderze wwwroot.

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

Zawartość folderu wwwroot mogą być odwoływane przez hostowane aplikacje Blazor przy użyciu absolutnego odniesienia do folderu w formacie:

/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}

Odwołanie do biblioteki klas Razor

W rozwiązaniu platformy .NET, gdzie biblioteka klas Razor znajduje się na dysku obok aplikacji Blazor odwołującej się do biblioteki, możesz zaktualizować aplikację Blazor, aby odwołać się do biblioteki klas Razor przy użyciu standardowego okna dialogowego Dodawanie odwołania programu Visual Studio i przy użyciu polecenia add reference interfejsu wiersza polecenia platformy .NET, jak pokazano poniżej:

dotnet add reference ../MyClassLibrary

W przypadku bibliotek dostarczanych w formularzu pakietu NuGet można dodać odwołanie przy użyciu instalatora pakietu NuGet programu Visual Studio lub za pomocą polecenia interfejsu wiersza polecenia platformy .NET add package, jak pokazano poniżej:

dotnet add package MyClassLibrary