Discovering Blazor: a small dice rolling page

  • 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.
using System;
namespace DiceBlazorApp
public class Dice
private Random rand = new Random();
public int RollDice()
int currentRoll = rand.Next(1,7);
return currentRoll;
@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();
<li class="nav-item px-3">
<NavLink class="nav-link" href="dice">
<span class="oi oi-plus" aria-hidden="true"></span> Dice




Full-time Human-computer interpreter. Opinions are my own.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Which will be your new noSql, Couchbase or Mongo?

Tello Drone — Initial Review and Python Programming

How To Create a Dockerfile For Data Science

CloudWatch Logs

Importing Neo4j Desktop Databases to Neo4j Aura

Five Types of Dysfunctional Software Teams and How To Fix Them

How to Increase upload file size max, Laravel, PHP, Nginx

Metaprogramming for UI Testing: PBT & Abstract Compositional Contracting

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Juna Salviati

Juna Salviati

Full-time Human-computer interpreter. Opinions are my own.

More from Medium

.NET: Text censoring with custom list

Database, Entity Framework -1

PHPUnit Testing Anonymous Functions

Set-up Default Clone Project Directory for Visual Studio 2022