Tworzenie wielokrotnego użytku interfejsu użytkownika przy użyciu projektu biblioteki klas w programie ASP.NET Core

Autor: Rick Anderson

Razor widoki, strony, kontrolery, modele stron, Razor składniki, składniki widoków i modele danych mogą być wbudowane w bibliotekę Razor klas (RCL). Można spakować i ponownie użyć RCL. Aplikacje mogą zawierać listę RCL i przesłaniać widoki i strony, które zawiera. Gdy widok, widok częściowy lub Razor strona zostanie znaleziony zarówno w aplikacji internetowej, jak i w liście RCL, Razor pierwszeństwo ma znacznik (.cshtml plik) w aplikacji internetowej.

Aby uzyskać informacje na temat sposobu integrowania npm i webpack z procesem kompilacji dla biblioteki klas RCL, zobacz Tworzenie zasobów internetowych klienta dla Razor biblioteki klas.

Tworzenie biblioteki klas zawierającej interfejs Razor użytkownika

Visual Studio

• W programie Visual Studio wybierz pozycję Utwórz nowy projekt.
• Wybierz Razor Bibliotekę klas>, Dalej.
• Nadaj bibliotece nazwę (na przykład "RazorClassLib"), >Utwórz. Aby uniknąć kolizji nazwy pliku z wygenerowaną biblioteką widoków, upewnij się, że nazwa biblioteki nie kończy się na ..Views
• Wybierz pozycję Strony i widoki pomocy technicznej, jeśli potrzebujesz, aby biblioteka zawierała strony i/lub widoki. Domyślnie obsługiwane są tylko Razor składniki. Wybierz pozycję Utwórz.

Szablon Razor Biblioteka Klas jest domyślnie przeznaczony do Razor tworzenia składników. Opcja Strony i Widoki wspiera strony i widoki. Aby uzyskać więcej informacji na temat wsparcia RCL w programie Blazor, zobacz Korzystanie ze składników ASP.NET Core Razor z biblioteki klas Razor (RCL).

.NET CLI

W wierszu polecenia uruchom polecenie dotnet new razorclasslib. Na przykład:

dotnet new razorclasslib -o RazorUIClassLib

Szablon Razor Biblioteka klas domyślnie służy do tworzenia składników Razor. Przekaż opcję --support-pages-and-views (dotnet new razorclasslib --support-pages-and-views), aby zapewnić obsługę stron i widoków.

Aby uzyskać więcej informacji, zobacz dotnet new. Aby uniknąć kolizji nazwy pliku z wygenerowaną biblioteką widoków, upewnij się, że nazwa biblioteki nie kończy się na ..Views

Dodaj pliki Razor do RCL.

Szablony ASP.NET Core zakładają, że zawartość listy RCL znajduje się w folderze Areas . Zobacz układ stron RCL poniżej, aby utworzyć RCL, która eksponuje zawartość ~/Pages zamiast ~/Areas/Pages.

Odwołanie do zawartości RCL

Lista RCL może być przywołynięta przez:

• Pakiet NuGet. Zobacz Tworzenie pakietów NuGet, dotnet add package oraz Tworzenie i publikowanie pakietu NuGet.
• {ProjectName}.csproj. Zobacz odwołanie dotnet-add.

Przesłanianie widoków, widoków częściowych i stron

Gdy widok, widok częściowy lub Razor strona zostanie znaleziony zarówno w aplikacji internetowej, jak i w liście RCL, Razor pierwszeństwo ma znacznik (.cshtml plik) w aplikacji internetowej. Na przykład dodanie WebApp1/Areas/MyFeature/Pages/Page1.cshtml do WebApp1 spowoduje, że Page1 w WebApp1 będzie mieć pierwszeństwo przed Page1 w RCL.

W przykładowym pobraniu zmień nazwę WebApp1/Areas/MyFeature2 na WebApp1/Areas/MyFeature w celu przetestowania pierwszeństwa.

