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.

 

Blazor Prerequisites:

You will need the following things before you start to work with Blazor:

  1. Install the .NET Core 2.1 Preview 1 SDK
  2. Install the latest preview of Visual Studio 2017 (15.7). Make sure to have ASP.NET & Web development workload
  3. 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:

Dashboard:

Dashboard

Searching Hero:

HeroSearch

Hero Listing & Adding Hero:

HeroListing

Hero Details:

HeroDetails

Source Code:

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.