Struktura projektu dla Blazor aplikacji

Napiwek

Ta zawartość jest fragmentem książki eBook Blazor dla deweloperów formularzy internetowych platformy ASP NET dla platformy Azure, dostępnym na platformie .NET Docs lub jako bezpłatny plik PDF do pobrania, który można odczytać w trybie offline.

Pobierz plik PDF

Pomimo znaczących różnic w strukturze projektu, ASP.NET web forms i Blazor mają wiele podobnych koncepcji. W tym miejscu przyjrzymy się strukturze Blazor projektu i porównamy go z projektem ASP.NET Web Forms.

Aby utworzyć pierwszą Blazor aplikację, postępuj zgodnie z instrukcjami w krokach wprowadzającychBlazor. Możesz postępować zgodnie z instrukcjami, aby utworzyć aplikację serwera lub aplikację hostowaną Blazor BlazorWebAssembly w programie ASP.NET Core. Z wyjątkiem logiki specyficznej dla modelu, większość kodu w obu projektach jest taka sama.

Plik projektu

Blazor Aplikacje serwera to projekty platformy .NET. Plik projektu dla Blazor aplikacji Serwera jest o tyle prosty, jak można uzyskać:

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

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
  </PropertyGroup>

</Project>

Plik projektu dla BlazorWebAssembly aplikacji wygląda nieco bardziej (dokładne numery wersji mogą się różnić):

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

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" PrivateAssets="all" />
  </ItemGroup>

</Project>

BlazorWebAssembly obiekty docelowe Microsoft.NET.Sdk.BlazorWebAssembly projektu zamiast Microsoft.NET.Sdk.Web zestawu SDK, ponieważ są uruchamiane w przeglądarce w środowisku uruchomieniowym platformy .NET opartym WebAssemblyna platformie .NET. Nie można zainstalować platformy .NET w przeglądarce internetowej, takiej jak na serwerze lub maszynie dewelopera. W związku z tym projekt odwołuje się do Blazor platformy przy użyciu poszczególnych odwołań do pakietów.

Dla porównania domyślny projekt ASP.NET Web Forms zawiera prawie 300 wierszy kodu XML w pliku csproj , z których większość jawnie wyświetla różne pliki kodu i zawartości w projekcie. Ponieważ wersja platformy .NET 5, zarówno Blazor serwer, jak i BlazorWebAssembly aplikacje mogą łatwo udostępniać jedno ujednolicone środowisko uruchomieniowe.

Chociaż są one obsługiwane, odwołania do poszczególnych zestawów są mniej powszechne w projektach platformy .NET. Większość zależności projektu jest obsługiwana jako odwołania do pakietów NuGet. Wystarczy odwołać się tylko do zależności pakietów najwyższego poziomu w projektach platformy .NET. Zależności przechodnie są uwzględniane automatycznie. Zamiast używać pliku packages.config często spotykanego w projektach ASP.NET Web Forms do pakietów referencyjnych, odwołania do pakietów są dodawane do pliku projektu przy użyciu <PackageReference> elementu .

<ItemGroup>
  <PackageReference Include="Newtonsoft.Json" Version="13.0.2" />
</ItemGroup>

Punkt wejścia

Punkt Blazor wejścia aplikacji serwera jest zdefiniowany w pliku Program.cs , jak widać w aplikacji konsolowej. Po wykonaniu aplikacji tworzy i uruchamia wystąpienie hosta internetowego przy użyciu wartości domyślnych specyficznych dla aplikacji internetowych. Host internetowy zarządza cyklem Blazor życia aplikacji serwera i konfiguruje usługi na poziomie hosta. Przykłady takich usług to konfiguracja, rejestrowanie, wstrzykiwanie zależności i serwer HTTP. Ten kod jest głównie standardowy i często pozostaje niezmieniony.

using BlazorApp3.Areas.Identity;
using BlazorApp3.Data;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
builder.Services.AddDbContext<ApplicationDbContext>(options =>
    options.UseSqlServer(connectionString));
builder.Services.AddDatabaseDeveloperPageExceptionFilter();
builder.Services.AddDefaultIdentity<IdentityUser>(options => options.SignIn.RequireConfirmedAccount = true)
    .AddEntityFrameworkStores<ApplicationDbContext>();
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddScoped<AuthenticationStateProvider, RevalidatingIdentityAuthenticationStateProvider<IdentityUser>>();
builder.Services.AddSingleton<WeatherForecastService>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseMigrationsEndPoint();
}
else
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllers();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

BlazorWebAssembly aplikacje definiują również punkt wejścia w Program.cs. Kod wygląda nieco inaczej. Kod jest podobny do tego, że konfiguruje hosta aplikacji w celu zapewnienia tej samej usługi na poziomie hosta aplikacji. Host WebAssembly aplikacji nie konfiguruje jednak serwera HTTP, ponieważ jest wykonywany bezpośrednio w przeglądarce.

