Projektstruktur för Blazor appar

Artikel
03/05/2024

Dricks

Det här innehållet är ett utdrag ur e-boken, Blazor för ASP NET Web Forms Developers for Azure, tillgängligt på .NET Docs eller som en kostnadsfri nedladdningsbar PDF som kan läsas offline.

Ladda ned PDF

Trots betydande skillnader i projektstruktur ASP.NET webbformulär och Blazor delar många liknande begrepp. Här ska vi titta på strukturen för ett Blazor projekt och jämföra det med ett ASP.NET Web Forms-projekt.

Om du vill skapa din första Blazor app följer du anvisningarna i stegenBlazor att komma igång. Du kan följa anvisningarna för att skapa antingen en Blazor serverapp eller en BlazorWebAssembly app som finns i ASP.NET Core. Förutom den värdmodellspecifika logiken är den mesta koden i båda projekten densamma.

Projektfil

Blazor Serverappar är .NET-projekt. Projektfilen för serverappen Blazor är så enkel som den kan bli:

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

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

</Project>

Projektfilen för en BlazorWebAssembly app ser lite mer involverad ut (exakta versionsnummer kan variera):

<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 projektmål Microsoft.NET.Sdk.BlazorWebAssembly i stället för Microsoft.NET.Sdk.Web sdk eftersom de körs i webbläsaren på en WebAssembly-baserad .NET-körning. Du kan inte installera .NET i en webbläsare som du kan på en server- eller utvecklardator. Därför refererar projektet till ramverket Blazor med hjälp av enskilda paketreferenser.

Som jämförelse innehåller ett standardprojekt ASP.NET Web Forms nästan 300 rader XML i sin .csproj-fil , varav de flesta uttryckligen visar de olika kod- och innehållsfilerna i projektet. Sedan .NET 5 släpptes kan både Blazor Server och BlazorWebAssembly appar enkelt dela en enhetlig körning.

Även om de stöds är enskilda sammansättningsreferenser mindre vanliga i .NET-projekt. De flesta projektberoenden hanteras som NuGet-paketreferenser. Du behöver bara referera till paketberoenden på toppnivå i .NET-projekt. Transitiva beroenden inkluderas automatiskt. I stället för att använda filen packages.config som vanligtvis finns i ASP.NET Web Forms-projekt för att referera till paket, läggs paketreferenser till i projektfilen med hjälp av elementet <PackageReference> .

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

Startpunkt

Serverappens Blazor startpunkt definieras i Program.cs-filen, som du ser i en konsolapp. När appen körs skapar och kör den en webbvärdinstans med standardinställningar som är specifika för webbappar. Webbvärden hanterar serverappens Blazor livscykel och konfigurerar tjänster på värdnivå. Exempel på sådana tjänster är konfiguration, loggning, beroendeinmatning och HTTP-servern. Den här koden är mestadels pannplåt och lämnas ofta oförändrad.

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

Blazor WebAssembly appar definierar också en startpunkt i Program.cs. Koden ser lite annorlunda ut. Koden liknar den eftersom den konfigurerar appvärden för att tillhandahålla samma tjänster på värdnivå till appen. Appvärden WebAssembly konfigurerar dock inte en HTTP-server eftersom den körs direkt i webbläsaren.

Blazor appar använder inte en Global.asax-fil för att definiera startlogik för appen. I stället finns den här logiken i Program.cs eller i en relaterad Startup klass som refereras från Program.cs. Hur som helst används den här koden för att konfigurera appen och alla appspecifika tjänster.

I en Blazor serverapp används den Program.cs fil som visas för att konfigurera slutpunkten för den realtidsanslutning som används av Blazor mellan klientwebbläsaren och servern.

I en BlazorWebAssembly app definierar Program.cs-filen rotkomponenterna för appen och var de ska återges:

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

Statiska filer

