Så här fungerar Blazor

Blazor innehåller många funktioner som hjälper dig att komma igång och leverera ditt nästa webbappsprojekt snabbt. Låt oss ta en titt på Blazors kärnfunktioner för att avgöra om du ska använda Blazor för din nästa fantastiska webbapp.

Blazor-komponenter

Blazor-appar är uppbyggda av komponenter. En Blazor-komponent är en återanvändbar del av webbgränssnittet. En Blazor-komponent kapslar in både sin renderings- och UI-händelsehanteringslogik. Blazor innehåller olika inbyggda komponenter för formulärhantering, validering av användarindata, visning av stora datamängder, autentisering och auktorisering. Utvecklare kan också skapa och dela sina egna anpassade komponenter, och många fördefinierade Blazor-komponenter är tillgängliga från Blazor-ekosystemet.

Använd standardwebbtekniker

Du skapar Blazor-komponenter med Razor-syntax, en bekväm blandning av HTML, CSS och C#. En Razor-fil innehåller vanlig HTML och sedan C# för att definiera eventuell renderingslogik, till exempel för villkor, kontrollflöde och uttrycksutvärdering. Razor-filer kompileras sedan till C#-klasser som kapslar in komponentens renderingslogik. Eftersom Blazor-komponenter som skapats i Razor bara är C#-klasser kan du anropa godtycklig .NET-kod från dina komponenter.

UI-händelsehantering och databindning

Interaktiva Blazor-komponenter kan hantera standardinteraktioner i webbgränssnittet med hjälp av C#-händelsehanterare. Komponenter kan uppdatera sitt tillstånd som svar på användargränssnittshändelser och justera återgivningen i enlighet med detta. Blazor innehåller även stöd för dubbelriktad databindning till gränssnittselement som ett sätt att hålla komponenttillståndet synkroniserat med användargränssnittselement.

Följande exempel är en enkel Blazor-räknarkomponent som implementeras i Razor. Det mesta av innehållet är HTML, medan @code blocket innehåller C#. Varje gång knappen trycks ned anropas IncrementCount C#-metoden, vilket inkrementerar currentCount-fältet, och sedan återger komponenten det uppdaterade värdet:

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Rendering på server- och klientsidan

Blazor stöder både rendering på serversidan och på klientsidan av komponenter för att hantera olika webbgränssnittsarkitekturer. Komponenter som återges från servern kan komma åt serverresurser, till exempel databaser och backend-tjänster. Som standard återges Blazor-komponenter statiskt från servern, vilket genererar HTML som svar på begäranden.

Du kan också konfigurera serverkomponenter så att de kan vara interaktiva, hantera godtyckliga användargränssnittshändelser, underhålla tillstånd mellan interaktioner och återge uppdateringar dynamiskt. Interaktiva serverkomponenter hanterar gränssnittsinteraktioner och uppdateringar via en WebSocket-anslutning till webbläsaren.

Alternativt kan Blazor-komponenter återges interaktivt från klienten. Komponenten laddas ned till klienten och körs från webbläsaren via WebAssembly. Interaktiva WebAssembly-komponenter kan komma åt klientresurser via webbplattformen, till exempel lokal lagring och maskinvara, och kan till och med fungera offline när de har laddats ned.

Du kan välja att rendera olika komponenter från servern eller klienten i samma app. Många av sidorna i din app kanske inte kräver någon interaktivitet alls och kan renderas statiskt från servern. Medan andra mer interaktiva delar av appen kan hanteras från servern eller klienten. Du kan bestämma vilket komponentåtergivningsläge som ska användas vid designtid eller körning. Med Blazor har du flexibiliteten att skapa den webbappsarkitektur som passar ditt scenario.

Bygga en pizzabutik med Blazor

Användargränssnittet för pizzabutiksappen delas upp i många återanvändbara komponenter: en sidlayout med en navigeringsfält, enskilda sidor, en pizzakatalog och redigerare, en beställningskomponent och så vidare. Blazor har inbyggt stöd för många av dessa komponenter, till exempel komponenter för formulär och validering. Många av sidorna i appen kan hanteras från servern med statisk rendering på serversidan så att webbplatsen mestadels är tillståndslös och redo att skalas. När mer interaktivitet behövs blir komponenterna interaktiva genom att använda ett interaktivt renderingsläge. Om du vill avlasta arbetet från servern återges interaktiva komponenter på klienten via WebAssembly. Genom att skapa hela appen med en enda webbutvecklingsstack blir appen snabbt färdig och snart flödar pizzabeställningarna in.