Blazor aplikacje nie używają pliku Global.asax do zdefiniowania logiki uruchamiania aplikacji. Zamiast tego ta logika jest zawarta w Program.cs lub w powiązanej Startup klasie, do którego odwołuje się Program.cs. Tak czy inaczej, ten kod służy do konfigurowania aplikacji i wszystkich usług specyficznych dla aplikacji.

Blazor W aplikacji serwera wyświetlany plik Program.cs służy do konfigurowania punktu końcowego dla połączenia w czasie rzeczywistym używanego Blazor przez przeglądarki klienckie i serwer.

BlazorWebAssembly W aplikacji plik Program.cs definiuje składniki główne aplikacji i miejsce ich renderowania:

using BlazorApp1;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

pliki statyczne;

W przeciwieństwie do projektów ASP.NET Web Forms, nie wszystkie pliki w Blazor projekcie mogą być żądane jako pliki statyczne. Tylko pliki w folderze wwwroot są adresowalne pod adresem internetowym. Ten folder jest określany jako "internetowy katalog główny aplikacji". Wszystkie elementy poza katalogiem głównym aplikacji nie są adresowalne pod adresem internetowym. Ta konfiguracja zapewnia dodatkowy poziom zabezpieczeń, który zapobiega przypadkowemu narażeniu plików projektu w Internecie.

Konfigurowanie

Konfiguracja w aplikacjach ASP.NET Web Forms jest zwykle obsługiwana przy użyciu co najmniej jednego pliku web.config . Blazor aplikacje zwykle nie mają plików web.config . Jeśli tak, plik jest używany tylko do konfigurowania ustawień specyficznych dla usług IIS, gdy są hostowane w usługach IIS. Blazor Zamiast tego aplikacje serwera używają abstrakcji konfiguracji ASP.NET Core. (BlazorWebAssembly aplikacje nie obsługują obecnie tych samych abstrakcji konfiguracji, ale może to być funkcja dodana w przyszłości). Na przykład domyślna Blazor aplikacja serwera przechowuje niektóre ustawienia w appsettings.json.

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Więcej informacji na temat konfiguracji znajdziesz w temacie ASP.NET Core projects (Konfiguracja).

Składniki Razor

Większość plików w Blazor projektach to pliki razor . Razor to język tworzenia szablonów oparty na kodzie HTML i C#, który jest używany do dynamicznego generowania internetowego interfejsu użytkownika. Pliki razor definiują składniki tworzące interfejs użytkownika aplikacji. W większości składników są identyczne zarówno dla serwera, jak Blazor i BlazorWebAssembly aplikacji. Składniki w programie Blazor są podobne do kontrolek użytkownika w ASP.NET Web Forms.

Każdy plik składnika Razor jest kompilowany w klasie .NET podczas kompilowania projektu. Wygenerowana klasa przechwytuje stan składnika, logikę renderowania, metody cyklu życia, programy obsługi zdarzeń i inną logikę. Więcej informacji na temat składników tworzenia znajdziesz w sekcji Tworzenie składników interfejsu użytkownika wielokrotnego użytku.Blazor

Pliki _Imports.razor nie są plikami składników Razor. Zamiast tego definiują zestaw dyrektyw Razor do importowania do innych plików razor w tym samym folderze i w jego podfolderach. Na przykład plik _Imports.razor to konwencjonalny sposób dodawania using dyrektyw dla powszechnie używanych przestrzeni nazw:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using BlazorApp1
@using BlazorApp1.Shared

Strony

Gdzie znajdują się strony w aplikacjach Blazor ? Blazor nie definiuje oddzielnego rozszerzenia pliku dla adresowalnych stron, takich jak pliki .aspx w aplikacjach ASP.NET Web Forms. Zamiast tego strony są definiowane przez przypisywanie tras do składników. Trasa jest zwykle przypisywana przy użyciu @page dyrektywy Razor. Na przykład Counter składnik utworzony w pliku Pages/Counter.razor definiuje następującą trasę:

@page "/counter"

Routing w systemie Blazor jest obsługiwany po stronie klienta, a nie na serwerze. Gdy użytkownik przechodzi w przeglądarce, przechwytuje nawigację, Blazor a następnie renderuje składnik z pasującą trasą.

Trasy składników nie są obecnie wnioskowane przez lokalizację pliku składnika, na przykład ze stronami .aspx lub ASP.NET Core Razor Pages. Ta funkcja może zostać dodana w przyszłości. Każda trasa musi być określona jawnie w składniku. Przechowywanie składników routingu w folderze Pages nie ma specjalnego znaczenia i jest wyłącznie konwencją.

Więcej informacji na temat routingu znajdziesz w Blazor sekcji Strony, routing i układy .

Układ

W aplikacjach ASP.NET Web Forms typowy układ strony jest obsługiwany przy użyciu stron wzorcowych (Site.Master). W Blazor aplikacjach układ strony jest obsługiwany przy użyciu składników układu (Shared/MainLayout.razor). Składniki układu zostały szczegółowo omówione w sekcji Strona, routing i układy .

Bootstrap Blazor

Aby uruchomić program Blazor, aplikacja musi:

• Określ, gdzie na stronie powinien być renderowany składnik główny (App.Razor).
• Dodaj odpowiedni Blazor skrypt platformy.

