How do you create a form wizard using Blazor?

Question

How do you create a form wizard using Blazor + MatBlazor (Material Design for Blazor) and no Javascript? The user should be able to navigate between different pages of the form and a progress bar should be dynamically updated.

Answer 1

The following is a basic form wizard that was inspired by Louis Hendricks.

Please note that you will need to install MatBlazor by Vladimir Samoilenko in order to get web elements prefixed by "Mat" working.

Form.razor File

<div id="form-navigation-container">

    <!-- Checks to see if current step is not equal to first step via SetNavButtons() method -->
    <MatButton Class="previous" disabled="@Wizard.PreviousButtonDisabled" @onclick="Wizard.GoToPreviousStep">Previous Step</MatButton>

    <!-- Checks to see if current step is not equal to last step via SetNavButtons() method -->
    <MatButton Unelevated="true" disabled="@Wizard.NextButtonDisabled" @onclick="Wizard.GoToNextStep">Next Step</MatButton>
</div>

<!-- Progress bar gets incremented/decremented via GoToNextStep()/GoToPreviousStep() methods -->
<MatProgressBar Class="progress" Progress="@Wizard.Progress" aria-valuenow="@Wizard.Progress" aria-valuemin="0" aria-valuemax="1"></MatProgressBar>

@code {
    Wizard Wizard = new Wizard();
}

Wizard.cs File

using FORM.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace FORM.Models
{
    public class Wizard
    {


        public Wizard()
        {
            Progress = .2;
            Step = 1;
            SetNavButtons();
        }

        public double Progress { get; private set; }

        public int Step { get; private set; }

        public bool PreviousButtonDisabled { get; private set; }
        public bool NextButtonDisabled { get; private set; }

        public void GoToNextStep()
        {
            Step += 1;            
            Progress += .2;
            if (Step == 6)
            {
                Progress = 100;
            }
            SetNavButtons();
        }

        public void GoToPreviousStep()
        {
            if (Step > 1)
            {
                Step -= 1;
                Progress -= .2;
            }
            if (Step == 1)
            {
                Progress = .2;
            }
            SetNavButtons();
        }

        public void SetNavButtons()
        {
            NextButtonDisabled = false;
            switch (Step)
            {
                case 1:
                    PreviousButtonDisabled = true;               
                    break;
                case 2:
                    PreviousButtonDisabled = false;
                    break;
                case 3:
                    PreviousButtonDisabled = false;
                    break;
                case 4:
                    PreviousButtonDisabled = false;
                    break;
                case 5:
                    NextButtonDisabled = true;
                    break;
                default:
                    break;
            }
        }
    }
}