Hoe Blazor werkt

Blazor biedt veel functies om snel aan de slag te gaan en uw volgende webappproject snel op te leveren. Laten we eens kijken naar de belangrijkste mogelijkheden van Blazor om te bepalen of u Blazor moet gebruiken voor uw volgende geweldige web-app.

Blazor-componenten

Blazor-apps zijn gebouwd op basis van componenten. Een Blazor-onderdeel is een herbruikbaar stukje webgebruikersinterface. Een Blazor-component bevat zowel de rendering- als UI-gebeurtenisafhandelingslogica. Blazor bevat verschillende ingebouwde onderdelen voor het verwerken van formulieren, validatie van gebruikersinvoer, het weergeven van grote gegevenssets, authenticatie en autorisatie. Ontwikkelaars kunnen ook hun eigen aangepaste onderdelen bouwen en delen, en veel vooraf samengestelde Blazor-onderdelen zijn beschikbaar vanuit het Blazor-ecosysteem.

Standaardwebtechnologieën gebruiken

U schrijft Blazor-onderdelen met behulp van Razor-syntaxis, een handige combinatie van HTML, CSS en C#. Een Razor-bestand bevat gewone HTML en vervolgens C# om renderinglogica te definiëren, zoals voor conditionele instructies, controlestroom en expressie-evaluatie. Razor-bestanden worden vervolgens gecompileerd in C#-klassen die de renderinglogica van het onderdeel inkapselen. Omdat Blazor-componenten die zijn geschreven in Razor slechts C#-klassen zijn, kunt u willekeurige .NET-code aanroepen vanuit uw componenten.

Afhandeling van UI-gebeurtenissen en gegevensbinding

Interactieve Blazor-componenten kunnen standaard web-UI-interacties verwerken met behulp van C#-gebeurtenis-handlers. Onderdelen kunnen hun status bijwerken als reactie op ui-gebeurtenissen en hun rendering dienovereenkomstig aanpassen. Blazor biedt ook ondersteuning voor tweerichtingsgegevensbinding met UI-elementen als een manier om de componentstatus gesynchroniseerd te houden met UI-elementen.

Het volgende voorbeeld is een eenvoudig Blazor-telleronderdeel dat is geïmplementeerd in Razor. De meeste inhoud is HTML, terwijl het @code blok C# bevat. Telkens wanneer op de knop wordt gedrukt, wordt de IncrementCount C#-methode aangeroepen, waardoor het currentCount veld wordt verhoogd, waarna het onderdeel de bijgewerkte waarde weergeeft:

<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 aan server- en clientzijde

Blazor ondersteunt zowel server- als client-side rendering van componenten voor het verwerken van verschillende web-UI-architecturen. Onderdelen die op de server worden gerenderd, hebben toegang tot serverbronnen, zoals databases en back-endservices. Blazor-onderdelen worden standaard statisch van de server gerenderd, waardoor HTML wordt gegenereerd als reactie op aanvragen.

U kunt serveronderdelen ook zo configureren dat ze interactief zijn, zodat ze willekeurige UI-gebeurtenissen kunnen verwerken, de status tussen interacties kunnen onderhouden en updates dynamisch kunnen weergeven. Interactieve serveronderdelen verwerken UI-interacties en updates via een WebSocket-verbinding met de browser.

Blazor-onderdelen kunnen ook interactief worden weergegeven vanaf de client. Het onderdeel wordt gedownload naar de client en uitgevoerd vanuit de browser via WebAssembly. Interactieve WebAssembly-onderdelen hebben toegang tot clientbronnen via het webplatform, zoals lokale opslag en hardware, en kunnen zelfs offline werken zodra ze zijn gedownload.

U kunt ervoor kiezen om verschillende onderdelen op de server of de client in dezelfde app weer te geven. Veel van de pagina's in uw app vereisen mogelijk helemaal geen interactiviteit en kunnen statisch worden weergegeven vanaf de server. Terwijl andere interactievere onderdelen van uw app kunnen worden verwerkt vanaf de server of client. U kunt bepalen welke rendermodus van de component tijdens het ontwerp of de runtime moet worden gebruikt. Met Blazor hebt u de flexibiliteit om de architectuur van de web-app te bouwen die geschikt is voor uw scenario.

Blazor gebruiken om een pizzawinkel te bouwen

De gebruikersinterface van de pizzawinkel-app is onderverdeeld in veel herbruikbare onderdelen: een pagina-indeling met een navigatiebalk, afzonderlijke pagina's, een pizzacatalogus en editor, een orderonderdeel, enzovoort. Blazor biedt ingebouwde ondersteuning voor veel van deze onderdelen, zoals onderdelen voor formulieren en validatie. Veel van de pagina's in de app kunnen door de server worden afgehandeld met behulp van statische server-side rendering, zodat de site voornamelijk stateless is en klaar is om te schalen. Wanneer er meer interactiviteit nodig is, worden de onderdelen interactief gemaakt door een interactieve rendermodus toe te passen. Om de server te ontlasten, worden interactieve onderdelen op de client weergegeven via WebAssembly. Door de hele app te bouwen met één webontwikkelingsstack, wordt de app snel opgebouwd en binnenkort stromen de pizzaorders binnen.