Struktura projektu pro Blazor aplikace
Tip
Tento obsah je výňatek z eBooku pro Blazor vývojáře webových formulářů ASP NET pro Azure, který je k dispozici na webu .NET Docs nebo jako bezplatný soubor PDF ke stažení, který si můžete přečíst offline.
Navzdory významným rozdílům ve struktuře projektu ASP.NET webových formulářů a Blazor sdílejte mnoho podobných konceptů. Tady se podíváme na strukturu Blazor projektu a porovnáme ji s projektem ASP.NET Web Forms.
Pokud chcete vytvořit první Blazor aplikaci, postupujte podle pokynů v krocích BlazorZačínáme. Podle pokynů můžete vytvořit serverovou Blazor aplikaci nebo BlazorWebAssembly aplikaci hostované v ASP.NET Core. S výjimkou logiky specifické pro hostování modelu je většina kódu v obou projektech stejná.
Soubor projektu
Blazor Serverové aplikace jsou projekty .NET. Soubor projektu pro Blazor aplikaci Server je asi tak jednoduchý, jak může získat:
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
</PropertyGroup>
</Project>
Soubor projektu pro BlazorWebAssembly aplikaci vypadá trochu více (přesná čísla verzí se mohou lišit):
<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 cíle Microsoft.NET.Sdk.BlazorWebAssembly
projektu místo Microsoft.NET.Sdk.Web
sady SDK, protože se spouští v prohlížeči v WebAssemblymodulu runtime .NET. .NET nemůžete nainstalovat do webového prohlížeče, jako je to možné na serveru nebo vývojářském počítači. V důsledku toho projekt odkazuje na architekturu Blazor pomocí odkazů na jednotlivé balíčky.
Ve srovnání s výchozím ASP.NET projekt webových formulářů obsahuje v souboru .csproj téměř 300 řádků XML, z nichž většina explicitně uvádí různé soubory kódu a obsahu v projektu. Vzhledem k tomu, že verze .NET 5, Blazor můžou server i BlazorWebAssembly aplikace snadno sdílet jeden jednotný modul runtime.
I když jsou podporované, jednotlivé odkazy na sestavení jsou méně běžné v projektech .NET. Většina závislostí projektu se zpracovává jako odkazy na balíčky NuGet. V projektech .NET potřebujete odkazovat pouze na závislosti balíčků nejvyšší úrovně. Přechodné závislosti se zahrnou automaticky. Místo použití souboru packages.config , který se běžně vyskytuje v projektech webových formulářů ASP.NET odkazy na balíčky, se odkazy na balíčky přidají do souboru projektu pomocí elementu <PackageReference>
.
<ItemGroup>
<PackageReference Include="Newtonsoft.Json" Version="13.0.2" />
</ItemGroup>
Vstupní bod
Vstupní Blazor bod serverové aplikace je definován v souboru Program.cs , jak byste viděli v aplikaci konzoly. Když se aplikace spustí, vytvoří a spustí instanci webového hostitele pomocí výchozích hodnot specifických pro webové aplikace. Webový hostitel spravuje Blazor životní cyklus aplikace Server a nastavuje služby na úrovni hostitele. Mezi příklady takových služeb patří konfigurace, protokolování, injektáž závislostí a server HTTP. Tento kód je většinou často používaný a často zůstává beze změny.
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 aplikace také definují vstupní bod v Program.cs. Kód vypadá trochu jinak. Kód je podobný tomu, že nastavuje hostitele aplikace tak, aby aplikaci poskytoval stejné služby na úrovni hostitele. Hostitel WebAssembly aplikace ale nenastaví server HTTP, protože se spustí přímo v prohlížeči.
Blazor aplikace k definování logiky spouštění aplikace nepoužívají soubor Global.asax . Místo toho je tato logika obsažena v Program.cs nebo v související Startup
třídě, která je odkazována z Program.cs. V obou směrech se tento kód používá ke konfiguraci aplikace a všech služeb specifických pro aplikaci.
Blazor V aplikaci Server se zobrazený soubor Program.cs používá k nastavení koncového bodu pro připojení v reálném čase používaného mezi klientskými prohlížeči a serveremBlazor.
BlazorWebAssembly V aplikaci soubor Program.cs definuje kořenové komponenty aplikace a jejich vykreslení:
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();
statické soubory,
Na rozdíl od ASP.NET projektů webových formulářů není možné požadovat všechny soubory v Blazor projektu jako statické soubory. Pouze soubory ve složce wwwroot jsou webové adresovatelné. Tato složka se označuje jako "kořenový adresář" aplikace. Cokoli mimo webovou kořenovou kopii aplikace není webové adresovatelné. Toto nastavení poskytuje další úroveň zabezpečení, která brání náhodnému vystavení souborů projektu na webu.
Konfigurace
Konfigurace v aplikacích ASP.NET Web Forms se obvykle zpracovává pomocí jednoho nebo více souborů web.config . Blazor aplikace obvykle nemají soubory web.config . Pokud ano, použije se soubor pouze ke konfiguraci nastavení specifických pro iis, když je hostovaný ve službě IIS. Blazor Místo toho serverové aplikace používají abstrakce konfigurace ASP.NET Core. (BlazorWebAssembly aplikace v současné době nepodporují stejné abstrakce konfigurace, ale to může být funkce přidaná v budoucnu.) Například výchozí Blazor serverová aplikace ukládá některá nastavení do appsettings.json.
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},
"AllowedHosts": "*"
}
Další informace o konfiguraci najdete v ASP.NET základních projektech v části Konfigurace .
Komponenty Razor
Většina souborů v Blazor projektech jsou soubory .razor . Razor je jazyk šablon založený na jazyce HTML a C#, který se používá k dynamickému generování webového uživatelského rozhraní. Soubory .razor definují komponenty, které tvoří uživatelské rozhraní aplikace. Ve většině případů jsou komponenty identické pro Blazor server i BlazorWebAssembly aplikace. Součásti jsou Blazor podobné uživatelským ovládacím prvkům ve webových formulářích ASP.NET.
Každý soubor komponenty Razor je zkompilován do třídy .NET při sestavení projektu. Vygenerovaná třída zachycuje stav komponenty, logiku vykreslování, metody životního cyklu, obslužné rutiny událostí a další logiku. Další informace o vytváření komponent najdete v části Sestavení opakovaně použitelných komponent Blazor uživatelského rozhraní.
Soubory _Imports.razor nejsou soubory komponent Razor. Místo toho definují sadu direktiv Razor pro import do jiných souborů .razor ve stejné složce a v jejích podsložkách. Například soubor _Imports.razor je konvenční způsob přidání using
direktiv pro běžně používané obory názvů:
@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
Stránky
Kde jsou stránky v aplikacích Blazor ? Blazor nedefinuje samostatnou příponu souboru pro adresovatelné stránky, jako jsou soubory .aspx v aplikacích ASP.NET Web Forms. Místo toho jsou stránky definovány přiřazením tras ke komponentám. Trasa se obvykle přiřazuje pomocí direktivy @page
Razor. Například komponenta Counter
kopírovaná v souboru Pages/Counter.razor definuje následující trasu:
@page "/counter"
Směrování probíhá Blazor na straně klienta, ne na serveru. Když uživatel prochází v prohlížeči, Blazor zachytí navigaci a pak vykreslí komponentu s odpovídající trasou.
Trasy komponent se momentálně neodvozují umístěním souboru komponenty, jako jsou stránky .aspx nebo ASP.NET Core Razor Pages. Tuto funkci můžete přidat v budoucnu. Každá trasa musí být v komponentě explicitně zadána. Ukládání směrovatelných komponent ve složce Pages nemá žádný zvláštní význam a je to čistě konvence.
Další informace o směrování najdete v Blazor části Stránky, směrování a rozložení .
Rozložení
V ASP.NET aplikacích Webových formulářů se běžné rozložení stránky zpracovává pomocí stránek předlohy (Site.Master). V Blazor aplikacích se rozložení stránky zpracovává pomocí komponent rozložení (Shared/MainLayout.razor). Součásti rozložení jsou podrobněji popsány v části Stránka, směrování a rozložení.
Svépomocný Blazor
Pokud chcete spustit, Blazormusí aplikace:
- Určete, kam se má na stránce vykreslit kořenová komponenta (App.Razor).
- Přidejte odpovídající Blazor skript architektury.
Blazor V aplikaci Server se stránka hostitele kořenové komponenty definuje v souboru _Host.cshtml. Tento soubor definuje stránku Razor Page, nikoli komponentu. Razor Pages používá syntaxi Razor k definování stránky adresovatelné na serveru, velmi podobně jako na .aspx stránce.
@page "/"
@namespace BlazorApp3.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = "_Layout";
}
<component type="typeof(App)" render-mode="ServerPrerendered" />
Atribut render-mode
se používá k definování, kde se má vykreslit součást kořenové úrovně. Možnost RenderMode
označuje způsob, jakým se má komponenta vykreslit. Následující tabulka popisuje podporované RenderMode
možnosti.
Možnost | Popis |
---|---|
RenderMode.Server |
Interaktivní vykreslení po navázání připojení k prohlížeči |
RenderMode.ServerPrerendered |
Nejprve předem vykreslíme a pak se vykreslí interaktivně. |
RenderMode.Static |
Vykresleno jako statický obsah |
Soubor _Layout.cshtml obsahuje výchozí kód HTML pro aplikaci a její komponenty.
@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>
Odkaz na skript na _framework/blazor.server.js vytvoří připojení k serveru v reálném čase a pak se zabývá všemi interakcemi uživatelů a aktualizacemi uživatelského rozhraní.
BlazorWebAssembly V aplikaci je hostitelská stránka jednoduchý statický soubor HTML pod wwwroot/index.html. Element <div>
s názvem app
ID se používá k označení, kde má být vykreslována kořenová komponenta.
<!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>
Kořenová komponenta, která se má vykreslit, se zadává v souboru Program.cs aplikace s flexibilitou registrace služeb prostřednictvím injektáže závislostí. Další informace najdete v tématu ASP.NET injektáž závislostí jádraBlazor.
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
Výstup sestavení
Blazor Při sestavení projektu se všechny komponenty Razor a soubory kódu zkompilují do jednoho sestavení. Na rozdíl od ASP.NET projektů Blazor Webových formulářů nepodporuje kompilaci logiky uživatelského rozhraní za běhu.
Spuštění aplikace pomocí Opětovné načítání za provozu
Pokud chcete spustit Blazor aplikaci Server, stisknutím klávesy F5 v sadě Visual Studio spusťte ladicí program s připojeným ladicím programem nebo stisknutím ctrl + F5 spusťte bez připojeného ladicího programu.
Pokud chcete aplikaci spustit BlazorWebAssembly , zvolte jeden z následujících přístupů:
- Spusťte projekt klienta přímo pomocí vývojového serveru.
- Při hostování aplikace s ASP.NET Core spusťte projekt serveru.
BlazorWebAssembly aplikace je možné ladit v prohlížeči i v sadě Visual Studio. Podrobnosti najdete v tématu Ladění ASP.NET Core BlazorWebAssembly .
Blazor Server i BlazorWebAssembly aplikace podporují Opětovné načítání za provozu v sadě Visual Studio. Opětovné načítání za provozu je funkce, která automaticky aktualizuje změny provedené v živé aplikaci Blazor v prohlížeči. Můžete přepnout, jestli je Opětovné načítání za provozu povolená, z jeho ikony na panelu nástrojů:
Výběrem stříšky vedle ikony se zobrazí další možnosti. Můžete zapnout nebo vypnout Opětovné načítání za provozu, restartovat aplikaci a přepínat, jestli Opětovné načítání za provozu dojít při každém uložení souboru.
Můžete také získat přístup k dalším možnostem konfigurace. V dialogovém okně konfigurace můžete určit, jestli mají být při ladění povoleny Opětovné načítání za provozu (spolu s možností Upravit a pokračovat), při spuštění bez ladění nebo při uložení souboru.
"Vnitřní smyčka pro vývojáře" byla výrazně zjednodušená s Opětovné načítání za provozu. Bez Opětovné načítání za provozu Blazor by vývojář obvykle po každé změně musel aplikaci restartovat a znovu spustit. Podle potřeby přejde na příslušnou část aplikace. S Opětovné načítání za provozu je možné provádět změny spuštěné aplikace bez nutnosti restartování ve většině případů. Opětovné načítání za provozu dokonce zachovat stav stránek, takže není nutné znovu zadávat hodnoty formuláře nebo jinak získat aplikaci tam, kde ji potřebujete.