Blazor W aplikacji Serwer strona hosta składnika głównego jest zdefiniowana w pliku _Host.cshtml. Ten plik definiuje stronę Razor, a nie składnik. Platforma Razor Pages używa składni Razor do definiowania strony adresowalnej przez serwer, podobnie jak strona .aspx .

@page "/"
@namespace BlazorApp3.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

<component type="typeof(App)" render-mode="ServerPrerendered" />

Atrybut render-mode służy do definiowania miejsca renderowania składnika na poziomie głównym. Opcja RenderMode wskazuje sposób renderowania składnika. W poniższej tabeli przedstawiono obsługiwane RenderMode opcje.

Opcja	Opis
RenderMode.Server	Renderowane interaktywnie po nawiązaniu połączenia z przeglądarką
RenderMode.ServerPrerendered	Najpierw wstępnie zainstalowane, a następnie renderowane interaktywnie
RenderMode.Static	Renderowane jako zawartość statyczna

Plik _Layout.cshtml zawiera domyślny kod HTML aplikacji i jej składników.

@using Microsoft.AspNetCore.Components.Web
@namespace BlazorApp3.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="BlazorApp3.styles.css" rel="stylesheet" />
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    @RenderBody()

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

Odwołanie do skryptu do _framework/blazor.server.js ustanawia połączenie w czasie rzeczywistym z serwerem, a następnie zajmuje się wszystkimi interakcjami użytkownika i aktualizacjami interfejsu użytkownika.

BlazorWebAssembly W aplikacji strona hosta jest prostym statycznym plikiem HTML w wwwroot/index.html. Element <div> o identyfikatorze o nazwie app służy do wskazywania, gdzie ma być renderowany składnik główny.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorApp1</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorApp1.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

Składnik główny do renderowania jest określony w pliku Program.cs aplikacji z elastycznością rejestrowania usług za pomocą wstrzykiwania zależności. Aby uzyskać więcej informacji, zobacz ASP.NET Core dependency injection (Wstrzykiwanie zależności ASP.NET CoreBlazor).

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

Dane wyjściowe kompilacji

Po skompilowaniu Blazor projektu wszystkie pliki składników i kodu Razor są kompilowane w jednym zestawie. W przeciwieństwie do projektów Blazor ASP.NET Web Forms nie obsługuje kompilacji środowiska uruchomieniowego logiki interfejsu użytkownika.

Uruchamianie aplikacji przy użyciu Przeładowywanie na gorąco

Aby uruchomić aplikację Blazor serwera, naciśnij F5 w programie Visual Studio, aby uruchomić z dołączonym debugerem lub naciśnij Ctrl + F5, aby uruchomić bez dołączonego debugera.

Aby uruchomić aplikację BlazorWebAssembly , wybierz jedną z następujących metod:

• Uruchom projekt klienta bezpośrednio przy użyciu serwera programistycznego.
• Uruchom projekt serwera podczas hostowania aplikacji przy użyciu platformy ASP.NET Core.

BlazorWebAssembly aplikacje można debugować zarówno w przeglądarce, jak i w programie Visual Studio. Aby uzyskać szczegółowe informacje, zobacz Debugowanie ASP.NET CoreWebAssemblyBlazor.

Zarówno Blazor serwer, jak i BlazorWebAssembly aplikacje obsługują Przeładowywanie na gorąco w programie Visual Studio. Przeładowywanie na gorąco to funkcja, która automatycznie aktualizuje zmiany wprowadzone w Blazor aplikacji na żywo w przeglądarce. Możesz przełączać, czy Przeładowywanie na gorąco jest włączona z poziomu jej ikony na pasku narzędzi:

Wybranie karetki obok ikony wyświetla dodatkowe opcje. Możesz przełączać Przeładowywanie na gorąco włączać lub wyłączać, uruchamiać ponownie aplikację i przełączać, czy Przeładowywanie na gorąco powinny wystąpić przy każdym zapisaniu pliku.

Możesz również uzyskać dostęp do dodatkowych opcji konfiguracji. Okno dialogowe konfiguracji umożliwia określenie, czy Przeładowywanie na gorąco powinny być włączone podczas debugowania (wraz z funkcją Edytuj i kontynuuj), podczas uruchamiania bez debugowania lub podczas zapisywania pliku.

Pętla wewnętrzna "dewelopera" została znacznie usprawniona dzięki Przeładowywanie na gorąco. Bez Przeładowywanie na gorąco Blazor deweloper zazwyczaj musi ponownie uruchomić i ponownie uruchomić aplikację po każdej zmianie, przechodząc do odpowiedniej części aplikacji zgodnie z potrzebami. Dzięki Przeładowywanie na gorąco można wprowadzać zmiany w uruchomionej aplikacji bez konieczności ponownego uruchamiania w większości przypadków. Przeładowywanie na gorąco nawet zachowuje stan stron, więc nie trzeba ponownie wprowadzać wartości formularza ani w inny sposób pobierać aplikację tam, gdzie jest potrzebna.

PoprzedniNastępny