Till skillnad från ASP.NET Web Forms-projekt kan inte alla filer i ett Blazor projekt begäras som statiska filer. Endast filerna i wwwroot-mappen är webbadresserbara. Den här mappen kallas appens "webbrot". Allt utanför appens webbrot går inte att adressera på webben. Den här konfigurationen ger ytterligare en säkerhetsnivå som förhindrar oavsiktlig exponering av projektfiler på webben.

Konfiguration

Konfiguration i ASP.NET Web Forms-appar hanteras vanligtvis med hjälp av en eller flera web.config-filer . Blazor appar har vanligtvis inte web.config-filer . Om de gör det används filen endast för att konfigurera IIS-specifika inställningar när den finns på IIS. Blazor I stället använder Server-appar ASP.NET Core-konfigurationsabstraktioner. (BlazorWebAssembly Appar stöder för närvarande inte samma konfigurationsabstraktioner, men det kan vara en funktion som läggs till i framtiden.) Standardserverappen Blazor lagrar till exempel vissa inställningar i appsettings.json.

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

Du lär dig mer om konfiguration i ASP.NET Core-projekt i avsnittet Konfiguration .

Razor-komponenter

De flesta filer i Blazor projekt är .razor-filer . Razor är ett mallspråk baserat på HTML och C# som används för att dynamiskt generera webbgränssnitt. . razor-filerna definierar komponenter som utgör appens användargränssnitt. För det mesta är komponenterna identiska för både Blazor server och BlazorWebAssembly appar. Komponenter i Blazor är analoga med användarkontroller i ASP.NET webbformulär.

Varje Razor-komponentfil kompileras till en .NET-klass när projektet skapas. Den genererade klassen samlar in komponentens tillstånd, renderingslogik, livscykelmetoder, händelsehanterare och annan logik. Du får lära dig mer om att redigera komponenter i avsnittet Skapa återanvändbara gränssnittskomponenter Blazor .

Filerna _Imports.razor är inte Razor-komponentfiler. I stället definierar de en uppsättning Razor-direktiv som ska importeras till andra .razor-filer i samma mapp och i dess undermappar. En _Imports.razor-fil är till exempel ett konventionellt sätt att lägga till using direktiv för vanliga namnområden:

@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

Sidor

Var finns sidorna i apparna Blazor ? Blazordefinierar inte ett separat filnamnstillägg för adresserbara sidor, till exempel .aspx filer i ASP.NET Web Forms-appar. I stället definieras sidor genom att vägar tilldelas till komponenter. En väg tilldelas vanligtvis med hjälp av @page Razor-direktivet. Komponenten Counter som har skapats i filen Pages/Counter.razor definierar till exempel följande väg:

@page "/counter"

Routning i Blazor hanteras på klientsidan, inte på servern. När användaren navigerar i webbläsaren Blazor fångar navigeringen upp och återger sedan komponenten med matchande väg.

Komponentvägarna härleds för närvarande inte av komponentens filplats som de är med .aspx sidor eller ASP.NET Core Razor Pages. Den här funktionen kan läggas till i framtiden. Varje väg måste anges uttryckligen för komponenten. Att lagra dirigerbara komponenter i en pages-mapp har ingen särskild betydelse och är bara en konvention.

Du får lära dig mer om routning i Blazoravsnittet Sidor, routning och layouter .

Layout

I ASP.NET Web Forms-appar hanteras en vanlig sidlayout med hjälp av huvudsidor (Site.Master). I Blazor appar hanteras sidlayouten med hjälp av layoutkomponenter (Shared/MainLayout.razor). Layoutkomponenter beskrivs mer detaljerat i avsnittet Sida, routning och layout.

Bootstrap Blazor

För att bootstrap Blazormåste appen:

Ange var rotkomponenten (App.Razor) ska återges på sidan.
Lägg till motsvarande Blazor ramverksskript.

