Blazor
Er zijn veel benaderingen voor het bouwen van web-apps. Voor het bouwen van web-apps die zeer interactief en snel zijn, gebruikt u meestal veel JavaScript.
Een andere benadering is het gebruik van het Blazor-framework van Microsoft, waarmee u C# en .NET kunt gebruiken om al uw problemen met webontwikkeling af te handelen.
Wat is Blazor?
Blazor is een framework voor het bouwen van webpagina's met HTML, CSS en C#. We kunnen de indeling en het ontwerp van de website definiëren met behulp van standaard HTML en CSS. De interactieve onderdelen van de webpagina's kunnen vervolgens worden beheerd met C#-code die wordt uitgevoerd op een server of in de browser met behulp van een webstandaardtechnologie met de naam WebAssembly. Met Blazor kunnen we onze webpagina's en onderdelen definiëren met behulp van Razor-syntaxis, een handig combinatie van HTML en C#. U kunt Blazor-onderdelen eenvoudig opnieuw gebruiken binnen andere pagina's en onderdelen. Deze mogelijkheid betekent dat we eenvoudig delen van onze app kunnen bouwen en hergebruiken.
Wat is WebAssembly?
WebAssembly is een standaardtechnologie die beschikbaar is in elke moderne browser waarmee code in een browser kan worden uitgevoerd, vergelijkbaar met JavaScript. We kunnen hulpprogramma's gebruiken om onze C#-code voor te bereiden voor gebruik in de browser als een WebAssembly-app. Deze hulpprogramma's zijn opgenomen in de .NET SDK.
Uw app direct bijwerken met Hot Reload
Wanneer u een app ontwikkelt, wilt u ervoor zorgen dat uw ontwikkelaarsstroom snel verloopt, zodat u kunt zien hoe wijzigingen van invloed zijn op uw app. Het kan tijdrovend zijn om een wijziging aan te brengen, op te slaan, alle resources opnieuw te bouwen en de app opnieuw te implementeren in de browser.
U kunt deze werkstroom verbeteren met hot reload. Met Hot Reload kunt u een wijziging toepassen op de actieve app zonder deze opnieuw op te starten.
Blazor-onderdelen
Wanneer u apps maakt met blazor, bestaat uw app uit veel onderdelen, elk met hun eigen verantwoordelijkheidsgebied. Als u onderdelen wilt maken, gebruikt u Razor-bestanden met een extensie .razor. Dus, wat is Razor?
Razor is een programmeersyntaxis die HTML-syntaxis combineert met C#-code. Hier volgt een voorbeeld:
<div>@product.Name</div>
@code {
Product product = new Product{ Name = "Blazor" }
}
In dit voorbeeld wordt @product.Name omgezet in de tekenreeks Blazor, die vervolgens wordt weergegeven in de div tag. De weergegeven uitvoer ziet er als volgt uit:
<div>Blazor</div>
Het bovenste deel van het Razor-voorbeeld bestaat uit HTML-markeringen die door het onderdeel worden weergegeven wanneer het wordt uitgevoerd. U kunt de waarde van C#-expressies weergeven met behulp van het @ teken. Razor blijft C#-code na de @ interpreteren totdat deze een tag identificeert en vervolgens de rendering-HTML hervat. U kunt expliciet zijn over wanneer de C#-expressie begint en eindigt met parens: @(...).
Alles binnen @code {} bevat C#-code voor het definiëren van leden van uw gegenereerde onderdeelklasse. U kunt een Razor-bestand beschouwen als een handige manier om een C#-klasse te definiëren die HTML-renderinglogica definieert. U gebruikt het @code blok om C#-leden te definiëren voor uw onderdeeltype, zoals velden, eigenschappen en methoden.
Een Blazor-onderdeel stylen
Blazor-onderdelen geven HTML weer, zodat u Blazor-onderdelen kunt stylen met behulp van normale CSS-opmaakmodellen. Blazor-onderdelen hebben ook een functie met de naam CSS-isolatie waarmee u stijlregels kunt maken die alleen van toepassing zijn op de inhoud van dat onderdeel. Door een bestand te maken met dezelfde naam als ons onderdeel en de bestandsnaamextensie .css toe te voegen, herkent Blazor deze naamgeving als de stijlen die alleen moeten worden toegepast op HTML-inhoud in het bijbehorende onderdeel.
Blazor-onderdelen kunnen ook inhoud definiëren die moet worden toegevoegd aan de HTML-kop van de pagina met behulp van een speciale HeadContent tag:
<HeadContent>
<style>
...my styles here
</style>
</HeadContent>
Deze style tag en inhoud worden weergegeven in de head tag van de pagina.
Routeerbare onderdelen
Het bestand Home.razor is een onderdeel waarnaar vanuit een webbrowser kan worden genavigeerd. Het bevat HTML, C# en verwijzingen naar andere Blazor-onderdelen. We kunnen dit bestand identificeren als een pagina vanwege de aanwezigheid van de @page "/" instructie op de eerste regel. Deze instructie wijst de '/'-route toe aan het onderdeel en geeft Blazor opdracht om te reageren met de inhoud van dit bestand wanneer de standaardpagina op het adres '/' wordt aangevraagd.