Projektstruktúra alkalmazásokhoz Blazor

Tipp.

Ez a tartalom egy részlet az eBookból, Blazor az Azure-hoz készült ASP NET Web Forms Developers számára, amely elérhető a .NET Docs-on vagy egy ingyenesen letölthető PDF-fájlként, amely offline is olvasható.

PDF letöltése

A projektstruktúra jelentős eltérései ellenére ASP.NET webes űrlapokat, és Blazor számos hasonló fogalomban osztoznak. Itt áttekintjük egy Blazor projekt struktúráját, és összehasonlítjuk egy ASP.NET Web Forms-projekttel.

Az első Blazor alkalmazás létrehozásához kövesse az Blazor első lépések utasításait. Az utasításokat követve létrehozhat egy kiszolgálóalkalmazást Blazor vagy egy BlazorWebAssembly ASP.NET Core-ban üzemeltetett alkalmazást. A modellspecifikus logika kivételével a legtöbb kód mindkét projektben ugyanaz.

Projektfájl

Blazor A kiszolgálóalkalmazások .NET-projektek. A Kiszolgáló alkalmazás projektfájlja Blazor a lehető legegyszerűbb:

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

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

</Project>

Az alkalmazás projektfájlja BlazorWebAssembly kissé jobban érintettnek tűnik (a pontos verziószámok eltérőek lehetnek):

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

Blazor WebAssembly projektcélok Microsoft.NET.Sdk.BlazorWebAssembly az sdk helyett Microsoft.NET.Sdk.Web , mert a böngészőben futnak egy WebAssembly-based .NET-futtatókörnyezetben. A .NET nem telepíthető olyan webböngészőbe, mint egy kiszolgálóra vagy fejlesztői gépre. Következésképpen a projekt egyedi csomaghivatkozások használatával hivatkozik a Blazor keretrendszerre.

Összehasonlításképpen egy alapértelmezett ASP.NET Web Forms-projekt közel 300 sorNYI XML-fájlt tartalmaz a .csproj fájlban, amelyek többsége kifejezetten felsorolja a projekt különböző kód- és tartalomfájljait. A .NET 5 megjelenése óta a kiszolgáló és BlazorBlazor az alkalmazások is WebAssembly könnyen megoszthatnak egy egységes futtatókörnyezetet.

Bár támogatottak, az egyes szerelvényhivatkozások kevésbé gyakoriak a .NET-projektekben. A legtöbb projektfüggőség NuGet-csomaghivatkozásként van kezelve. Csak a .NET-projektek legfelső szintű csomagfüggőségére kell hivatkoznia. A tranzitív függőségek automatikusan bekerülnek. Ahelyett, hogy a ASP.NET Web Forms-projektekben gyakran használt packages.config fájlt használjuk a csomagokra való hivatkozáshoz, a csomaghivatkozások hozzáadódnak a projektfájlhoz az <PackageReference> elem használatával.

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

Belépési pont

A Blazor Kiszolgáló alkalmazás belépési pontja a Program.cs fájlban van definiálva, ahogyan az egy konzolalkalmazásban is látható. Az alkalmazás végrehajtásakor létrehoz és futtat egy webgazdapéldányt a webalkalmazásokra vonatkozó alapértelmezett beállítások használatával. A webes gazdagép kezeli a Blazor Kiszolgáló alkalmazás életciklusát, és beállítja a gazdagépszintű szolgáltatásokat. Ilyen szolgáltatások például a konfiguráció, a naplózás, a függőséginjektálás és a HTTP-kiszolgáló. Ez a kód többnyire sablon, és gyakran változatlan marad.

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));

