Blazor

Blazor

JavaScript is sinds jaar en dag de taal om webpagina’s interactief te maken. Desalniettemin kwamen vanuit de developer community veel geluiden waaruit bleek dat men niet zo gelukkig was met JavaScript. Ook was er de wens dat men eigenlijk maar één programmeertaal wenst te gebruiken voor het bouwen van een web applicatie. Bijvoorbeeld voor alles C# en niet C# voor het server-gedeelte van de web applicatie en JavaScript voor het client-gedeelte van de web applicatie.

Blazor vervult die wensen daar je in Blazor ook C# kunt gebruiken voor datgene dat voorheen alleen maar voorbehouden was aan JavaScript. Het gebruik van JavaScript kun je daardoor tot een minimum beperken.

Microsoft begon in 2017 met Blazor als zijnde een experimenteel framework waarmee web applicaties gemaakt kunnen worden. Het experiment werd goed ontvangen door de developer community en Blazor werd in 2019 een ‘officieel’ product. Zo is Blazor Server sinds september 2019 onderdeel van de .NET releases. Blazor Web Assembly volgde een paar maanden later en is sinds mei 2020 onderdeel van de .NET releases.

Wil je weten wat Blazor is? Lees dan mijn blog artikelen over Blazor. Klik op een titel om meer te lezen.

Blazor artikelen

Wat is Blazor?

Blazor Web Assembly:

Blazor Component Libraries:

Blazor – in detail:

Git en GitHub:

Onlangs gepubliceerd

  • Razor en Blazor
    Allerlei termen vliegen in het rond zodra je je in Blazor gaat verdiepen. In deze post zal ik het hebben over Blazor en Razor. Twee termen die regelmatig door elkaar gehaald worden en voor veel verwarring zorgen. Meer lezen? Klik op het plaatje of op de titel…
  • Blazor Server en Blazor Web Assembly
    In deze post zal ik het hebben over Blazor Server en Blazor Web Assembly. Blazor Web Assembly en Blazor Server zijn twee varianten van Blazor, maar waarin verschillen die twee varianten van elkaar? Ik hoop dat dat je duidelijk is geworden na het lezen van deze post. Meer lezen? Klik op het plaatje of op de titel…
  • De Host en Blazor
    In ASP .NET Core wordt een “host” geactiveerd bij het opstarten van een applicatie. De host zet net zoals het stokstaartje in de uitgelichte afbeelding dingen klaar die nodig zijn voor het doen draaien van de applicatie (in het geval van het stokstaartje wordt een bos wortels klaargezet voor de giraffe zodat de giraffe daarmee zijn dingen kan doen). In deze post zullen we de host nader bekijken. Meer lezen? Klik op het plaatje of op de titel…
  • Blazor WebAssembly App
    Een Blazor applicatie bestaat uit veel meer dan alleen maar een host. Zo zijn er naast de host ook componenten, modeldefinities, interfaces en klassen en een component bestaat op haar beurt ook weer uit drie onderdelen. We lichten in deze post het één en ander toe aan de hand van een ASP .NET Core hosted Blazor WebAssembly App. Meer lezen? Klik op het plaatje of op de titel…
  • Bootstrap en Blazor
    Hoe goed de programmatuur “onder de motorkap” ook mag zijn, mensen zullen snel afknappen op applicaties met een slechte user interface. Gelukkig zijn er veel tools voor de opmaak van je website en zo wordt binnen Blazor gebruik gemaakt van Bootstrap. In deze post gaan we bekijken hoe we Cascading Style Sheets (CSS) en Bootstrap kunnen activeren en wat de gevolgen daarvan zijn. We gaan verder de menubalk aanpassen die standaard in de Visual Studio Blazor project template zit waarbij net als in het origineel gebruik wordt gemaakt van Bootstrap componenten. Meer lezen? Klik op het plaatje of op de titel…
  • Binding in Blazor
    In Blazor zijn functionaliteiten gedefinieerd als componenten en zo zijn er componenten die een gebruikersscherm hebben en waarnaar genavigeerd kan worden vanuit een menubalk. We hebben ook subcomponenten die deel uitmaken van een hoofdcomponent. Subcomponenten en hoofdcomponenten zijn met elkaar verbonden (binding) waarbij er twee vormen van binding zijn (One-way binding en Two-way binding). In deze post zullen we deze beide vormen van binding nader bekijken. Meer lezen? Klik op het plaatje of op de titel…
  • De EditForm en Blazor
    Een formulier is een middel waarmee gestructureerd informatie vastgelegd kan worden. Formulieren zijn van alle tijden en in het digitale tijdperk bestaan inmiddels ook elektronische varianten van een formulier. In deze post gaan we in op de EditForm en hoe de ingevoerde gegevens in de form gevalideerd kunnen worden voordat ze verwerkt worden door de web API. Meer lezen? Klik op het plaatje of op de titel…
  • Publish & Deploy een Blazor web applicatie
    Je web applicatie zal je uiteindelijk moeten publiceren zodat de gebruikers bij je web applicatie kunnen komen via het internet met een webbrowser. Je web applicatie zal op een web server moeten komen, zijnde een computer dat aangesloten is op het internet. In deze post gaan we in op het “deployen” van een Blazor web applicatie naar een web server. Meer lezen? Klik op het plaatje of op de titel…
  • Meer lezen over Blazor
    Op mijn Blog vind je een aantal postings over Blazor. Ik hoop dat de posts voor jou van nut zijn geweest en dat het je heeft geholpen in het doorgronden van Blazor. In deze post een aantal links waar ik zelf veel aan heb gehad en die ik je zeker niet wil onthouden. Meer lezen? Klik op het plaatje of op de titel…
  • MVVM en Blazor
    Design patterns zijn sjablonen / raamwerken die gebruikt kunnen worden bij het ontwikkelen van software. De MVVM (Model View ViewModel) design pattern is binnen Blazor erg populair en in deze post laten we zien hoe we een Blazor applicatie kunnen bouwen conform de MVVM design pattern. Meer lezen? Klik op het plaatje of op de titel…
  • Application State Services in Blazor
    In deze post zullen we een techniek demonstreren dat communicatie tussen Blazor componenten mogelijk maakt en dat een component laat reageren op een event van een andere component. Met deze techniek wordt een (beperkte) vorm van Application State bereikt waarbij de Application State is opgetuigd als een service. Het één en ander zullen we illustreren met een component dat staat voor een (vreemde) Inlichtingendienst en een component dat staat voor een medewerker van een bedrijf die gerecruteerd is als inlichtingenofficier voor die Inlichtingendienst. Meer lezen? Klik op het plaatje of op de titel…
  • Web API Server Controllers
    Web APIs spelen een belangrijke rol in een web applicatie, maar wat zijn het? API staat voor “Application Programming Interface” en in deze post gaan we in op wat APIs zijn, hoe je ze bouwt en hoe een Blazor web applicatie gebruik kan maken van een Web API. Meer lezen? Klik op het plaatje of op de titel…
  • Blazor CRUD
    De meeste web applicaties volgen meestal een REST architectuurstijl waarbij vanuit een client een web API server controller wordt aangeroepen. De Web API server controller voert dan op verzoek van de client diverse CRUD (Create/Read/Update/Delete)-acties uit op een gegevensbron. In deze post zullen we ingaan op de CRUD action methods waarbij we het één en ander niet alleen vanuit een Blazor Web Assembly client bekijken, maar ook vanuit de browser en een tool als Postman want die kunnen ook clients zijn. Meer lezen? Klik op het plaatje of op de titel…
  • Cookie authentication in Blazor
    Je website gaat ‘live’ en iedereen met een internetverbinding kan nu kennis nemen van je website. Maar wat als je dat niet wil? Stel dat bepaalde delen van je website een content hebben dat niet iedereen mag zien? Cookie Authentication kan dan een oplossing zijn. We zullen het één en ander toelichten aan de hand van een fictieve sportschool die een website heeft. Meer lezen? Klik op het plaatje of op de titel…
  • JWT authentication in Blazor
    JWT Web Tokens (Json Web Tokens) hebben omstreeks 2010 hun intrede gedaan en ze zijn inmiddels een internet standaard geworden (RFC 7519). Met JWT Web Tokens kan ook het één en ander bewerkstelligd worden m.b.t. de autorisatie en de authenticatie. We zullen het één en ander toelichten aan de hand van een fictieve sportschool die een website heeft. Meer lezen? Klik op het plaatje of op de titel…
  • Blazor CRUD minimal API
    In deze post maken we een minimal API server-solution en een WASM (WebAssembly) client-solution. Daarbij maken we gebruik van een aantal .Net 6 / C# 10-features. Zo worden op de server de CRUD-acties door Minimal APIs gedaan en houden we de C# 10 default aan m.b.t. de nullable references waarbij we in de code diverse controles opnemen om het optreden van Null Reference Exceptions zoveel mogelijk tegen te gaan. Ook besteden we aandacht aan de te nemen CORS (Cross Origin Resource Sharing)-voorzieningen zodat de server solution verzoeken van clients van andere domeinen gaat uitvoeren. Meer lezen? Klik op het plaatje of op de titel…
  • Blazor Component Libraries
    We hadden een web applicatie met CRUD-mogelijkheden gebouwd in de Blazor Crud minimal API post waarbij de gegevens op een vrij statische manier gepresenteerd werden. Je zal uiteindelijk aandacht moeten besteden aan de User interface als je gebruikers wat meer willen m.b.t. het gepresenteerde en je zal uiteindelijk uitkomen bij een Blazor Component library. Dit is een eerste van een aantal posts dat we aan dit onderwerp gaan besteden. Meer lezen? Klik op het plaatje of op de titel…
  • MudBlazor installatie
    Microsoft heeft zelf (nog) geen Blazor Component Library en third-party-software zal gebruikt moeten worden. In deze post zullen we het het één en ander toelichten aan de hand van de component library van MudBlazor. We gaan in deze post uit van een situatie waarin je al een bestaand project hebt en we gaan in op de stappen die je moet nemen voor het doen activeren van de MudBlazor Blazor Component library. Meer lezen? Klik op het plaatje of op de titel…
  • MudBlazor DataGrid Component
    In deze post gaan we in op de Data Grid component van MudBlazor. Op de website van MudBlazor zijn veel voorbeelden te vinden en daarbij wordt (net zoals bij zoveel andere partijen) uitgegaan van een geavanceerd voorbeeld waardoor je tussen de vele feature-bomen het bos niet meer ziet. We activeren in deze post stap voor stap de diverse features van MudBlazor’s Data Grid component en we bekijken wat elke feature met de user interface doet. Meer lezen? Klik op het plaatje of op de titel…
  • Radzen installatie
    Microsoft heeft zelf (nog) geen Blazor Component Library en third-party-software zal gebruikt moeten worden. In deze post zullen we het het één en ander toelichten aan de hand van de component library van Radzen. We gaan in deze post uit van een situatie waarin je al een bestaand project hebt en we gaan in op de stappen die je moet nemen voor het doen activeren van de Radzen Blazor Component library. Meer lezen? Klik op het plaatje of op de titel…
  • Radzen DataGrid Component
    In deze post gaan we in op de Data Grid component van Radzen. Op de website van Radzen zijn veel voorbeelden te vinden en daarbij wordt (net zoals bij zoveel andere partijen) uitgegaan van een geavanceerd voorbeeld waardoor je tussen de vele feature-bomen het bos niet meer ziet. We activeren in deze post stap voor stap de diverse features van Radzen’s Data Grid component en we bekijken wat elke feature met de user interface doet. Meer lezen? Klik op het plaatje of op de titel…
  • QuickGrid DataGrid Component
    In deze post gaan we in op QuickGrid. Een Data Grid component dat door de ontwikkelaars van Blazor is gebouwd. Microsoft heeft geen eigen Blazor Component Library, maar de Microsoft ontwikkelaars van Blazor hebben dealniettemin toch een eigen datagrid component ontwikkeld (QuickGrid) om te kunnen voorzien in de “common needs” van de Blazor developers. We activeren in deze post stap voor stap de diverse features van QuickGrid en we bekijken wat elke feature met de user interface doet. Meer lezen? Klik op het plaatje of op de titel…
  • Git en GitHub
    Versiebeheer en het doen opslaan van je broncode in een repository in de cloud? Ik loop er regelmatig tegenaan (zowel werk als privé) waarbij ik af en toe het spoor bijster ben en daarom deze post om het één en ander op een rij te zetten. We gebruiken in deze post Git als lokaal versiebeheersysteem waarbij we voor het doen opslaan van de repositories in de cloud gebruik maken van GitHub en we voor de diverse Git-commando’s gebruik maken van de Git Bash command line interface. Meer lezen? Klik op het plaatje of op de titel…
  • Git en GitHub (2)
    Deze post is een vervolg op de Git en GitHub-post waarin we het hebben gehad over Git, GitHub en het doen vullen van een GitHub remote repository. In deze post gaan we in op het .gitignore-bestand, de local Git repository en de remote GitHub repository, branches en pull requests. We illustreren het één en ander aan de hand van een index.html waarin we een tekst veranderen. Meer lezen? Klik op het plaatje of op de titel…
  • Git en GitHub – Merge Conflicts
    Een versiebeheersysteem biedt mogelijkheden voor het laten werken van meerdere mensen aan eenzelfde project. De situatie kan zich echter voordoen dat je bezig bent met een bestand en tegelijkertijd met jou iemand anders ook met het bestand bezig is geweest. Versiebeheersystemen zoals Git en GitHub weten dan niet meer wiens wijzigingen overgenomen moeten worden met een merge conflict als resultaat. In deze post zullen we het nader hebben over merge conflicts, wanneer ze precies optreden en hoe ze op te lossen. Meer lezen? Klik op het plaatje of op de titel…
  • Git en GitHub – terughalen vorige versie
    Het doel van een versiebeheersysteem (VCS = Version Control System) is dat we bestanden kunnen volgen zodat we weten of de bestanden zijn gewijzigd en wat er aan de bestanden is gewijzigd en wanneer. Een versiebeheersysteem verliest echter snel aan bestaansrecht als de VCS niet gebruikt kan worden voor het doen terughalen van een vorige versie. In deze post zullen we ingaan op het terughalen van een vorige versie waarbij alles op zowel de lokale PC als de remote repository staat via pull requests en de commit historie intact moet blijven en alle oude versies bewaard moeten blijven in de repositories. Meer lezen? Klik op het plaatje of op de titel…
  • Git en GitHub – terughalen vorige versie (2)
    In deze post zullen we nader ingaan op de “private” aanpassingen die betrekking hebben op situaties waarin je remote repository private is en een afspiegeling van je lokale PC mag wezen, en situaties waarbij je nog niks hebt gepushed naar de remote repository en alles nog lokaal staat en je dingen wil corrigeren alvorens je de daadwerkelijke push doet naar de remote repository. Voor de “private” situaties kan gebruik gemaakt worden van de git restore en de git reset welke we in deze post nader zullen bekijken. Meer lezen? Klik op het plaatje of op de titel…
  • SourceTree
    Met de Git Bash CLI kunnen Git commando’s ingegeven worden waarmee je het één en ander voor elkaar krijgt m.b.t. je lokale Git repository en je remote repository. Veel gebruikers hebben toch liever een GUI (Graphical User Interface) omdat die wat gebruikersvriendelijker is en je niet hoeft te weten wat de te gebruiken (Git) commando’s zijn. In deze post gaan we SourceTree bekijken, een Git GUI tool van Atlassian. Meer lezen? Klik op het plaatje of op de titel…
  • Blazor Render modes
    Microsoft heeft op 14 november 2023 .Net Core 8 uitgebracht. In deze .Net-versie hebben ze ook Blazor onder handen genomen. Verschillende render modes kunnen vanaf nu gebruikt worden in een Blazor-project. In deze post gaan we in op wat het ‘renderen’ ook alweer was en wat m.b.t het ‘renderen’ binnen Blazor mogelijk is. Meer lezen? Klik op het plaatje of op de titel…
  • Blazor Prerendering
    Voor een web applicatie komt het erop neer dat via de browser een web server voor jou aan de slag gaat. Alles wordt inclusief de gewenste gegevens door de web server “gerendered” naar HTML en vervolgens naar de browser gestuurd. Er kan naast het renderen ook “geprerendered” worden waarbij de web server alvast dingen naar de client prerendert. Daar achteraan komt het uiteindelijke “renderen”. Bijvoorbeeld omdat gegevens uit een Web API nog niet meteen beschikbaar zijn. In deze post gaan we in op wat prerenderen is en waarom men dat wil en hoe je het uit kunt zetten. Meer lezen? Klik op het plaatje of op de titel…