Skopiuj widok częściowy RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml do WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml. Zaktualizuj znaczniki, aby wskazać nową lokalizację. Skompiluj i uruchom aplikację, aby sprawdzić, czy używana jest częściowa wersja aplikacji.

Jeśli RCL używa Razor Pages, włącz Razor usługi Pages i punkty końcowe w aplikacji hostującej:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

Układ stron RCL

Aby odwołać się do zawartości listy RCL, tak jakby była częścią folderu aplikacji Pages internetowej, utwórz projekt listy RCL z następującą strukturą plików:

• RazorUIClassLib/Pages
• RazorUIClassLib/Pages/Shared

Załóżmy, że RazorUIClassLib/Pages/Shared zawiera dwa częściowe pliki: _Header.cshtml i _Footer.cshtml. Tagi <partial> można dodać do _Layout.cshtml pliku:

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

Dodaj plik _ViewStart.cshtml do folderu projektu RCL Pages, aby użyć pliku _Layout.cshtml z aplikacji hostującej w sieci.

@{
    Layout = "_Layout";
}

Utwórz RCL ze statycznymi zasobami

Biblioteka RCL może wymagać towarzyszących zasobów statycznych, do których mogą odwoływać się zarówno biblioteka RCL, jak i aplikacja korzystająca z tej biblioteki. ASP.NET Core umożliwia tworzenie bibliotek RCL, które zawierają zasoby statyczne dostępne dla aplikacji korzystającej z nich.

Aby uwzględnić zasoby towarzyszące w ramach listy RCL, utwórz wwwroot folder w bibliotece klas i uwzględnij wszystkie wymagane pliki w tym folderze.

Podczas pakowania RCL wszystkie zasoby towarzyszące w folderze wwwroot są automatycznie dołączane do pakietu.

dotnet pack Użyj polecenia, a nie wersji NuGet.exe nuget pack.

Dodawanie zasobów internetowych klienta do procesu kompilacji

Integrowanie zasobów internetowych klienta z procesem kompilacji jest nietrywialne. Aby uzyskać więcej informacji, zobacz Tworzenie zasobów internetowych klienta dla Razor biblioteki klas.

Wyklucz zasoby statyczne

Aby wykluczyć zasoby statyczne, dodaj żądaną ścieżkę wykluczenia do $(DefaultItemExcludes) grupy właściwości w pliku projektu. Oddzielaj wpisy średnikami (;).

W poniższym przykładzie arkusz stylów lib.css w folderze wwwroot nie jest traktowany jako zasób statyczny i nie jest uwzględniony w opublikowanej bibliotece RCL.

<PropertyGroup>
  <DefaultItemExcludes>$(DefaultItemExcludes);wwwroot\lib.css</DefaultItemExcludes>
</PropertyGroup>

Integracja z typescript

Aby dołączyć pliki TypeScript do biblioteki RCL:

• Dodaj odwołanie do pakietu NuGet Microsoft.TypeScript.MSBuild w projekcie.

  Uwaga

  Aby uzyskać instrukcje dodawania pakietów do aplikacji .NET, zobacz artykuły w sekcji Instalowanie pakietów i zarządzanie nimi w temacie Przepływ pracy użycia pakietów (dokumentacja programu NuGet). Sprawdź prawidłowe wersje pakietów pod adresem NuGet.org.

• Umieść pliki TypeScript (.ts) poza folderem wwwroot . Na przykład umieść pliki w folderze Client .

