Tworzenie interfejsu Razor użytkownika wielokrotnego użytku 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, składniki widoku i modele danych mogą być wbudowane w bibliotekę Razor klas (RCL). Listę RCL można spakować i ponownie użyć. 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 pakietów npm i webpack z procesem kompilacji dla listy RCL, zobacz Tworzenie zasobów internetowych klienta dla Razor biblioteki klas.

Tworzenie biblioteki klas zawierającej interfejs Razor użytkownika

Program Visual Studio

• W programie Visual Studio wybierz pozycję Utwórz nowy projekt.
• Wybierz pozycję Razor Biblioteka>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 chcesz, 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 domyślnie domyślnie służy do Razor tworzenia składników. Opcja Strony i widoki pomocy technicznej obsługuje strony i widoki. Aby uzyskać więcej informacji na temat obsługi listy RCL w programie Blazor, zobacz Korzystanie z składników ASP.NET Core Razor z Razor biblioteki klas (RCL).

Interfejs wiersza polecenia platformy .NET

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

dotnet new razorclasslib -o RazorUIClassLib

Szablon Razor Biblioteka klas domyślnie domyślnie służy do Razor tworzenia składników. --support-pages-and-views Przekaż opcję (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 Razor pliki do listy RCL.

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

Odwołanie do zawartości listy RCL

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

• Pakiet NuGet. Zobacz Creating NuGet packages and dotnet add package (Tworzenie pakietów NuGet i dotnet add package ) oraz Create and publish a NuGet package (Tworzenie i publikowanie pakietu NuGet).
• {ProjectName}.csproj. Zobacz dotnet-add reference (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 usługi WebApp1 i Page1 w aplikacji WebApp1 będzie mieć pierwszeństwo przed stroną Page1 na liście RCL.

W przykładowym pobraniu zmień nazwę WebApp1/Areas/MyFeature2 na , aby WebApp1/Areas/MyFeature przetestować pierwszeństwo.

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 wersja aplikacji częściowej.

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

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

_ViewStart.cshtml Dodaj plik do folderu projektu Pages listy RCL, aby użyć _Layout.cshtml pliku z aplikacji internetowej hosta:

@{
    Layout = "_Layout";
}

Tworzenie listy RCL ze statycznymi elementami zawartości

Lista RCL może wymagać towarzyszących zasobów statycznych, do których można odwoływać się przez listę RCL lub aplikację zużywającą listy RCL. ASP.NET Core umożliwia tworzenie list RCLs zawierających zasoby statyczne, które są dostępne dla aplikacji zużywanej.

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 listy RCL wszystkie zasoby towarzyszące w wwwroot folderze 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 potokiem kompilacji jest nietrywialne. Aby uzyskać więcej informacji, zobacz Tworzenie zasobów internetowych klienta dla Razor biblioteki klas.

Wykluczanie zasobów statycznych

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 lib.css arkusz stylów w folderze wwwroot nie jest uważany za element zawartości statycznej i nie jest uwzględniony w opublikowanej liście RCL:

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

Integracja z typescript

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

1. Odwołanie do Microsoft.TypeScript.MSBuild pakietu NuGet 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.

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

3. Skonfiguruj dane wyjściowe kompilacji języka TypeScript dla wwwroot folderu. TypescriptOutDir Ustaw właściwość wewnątrz elementu PropertyGroup w pliku projektu:

   <TypescriptOutDir>wwwroot</TypescriptOutDir>
   

4. Uwzględnij obiekt docelowy TypeScript jako zależność PrepareForBuildDependsOn obiektu docelowego, dodając następujący element docelowy wewnątrz PropertyGroup elementu w pliku projektu:

   <PrepareForBuildDependsOn>
     CompileTypeScript;
     GetTypeScriptOutputForPublishing;$(PrepareForBuildDependsOn)
   </PrepareForBuildDependsOn>
   

Korzystanie z zawartości z odwołania do listy RCL

Pliki zawarte w wwwroot folderze listy RCL są widoczne dla listy RCL lub aplikacji zużywanej pod prefiksem _content/{PACKAGE ID}/. Na przykład biblioteka o nazwie Razor.Class.Lib zestawu i bez <PackageId> określonej w pliku projektu powoduje ścieżkę do zawartości statycznej pod adresem _content/Razor.Class.Lib/. Podczas tworzenia pakietu NuGet i nazwy zestawu nie jest taki sam jak identyfikator pakietu (<PackageId> w pliku projektu biblioteki) użyj identyfikatora pakietu określonego w pliku projektu dla {PACKAGE ID}programu .

Aplikacja korzystająca odwołuje się do zasobów statycznych udostępnianych przez bibliotekę za pomocą <script>tagów HTML , <style>, <img>i . 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();

W przypadku uruchamiania aplikacji zużywanej 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 danych wyjściowych kompilacji, wywołaj UseStaticWebAssets konstruktora hosta w programie 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 programowania obejmującego wiele projektów

Gdy aplikacja zużywana jest uruchamiana:

• Zasoby na liście RCL pozostają w oryginalnych folderach. Zasoby nie są przenoszone do aplikacji zużywających.
• 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 przywoływane projekty i pakiety są kopiowane do wwwroot folderu opublikowanej aplikacji w obszarze _content/{PACKAGE ID}/. Podczas tworzenia pakietu NuGet i nazwy zestawu nie jest taki sam jak identyfikator pakietu (<PackageId> w pliku projektu biblioteki) użyj identyfikatora pakietu określonego w pliku projektu, aby {PACKAGE ID} podczas badania wwwroot folderu 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