Discovering Blazor: a small dice rolling page

4 min readJan 20, 2021

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:

Discovering Blazor: a small dice rolling page

Written by Juna Salviati