I have been playing around with a new experimental project called from ASP.NET team called Blazor. Blazor is a UI framework which is still in its experimental state and is based on C#, Razor and HTML that runs in the browser. Yes you read it right – i did say “Running C# & Razor in browser”. This is made possible by a new web standard called WebAssembly. You can read more about WebAssembly here. In this blog post i want to talk about a small project i put together to showcase what is Blazor is all about. So read on to know what project i have built using Blazor.
What is Blazor?
In order to understand what is Blazor all about – be sure to read the article from Steve Sanderson here. He provides an excellent run down on the technicalities of Blazor. I will assume that you have read this article before proceeding further.
You will need the following things before you start to work with Blazor:
- Install the .NET Core 2.1 Preview 1 SDK
- Install the latest preview of Visual Studio 2017 (15.7). Make sure to have ASP.NET & Web development workload
- Install the ASP.NET Core Blazor Language Services extension from Visual Studio market place.
Introducing Blazor Tour of Heroes:
In order to understand Blazor better, i wanted to write a simple application which can showcase the basics. I work on Angular framework in my day job. And we keep referring to a sample or a reference app called “Tour of Heroes”. Angular team has put together this tutorial and you can check it our here. I thought that it will be a better idea to learn Blazor basics by building Tour of Heroes in Blazor. Tour of Heroes allows you to do the following:
- Dashboard which lists your Top Heroes
- Search functionality to search any Hero
- My Heroes which lists all your Heroes
- Adding a Hero
- Details & Updating of a Hero
- Deleting a Hero
Blazor Tour of Heroes Screenshots:
Hero Listing & Adding Hero:
The source code of Blazor Tour of Heroes is open sourced and available at my github repo. You can find the github repo here – https://github.com/lohithgn/blazor-tour-of-heroes.
Do clone the repo, take a look at the code, run the app and contribute if you want to enhance the code. I had a lot of fun building this repo and i am planning to build more of these small reference apps. Look forward to hearing your feedback/suggestions.
Till next time – Happy Coding. Code with Passion, Decode with Patience.