Discovering Blazor: a small dice rolling page

Let’s “reinterpret” the Blazor example app to develop a small “rolling dice” web app

Blazor is a framework from Microsoft, allowing to build interactive web applications using C#.

When you develop a web application with Blazor, code can run on the server or totally on the client. In the first case, the client and the server communicate using SignalIR, a real-time messaging framework (and only the changing parts of the page are “rebuilt”); in the latter, the c# and dot.net code are compiled to WebAssembly and everything is downloaded (and executed) in the browser.

Let’s start with the sample application: if you don’t have the Web Development Workload, install it and then fire up Visual Studio and create a new project.

Choose “Blazor app”:

Choose a name and a location for your app:

And “Blazor WebAssembly App”:

If you want to test PWA, you can check “Progressive Web Application”. Doing so, index.html will be enriched with a service worker.

Running the application, a browser windows will popup and you will see the following demo page:

The code for the app is quite straightforward, so it’s easy to inspect it to understand where all the components are:

  • in App.razor you can find the entry page for the app: the MainLayout is inflated there and its content is in MainLayout.razor.
  • MainLayout.razor contains the navbar that you can see on the left on the page and the page content.
  • NavMenu.razor specifies the items of the menu on the left.

To add a “dice roller” page, you can develop a class to model the dice (“Dice.cs”), with the following content:

using System;
namespace DiceBlazorApp
{
public class Dice
{
private Random rand = new Random();
public int RollDice()
{
int currentRoll = rand.Next(1,7);
return currentRoll;
}
}
}

You can add a class by choosing “Add”->”Class” in the project name contextual menu:

This class has a method, “RollDice()”, which basically uses Random to generate a random number between 1 and 7.

Now, to use this class, you have to use it in a page so just create a new “DiceRoller.razor” page file with the following content:

@page "/dice"<h3>DiceRoller</h3><p>@currentRoll</p><button class="btn btn-primary" @onclick="RollDice">Roll the dice!</button>@code {
private int currentRoll = 0;
Dice d = new Dice();
private void RollDice()
{
currentRoll = d.RollDice();
}
}

In this page there is a paragrap which displays the value of “currentRoll” variable with a button: when you click on it, the method RollDice is called and that value is updated.

The page will be visible at the “/dice” route but at the moment you still need to add a link in the navbar to access it.

The menu item can be added in NavMenu.razor as a li item:

<li class="nav-item px-3">
<NavLink class="nav-link" href="dice">
<span class="oi oi-plus" aria-hidden="true"></span> Dice
</NavLink>
</li>

Launching the web application, you can see the result:

The page now includes a “Dice” menu item and if you click on it, you can see an interface to roll a dice:

Full-time Human-computer interpreter