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å blazor-kärnfunktionerna för att avgöra om du ska använda Blazor för din nästa fantastiska webbapp.
Blazor-komponenter
Blazor-appar är byggda från 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ända 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 IncrementCount ned anropas C#-metoden, vilket ökar currentCount fältet och komponenten återger 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++;
}
}
Återgivning på server- och klientsidan
Blazor stöder både server- och klientsideåtergivning av komponenter för att hantera olika webbgränssnittsarkitekturer. Komponenter som återges från servern kan komma åt serverresurser, till exempel databaser och serverdelstjä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 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 med 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 återge 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. 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 design eller körning. Med Blazor har du flexibiliteten att skapa den webbappsarkitektur som passar ditt scenario.
Använda Blazor för att bygga en pizzabutik
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 återgivning på serversidan så att platsen mestadels är tillståndslös och redo att skalas. När mer interaktivitet behövs blir komponenterna interaktiva genom att använda ett interaktivt återgivningslä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 samlas appen snabbt och snart flödar pizzabeställningarna in.