I serverappen Blazor definieras rotkomponentens värdsida i filen _Host.cshtml . Den här filen definierar en Razor-sida, inte en komponent. Razor Pages använder Razor-syntax för att definiera en serveradresserbar sida, ungefär som en .aspx sida.

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

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

Attributet render-mode används för att definiera var en komponent på rotnivå ska återges. Alternativet RenderMode anger hur komponenten ska återges. I följande tabell beskrivs de alternativ som stöds RenderMode .

Alternativ	Description
`RenderMode.Server`	Återges interaktivt när en anslutning till webbläsaren har upprättats
`RenderMode.ServerPrerendered`	Först före och återges sedan interaktivt
`RenderMode.Static`	Renderat som statiskt innehåll

Filen _Layout.cshtml innehåller standard-HTML för appen och dess komponenter.

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

Skriptreferensen till _framework/blazor.server.js upprättar realtidsanslutningen till servern och hanterar sedan alla användarinteraktioner och användargränssnittsuppdateringar.

Blazor WebAssembly I appen är värdsidan en enkel statisk HTML-fil under wwwroot/index.html. Elementet <div> med ID:t med namnet app används för att ange var rotkomponenten ska renderas.

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

Rotkomponenten som ska återges anges i appens Program.cs-fil med flexibiliteten att registrera tjänster via beroendeinmatning. Mer information finns i ASP.NET Core-beroendeinmatningBlazor.

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

Skapa utdata

När ett Blazor projekt skapas kompileras alla Razor-komponenter och kodfiler till en enda sammansättning. Till skillnad från ASP.NET Web Forms-projekt stöder Blazor inte körningskompilering av användargränssnittslogik.

Kör appen med snabb inläsning

Om du vill köra serverappen Blazor trycker du på F5 i Visual Studio för att köra med felsökningsprogrammet kopplat, eller Ctrl + F5 för att köra utan att felsökaren är ansluten.

Om du vill köra BlazorWebAssembly appen väljer du någon av följande metoder:

Kör klientprojektet direkt med hjälp av utvecklingsservern.
Kör serverprojektet när du är värd för appen med ASP.NET Core.

Blazor WebAssembly appar kan debuggas i både webbläsare och Visual Studio. Mer information finns i Felsöka ASP.NET CoreBlazorWebAssembly.

Både Blazor Server och BlazorWebAssembly appar har stöd för snabb inläsning i Visual Studio. Hot Reload är en funktion som automatiskt uppdaterar ändringar som görs i en Blazor app live i webbläsaren. Du kan växla om frekvent återläsning är aktiverat från ikonen i verktygsfältet:

Visual Studio 2022: Snabb inläsning av menyalternativ och ikon.

Om du väljer caret bredvid ikonen visas ytterligare alternativ. Du kan aktivera eller inaktivera frekvent återinläsning, starta om programmet och växla om frekvent inläsning ska ske när en fil sparas.

Visual Studio 2022: Snabb inläsning av menyalternativ med utökade alternativ.

Du kan också komma åt ytterligare konfigurationsalternativ. I konfigurationsdialogrutan kan du ange om frekvent inläsning ska aktiveras vid felsökning (tillsammans med Redigera och Fortsätt), när du startar utan felsökning eller när en fil sparas.

Visual Studio 2022: Snabb inläsning av konfigurationsalternativ från dialogrutan Verktygsalternativ >> som felsöker > .NET/C++ Snabb inläsning.

"Utvecklarens inre loop" har effektiviserats avsevärt med frekvent omlastning. Utan frekvent omläsning skulle en Blazor utvecklare vanligtvis behöva starta om och köra appen igen efter varje ändring och navigera till lämplig del av appen efter behov. Med frekvent ny inläsning kan ändringar göras i appen som körs utan att behöva startas om i de flesta fall. Frekvent omläsning behåller till och med sidornas tillstånd, så du behöver inte behöva ange formulärvärden igen eller på annat sätt få tillbaka appen där du behöver den.

Föregående Nästa

Dela via