In een vorig blog hebben we Blazor geïntroduceerd, het nieuwe UI framework van Microsoft. Mocht je de blog gemist hebben, neem dan vooral een kijkje om een overzicht te krijgen van Blazor.
In dit blog richten we ons op het bouwen van een webapplicatie met Blazor. Zoals uitgelegd in de vorige blog zijn er twee hosting modellen beschikbaar binnen Blazor, Server-side en client-side. Voor beide hosting modellen is de syntax grotendeels hetzelfde, toch zijn er verschillen te ontdekken. Wij zullen ons eerst richten op het opzetten van zowel een client-side als server-side Blazor applicatie. Vervolgens bespreken we hoe je een Blazor web app kan ontwikkelen op basis van het server-side hosting model.
We kiezen voor het server-side hosting model omdat deze op het moment van schrijven als stabiele versie verwerkt zit in ASP.NET Core 3.0. Het client-side hosting model is nog in ontwikkeling en wordt verwacht in ASP.NET Core 3.1.
Opzetten van een Blazor applicatie
Voor het ontwikkelen van een Blazor applicatie moet minimaal ASP.NET Core 3.01 geïnstalleerd zijn. In deze versie zit standaard het server-side hosting model. Mocht je gebruik willen maken van het client-side hosting model, installeer dan minimaal de preview van ASP.NET Core 3.12 en installeer de Blazor WebAssembly Template door het uitvoeren van onderstaand commando in Visual Studio.
“dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview2.19528.8”
Om de server-side Blazor applicatie aan te maken, kan je gebruik maken van de Visual studio template genaamd Blazor. Deze zit standaard in Visual Studio 16.4 en hoger verwerkt of het volgende commando kan gebruikt worden.
“dotnet new blazorserver <Applicatie_Naam>”
Er zit geen verschil tussen het commando of de Visual Studio template. De volgende bestanden zullen worden aangemaakt:
Zoals te zien is in figuur 1, worden een paar standaard mappen en verschillende bestanden aangemaakt. De meest belangrijke bestanden zijn de .cs en .razor bestanden.
Net als een standaard ASP.NET Core project is er een Program.cs en een Startup.cs. Hierdoor wordt de applicatie gestart en kan de verschillende middleware ingeregeld worden voor het gebruik in de applicatie.
Wat opvalt in de Startup.cs, zijn de twee services, te zien in figuur 2, die geconfigureerd worden.
AddRazorPages zorg ervoor dat we gebruik kunnen maken van de .razor bestanden en syntax in de applicatie. AddServerSideBlazor voegt het server-side hosting model toe aan de applicatie.
Verderop in het Startup.cs bestand vinden we nog een toevoeging voor Blazor. In de Configure stap worden de volgende endpoints gedefinieerd.
Omdat we gebruik maken van het server-side model wordt MapBlazorHub toegevoegd als endpoint. Zoals te lezen is in de vorige blog, maakt het server-side model gebruik van SignalR om onderdelen van de DOM bij te werken. Deze endpoints voegen SignalR ondersteuning toe aan het project, als developer hoef je zelf niet meer na te denken over de implementatie. Dit wordt geregeld door het framework zelf. De MapFallbackToPage refereert naar de root pagina voor je project, deze bevind zich in _Host.cshtml.
Starten met bouwen
Voordat we onze eigen componenten kunnen schrijven, doorlopen we de meest gebruikte elementen van de Blazor syntax. De casus die we gebruiken is: een nieuwe pagina waar we naar toe kunnen navigeren met een knop om een teller te tonen die we incrementeel kunnen ophogen.
Routing
Standaard is er een router component gegenereerd in het App.razor bestand. Wanneer er een .razor bestand met een ‘@page’ directive gecompileerd is, wordt er een ‘RouteAttribute’ gespecificeerd op basis van de routing template. Het routing bestand uit App.razor is te zien in figuur 4, figuur 5 geeft de ‘@page’ directive weer.
Als een pagina niet wordt gevonden, zal de HTML tussen de ‘<NotFound>’ tags zichtbaar worden.
Als we een nieuwe pagina willen definiëren hoeven we alleen de ‘@page’ directive boven aan de .razor pagina te plaatsen. De routing wordt automatisch aangemaakt en de pagina is klaar om naar toe te navigeren. Om te navigeren naar een pagina via de UI maken we gebruik van het NavLink element (figuur 6), door een ‘href’ op te geven kan er naar de betreffende pagina genavigeerd worden.
C# code in je razor bestand
Nu we kunnen navigeren naar de pagina, moeten we een teller implementeren die we incrementeel kunnen ophogen. We kiezen ervoor om dit op te lossen in de pagina zelf, hiervoor zullen we gebruik maken van de ‘@code’ directive. Figuur 7 toont een simpel stukje code dat de waarde van een variabele verhoogt. Om de methode te gebruiken, plaatsen we een knop op de pagina met een ‘@onclick’ event. Deze zal de methode afvuren en de waarde ‘currentCount’ verhogen.
Figuur 8 toont de implementatie van de knop en de verbinding tussen het code block en de UI. De waarde van de gedefinieerde waarde ‘currentCount’ wordt zichtbaar gemaakt op de pagina door deze met de ‘@<variableName>’ syntax op de pagina te plaatsen.
In de componenten is de standaard razor syntax van toepassing. Indien je al bekend bent met razor zal dit de leercurve van Blazor verlagen. Nog een bijkomend voordeel is dat bestaande razor pagina’s compatible zijn met Blazor, dit kan helpen bij bijvoorbeeld een moderniseringstraject of het hergebruiken van razor pagina’s uit een bestaande MVC applicatie.
Gebruik van services
In de razor pagina’s is het mogelijk om een C# service te gebruiken voor het ophalen van Data.
Hiervoor kunnen we een service in C# schrijven, deze service zal een standaard set aan gegevens retourneren. De service is te zien in figuur 9, een lijst van weersvoorspellingen wordt geretourneerd.
Om van de service gebruik te kunnen maken in de razor pagina moet de map waar de service instaat, als ‘using’ toegevoegd worden aan de pagina. Voordat we de service kunnen aanroepen, moet deze geïnjecteerd worden in de pagina. Figuur 10 toont hoe we dit aan de pagina kunnen toevoegen.
Nu we beschikking hebben over de service in de razor pagina, kunnen we een ‘@code’ directive maken waarin we de service aanroepen en een publieke variabele aanmaken die we in de razor pagina kunnen gebruiken. Figuur 11 toont hoe we de service aanroepen en de waarde in een publieke variabele zetten. Een WeatherForecast klasse wordt gebruikt als voorbeeld, de variabelen van deze klasse worden gebruikt in figuur 12.
Nu we de data vanuit de service in de razor pagina beschikbaar hebben, kunnen we de data tonen op de pagina. We gebruiken een ‘@foreach’ om door de data te itereren en de waardes in een tabel te plaatsen. Figuur 12 laat zien hoe we de data beschikbaar maken op de pagina.
Tot slot
We hebben enkele standaard onderdelen van een server-side Blazor website behandeld, er is nog veel meer te lezen via de documentatie van Microsoft3. Het server-side model van Blazor is productie klaar en goed te gebruiken binnen je organisatie. Het project is al opgenomen in de definitieve versie van ASP.NET Core en is eenvoudig om te zetten naar het client-side model.
Mitchel Hulst, Software ontwikkelaar
Bronnen en verwijzingen:
1: https://dotnet.microsoft.com/download/dotnet-core/3.0
2: https://dotnet.microsoft.com/download/dotnet-core/3.1
3: https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-3.0