• Dodaj następujący znacznik do pliku projektu:

  • Skonfiguruj dane wyjściowe kompilacji języka TypeScript dla folderu wwwroot za pomocą właściwości TypescriptOutDir.
  • Uwzględnij cel TypeScript jako zależność celu PrepareForBuildDependsOn.
  • Usuń dane wyjściowe w wwwroot folder.

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

    <PropertyGroup>
      // Markup removed for brevity.
      <TypescriptOutDir>wwwroot</TypescriptOutDir>
      <PrepareForBuildDependsOn>
        CompileTypeScriptWithTSConfig;
        GetTypeScriptOutputForPublishing;$(PrepareForBuildDependsOn)
      </PrepareForBuildDependsOn>
    </PropertyGroup>

    <ItemGroup>
      <Content Remove="wwwroot\{path-to-typescript-outputs}" />
    </ItemGroup>

  </Project>

Korzystanie z zawartości z zreferencjonowanej RCL

Pliki znajdujące się w folderze wwwroot RCL są widoczne dla RCL lub aplikacji używającej pod prefiksem _content/{PACKAGE ID}/. Na przykład biblioteka z nazwą zestawu Razor.Class.Lib i bez <PackageId> określonego w pliku projektu skutkuje ścieżką do zawartości statycznej pod adresem _content/Razor.Class.Lib/. Podczas tworzenia pakietu NuGet, a nazwa zestawu nie jest taka sama jak identyfikator pakietu (<PackageId> w pliku projektu biblioteki), użyj identyfikatora pakietu określonego w pliku projektu dla {PACKAGE ID}.

Aplikacja korzystająca odwołuje się do zasobów statycznych udostępnianych przez bibliotekę, używając tagów HTML takich jak <script>, <style>, <img> i innych. Aplikacja zużywająca musi mieć włączoną obsługę plików statycznych w:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

Podczas uruchamiania aplikacji konsumującej z danych wyjściowych kompilacji (dotnet run) statyczne zasoby internetowe są domyślnie włączone w środowisku deweloperskim. Aby obsługiwać zasoby w innych środowiskach podczas uruchamiania z wyniku kompilacji, wywołaj UseStaticWebAssets na builderze hosta w Program.cs:

var builder = WebApplication.CreateBuilder(args);

builder.WebHost.UseWebRoot("wwwroot");
builder.WebHost.UseStaticWebAssets();

builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Wywołanie UseStaticWebAssets nie jest wymagane podczas uruchamiania aplikacji z opublikowanych danych wyjściowych (dotnet publish).

Przepływ rozwoju obejmujący wiele projektów

Gdy aplikacja zużywana jest uruchamiana:

• Zasoby w RCL pozostają w oryginalnych folderach. Zasoby nie są przenoszone do aplikacji odbierającej.
• Wszelkie zmiany w folderze listy RCL są odzwierciedlane w aplikacji zużywającej po ponownym skompilowaniu listy RCL wwwroot i bez ponownego kompilowania aplikacji zużywającej.

Podczas kompilowania listy RCL tworzony jest manifest opisujący statyczne lokalizacje zasobów internetowych. Aplikacja zużywająca odczytuje manifest w czasie wykonywania, aby korzystać z zasobów z przywoływalnych projektów i pakietów. Po dodaniu nowego zasobu do listy RCL należy ponownie skompilować listę RCL, aby zaktualizować manifest, zanim aplikacja zużywająca będzie mogła uzyskać dostęp do nowego zasobu.

Publikowanie

Po opublikowaniu aplikacji zasoby towarzyszące ze wszystkich z przywoływanych projektów i pakietów są kopiowane do folderu opublikowanej aplikacji w obszarze _content/{PACKAGE ID}/. Podczas tworzenia pakietu NuGet i nazwa zestawu nie jest taka sama jak identyfikator pakietu (<PackageId> w pliku projektu biblioteki), użyj identyfikatora pakietu określonego w pliku projektu dla {PACKAGE ID} podczas badania folderu wwwroot dla opublikowanych zasobów.

Dodatkowe zasoby

• Wyświetl lub pobierz przykładowy kod (jak pobrać)

• Korzystanie ze składników Razor platformy ASP.NET Core z biblioteki klas Razor (RCL)

• ASP.NET Core Blazor CSS izolacja