Hoe Blazor werkt

Blazor biedt veel functies om snel aan de slag te gaan en uw volgende web-app-project 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-onderdelen

Blazor-apps zijn gebouwd op basis van onderdelen. Een Blazor-onderdeel is een herbruikbaar stukje webgebruikersinterface. Een Blazor-onderdeel 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, verificatie 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 ontwerpt Blazor-onderdelen met behulp van Razor-syntaxis, een handig combinatie van HTML, CSS en C#. Een Razor-bestand bevat gewone HTML en vervolgens C# om renderinglogica te definiëren, zoals voor voorwaardelijk, controlestroom en expressie-evaluatie. Razor-bestanden worden vervolgens gecompileerd in C#-klassen die de renderinglogica van het onderdeel inkapselen. Omdat Blazor-onderdelen die zijn geschreven in Razor slechts C#-klassen zijn, kunt u willekeurige .NET-code aanroepen vanuit uw onderdelen.

Verwerking van ui-gebeurtenissen en gegevensbinding

Interactieve Blazor-onderdelen kunnen standaardinteracties van de webgebruikersinterface 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 onderdeelstatus 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 onderdelen voor het verwerken van verschillende web-UI-architecturen. Onderdelen die van de server worden weergegeven, 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 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 van 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. Andere interactievere onderdelen van uw app kunnen worden verwerkt vanaf de server of client. U kunt bepalen welke weergavemodus voor onderdelen 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 worden verwerkt vanaf de server met behulp van statische rendering aan de serverzijde, zodat de site voornamelijk staatloos 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 werk van de server te offloaden, worden interactieve onderdelen op de client weergegeven via WebAssembly. Door de hele app te bouwen met één webontwikkelingsstack, komt de app snel samen en binnenkort stromen de pizzaorders binnen.