if (builder.Environment.IsDevelopment())
{
    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();

Blazor WebAssembly az alkalmazások egy belépési pontot is meghatároznak a Program.cs. A kód kissé másképp néz ki. A kód abban hasonlít, hogy az alkalmazás gazdagépét úgy állítja be, hogy ugyanazokat a gazdagépszintű szolgáltatásokat nyújtsa az alkalmazásnak. Az WebAssembly alkalmazásgazda azonban nem állít be HTTP-kiszolgálót, mert közvetlenül a böngészőben fut.

Blazor az alkalmazások nem használnak Global.asax fájlt az alkalmazás indítási logikájának meghatározásához. Ehelyett ez a logika Program.cs, amely a Program.csStartup. Akárhogy is, ez a kód az alkalmazás és az alkalmazásspecifikus szolgáltatások konfigurálására szolgál.

Blazor Egy Kiszolgálóalkalmazásban a megjelenített Program.cs fájl a végpont beállítására szolgál az ügyfélböngészők és a kiszolgáló közötti Blazor valós idejű kapcsolathoz.

Blazor WebAssembly Egy alkalmazásban a Program.cs fájl határozza meg az alkalmazás gyökérösszetevőit, és azt, hogy hol jelenjenek meg:

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();

Statikus fájlok

ASP.NET Web Forms-projektektől eltérően a projektben Blazor nem minden fájl kérhető statikus fájlként. Csak a wwwroot mappában lévő fájlok vannak webcímezhetőek. Ezt a mappát az alkalmazás "webgyökerének" nevezzük. Az alkalmazás webes gyökerén kívül bármi nem webcímezhető. Ez a beállítás további biztonsági szintet biztosít, amely megakadályozza a projektfájlok véletlen expozícióját a weben.

Konfiguráció

A ASP.NET Web Forms-alkalmazások konfigurációját általában egy vagy több web.config fájllal kezelik. Blazor az alkalmazások általában nem rendelkeznek web.config fájlokkal. Ha igen, a fájl csak IIS-specifikus beállítások konfigurálására szolgál, ha az IIS-en fut. Blazor A kiszolgálóalkalmazások ehelyett a ASP.NET Core konfiguráció absztrakcióit használják. (BlazorWebAssemblyAz alkalmazások jelenleg nem támogatják ugyanazokat a konfigurációs absztrakciókat, de ez a jövőben hozzáadott funkció lehet.) Az alapértelmezett Blazor Kiszolgáló alkalmazás például appsettings.json tárol bizonyos beállításokat.

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

A konfigurációval kapcsolatos további tudnivalókat ASP.NET Core-projektek konfigurációs szakaszában találja.

Razor-összetevők

A projektek legtöbb fájlja Blazor .razor fájl. A Razor egy HTML- és C#-alapú templatáló nyelv, amely a webes felhasználói felület dinamikus létrehozására szolgál. A .razor-fájlok olyan összetevőket határoznak meg, amelyek az alkalmazás felhasználói felületét alkotják. Az összetevők többnyire megegyeznek a kiszolgáló és BlazorBlazor az WebAssembly alkalmazások esetében is. A beépített Blazor összetevők a ASP.NET Webes űrlapok felhasználói vezérlőihez hasonlóak.

Minden Razor-összetevőfájl .NET-osztályba lesz lefordítva a projekt létrehozásakor. A létrehozott osztály rögzíti az összetevő állapotát, renderelési logikáját, életciklus-metódusait, eseménykezelőit és egyéb logikáját. Az újrahasználható felhasználói felület összetevőinek szerkesztéséről a szakaszból Blazor tudhat meg többet.

A _Imports.razor fájlok nem Razor-összetevőfájlok. Ehelyett razor-direktívák készletét definiálják, amelyeket importálni szeretnének más .razor-fájlokba ugyanabban a mappában és annak almappáiban. A _Imports.razor fájl például

@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

Oldalak

Hol találhatók az Blazor alkalmazások lapjai? Blazor nem határoz meg külön fájlkiterjesztést a címezhető lapokhoz, például a ASP.NET Web Forms-alkalmazások .aspx fájljaihoz. Ehelyett a lapok úgy vannak definiálva, hogy útvonalakat rendelnek hozzá az összetevőkhöz. Az útvonalak általában a Razor-direktíva @page használatával vannak hozzárendelve. A Pages/Counter.razorCounterlétrehozott összetevő például a következő útvonalat határozza meg:

@page "/counter"

Az Blazor útválasztás ügyféloldali, nem pedig a kiszolgálón történik. Amikor a felhasználó a böngészőben navigál, elfogja a navigációt, Blazor majd megjeleníti az összetevőt a megfelelő útvonallal.

Az összetevő útvonalait jelenleg nem az összetevő fájlhelye határozza meg, például .aspx lapokkal vagy ASP.NET Core Razor-oldalakkal. Ez a funkció a jövőben is hozzáadható. Minden útvonalat explicit módon kell megadni az összetevőn. A Lapok mappában lévő routable összetevők tárolása nem jelent különleges jelentést, és pusztán konvenció.

Az útválasztásról Blazor a Lapok, az Útválasztás és az Elrendezések szakaszban olvashat bővebben.

Elrendezés

A ASP.NET Web Forms-alkalmazásokban a gyakori lapelrendezések mesteroldalak (Site.Master) használatával kezelhetők. Az alkalmazásokban Blazor a lapelrendezés kezelése elrendezési összetevőkkel történik (Shared/MainLayout.razor). Az elrendezés összetevőit részletesebben az Oldal, az Útválasztás és az Elrendezések szakaszban tárgyaljuk .

Bootstrap Blazor

A rendszerindításhoz Blazoraz alkalmazásnak a következőnek kell lennie:

• Adja meg, hogy a lapon hol jelenjen meg a gyökérösszetevő (App.Razor).
• Adja hozzá a megfelelő Blazor keretrendszerszkriptet.

A Kiszolgáló alkalmazásban a Blazor gyökérösszetevő gazdagéplapja a _Host.cshtml fájlban van definiálva. Ez a fájl Razor-lapot határoz meg, nem összetevőt. A Razor Pages Razor-szintaxissal definiál egy kiszolgálócímezhető lapot, hasonlóan a .aspx laphoz.

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

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

Az render-mode attribútum a gyökérszintű összetevő megjelenítésének helyét határozza meg. A RenderMode beállítás azt jelzi, hogy milyen módon kell megjeleníteni az összetevőt. Az alábbi táblázat a támogatott RenderMode beállításokat ismerteti.

Lehetőség	Leírás
RenderMode.Server	Interaktív megjelenítés a böngészővel való kapcsolat létesítése után
RenderMode.ServerPrerendered	Először előre berendelve, majd interaktívan renderelve
RenderMode.Static	Statikus tartalomként renderelve

A _Layout.cshtml fájl tartalmazza az alkalmazás és összetevői alapértelmezett HTML-kódját.

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

A _framework/blazor.server.js szkripthivatkozása létrehozza a kiszolgálóval való valós idejű kapcsolatot, majd az összes felhasználói beavatkozással és felhasználói felületi frissítéssel foglalkozik.

Az alkalmazásban a BlazorWebAssembly gazdagépoldal egy egyszerű statikus HTML-fájl a wwwroot/index.html alatt. A <div> névvel app ellátott azonosítót tartalmazó elem jelzi a gyökérösszetevő megjelenítésének helyét.

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

A renderelendő fő összetevő az alkalmazás Program.cs fájljában van megadva, amely rugalmasan regisztrálja a szolgáltatásokat függőséginjektálással. További információ: ASP.NET Core Blazor függőséginjektálás.

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

Build kimenete

Blazor A projekt létrehozásakor az összes Razor-összetevő és kódfájl egyetlen szerelvénybe lesz lefordítva. ASP.NET Web Forms-projektektől Blazor eltérően nem támogatja a felhasználói felületi logika futtatókörnyezeti fordítását.

Az alkalmazás futtatása a gyakori elérésű újratöltéssel

A Kiszolgáló alkalmazás futtatásához nyomja le az Blazor F5 billentyűt a Visual Studióban a hibakereső csatlakoztatásával való futtatáshoz, vagy a hibakereső csatlakoztatása nélkül.

Az BlazorWebAssembly alkalmazás futtatásához válasszon az alábbi módszerek közül:

• Futtassa az ügyfélprojektet közvetlenül a fejlesztői kiszolgálóval.
• Futtassa a kiszolgálóprojektet, amikor az alkalmazást a ASP.NET Core-val üzemelteti.

Blazor WebAssembly az alkalmazások a böngészőben és a Visual Studióban is hibakeresést végezhetnek. További részletekért lásd a hibakeresési ASP.NET Core-tBlazorWebAssembly.

A Kiszolgáló és BlazorBlazor az alkalmazások egyaránt WebAssembly támogatják a Visual Studióban a gyakori újratöltést. A gyakori elérésű újratöltés olyan funkció, amely automatikusan frissíti az alkalmazás élő módosításait Blazor a böngészőben. Beállíthatja, hogy a gyakori elérésű újratöltés engedélyezve legyen-e az eszköztár ikonjáról:

Ha az ikon melletti elemet választja, további lehetőségeket jelenít meg. Be- vagy kikapcsolhatja a gyakori elérésű újratöltést, újraindíthatja az alkalmazást, és beállíthatja, hogy a gyakori elérésű újratöltés történjen-e a fájlok mentésekor.

További konfigurációs beállításokat is elérhet. A konfigurációs párbeszédpanelen megadhatja, hogy a gyakori elérésű újratöltés engedélyezve legyen-e a hibakeresés (a Szerkesztés és a Folytatás mellett), a hibakeresés nélküli indításkor vagy a fájl mentésekor.

A "fejlesztői belső hurok" jelentősen leegyszerűsítve lett a Hot Reload használatával. A gyakori elérésű újratöltés nélkül a Blazor fejlesztőknek általában minden módosítás után újra kell indítaniuk és újra kell futtatniuk az alkalmazást, és szükség szerint az alkalmazás megfelelő részére kell navigálniuk. A gyakori elérésű újratöltéssel módosításokat végezhet a futó alkalmazáson anélkül, hogy a legtöbb esetben újra kellene indítani. A gyakori elérésű újratöltés még a lapok állapotát is megőrzi, így nem kell újra megadnia az űrlapértékeket, vagy más módon vissza kell szereznie az alkalmazást oda, ahol szüksége van rá.

Előzőkövetkező