Routing for Pages

The routing generally goes at the top of the razor file.

//In the razor page:
@page "/pagetonavigateto"

//With a parameter value
@page "/pagetonavigateto/{id:int}"  //if the id is a int there are various types you can use such as bool, string etc.

Using <a> Tags

<a href="/pagetonavigateto/parametervalue">Click Here</a>

Using Buttons

In the razor file to navigate from

<button class="btn btn-primary" @onclick="Method">Click Here</button>

In the razor code section or the base class file

void Method()
{
    NavigationManager.NavigateTo("/pagetonavigateto/parametervalue");
}

You will also need to inject the NavigationManager into either the razor file or the base class file

//In the razor file
@inject NavigationManager NavigationManager

//In the base class file
[Inject]
NavigationManager NavManager { get; set; }

This may not be the bes to rmost efficent way so please feel free to comment a better method or a way to improve what I have done.

The code is not generic which is what I would like to do at some point if possible but for now it is not required for this project.

The styling is not what I want to to look like but can be worked.

The project has a requirnment for each maintenance request that risk levels can be selected from High "H", medium "M" and low "L". There is a number of risks depending on the type or request either general or plant.

My structure is that there is a maintenance request with a unique ID and a Risk table with the risks for the type of maintenance request. From here there is a table that has two FK which are the risk ID and maintenance request ID with a column string which is set to one of the risk level either "H", "M" or "L".

The reason for also doing it this way is that more risks could be added over time so I wanted to implement a way for more to be added without the need to alter the code etc.

Video of the component in action. The styling is not complete and has work to do but the functionality is there.

Blazor Component - Full

@using SACOMaintenance.Common.ModelDB
@using System.Collections.ObjectModel;
@using System;

<div class="container-full">
    <RadzenFieldset Text="Risks">
        <div class="inner-radio-container">
        @foreach (var item in ItemsChosen)
        {

            <div class="container-outer">
                <div class="row">
                    @foreach (var riskItem in Risks)
                    {
                        if (riskItem.Id == item.RiskId)
                        {
                            <label>@riskItem.RiskName</label>
                        }
                    }
                </div>
                <div class="row">
                    <div class="input-container">
                        <input name="@item.RiskId" type="radio" id="H" class="radio-button-H"
                               value="H" checked="@(item.Level.Equals("H"))"
                               @onchange="_ => HandleChangeHigh(item)" />
                        <div class="radio-tile-H">
                            <label>H</label>
                        </div>
                    </div>
                    <div class="input-container">
                        <input name="@item.RiskId" type="radio" id="M" class="radio-button-M"
                               value="H" checked="@(item.Level.Equals("M"))"
                               @onchange="_ => HandleChangeMedium(item)" />
                        <div class="radio-tile-M">
                            <label>M</label>
                        </div>
                    </div>
                    <div class="input-container">
                        <input name="@item.RiskId" type="radio" id="L" class="radio-button-L"
                               value="H" checked="@(item.Level.Equals("L"))"
                               @onchange="_ => HandleChangeLow(item)" />
                        <div class="radio-tile-L">
                            <label>L</label>
                        </div>
                    </div>
                </div>
            </div>
        }
        </div>
    </RadzenFieldset>


        </div>

        @code{
            [Parameter]
            public ObservableCollection<Risk> Risks { get; set; }

            [Parameter]
            public List<MaintRequestInitiationRisk> ItemsChosen { get; set; } = new();

            [Parameter]
            public EventCallback<List<MaintRequestInitiationRisk>> ItemsChosenChanged { get; set; }

            void HandleChangeHigh(MaintRequestInitiationRisk item)
            {

                item.Level = "H";
                ItemsChosenChanged.InvokeAsync(ItemsChosen);
            }

            void HandleChangeMedium(MaintRequestInitiationRisk item)
            {

                item.Level = "M";
                ItemsChosenChanged.InvokeAsync(ItemsChosen);
            }

            void HandleChangeLow(MaintRequestInitiationRisk item)
            {

                item.Level = "L";
                ItemsChosenChanged.InvokeAsync(ItemsChosen);
            }
        }

Breaking the above code down into sections to explain what each part is doing.

[Parameter]
            public ObservableCollection<Risk> Risks { get; set; }

            [Parameter]
            public List<MaintRequestInitiationRisk> ItemsChosen { get; set; } = new();

            [Parameter]
            public EventCallback<List<MaintRequestInitiationRisk>> ItemsChosenChanged { get; set; }

The ObservableCollection Risks is getting all off the risks that there are so that the risk name can be gotten.

List ItemsChosen are the risks that are for the type of maintenance request and it has the risk level set to either H, M or L.

public EventCallback> ItemsChosenChanged is a callback to a list of risks and what the risk level is so that any changes to the risk level of any of the risks are passed back in order to update the model and database table.

This code snippet starts to loop through the risks that are associated with the request.

@foreach (var item in ItemsChosen)
        {

This code snippet below loops through the risks and then checks to see if the risk Id is the same as the current chosen risk and of so then it outputs the Risk Name

@foreach (var riskItem in Risks)
                    {
                        if (riskItem.Id == item.RiskId)
                        {
                            <label>@riskItem.RiskName</label>
                        }
                    }

This next code snippet sets the RiskId and the imput as a radio button. Then on check it calls a method to change the risk level.

<div class="input-container">
                        <input name="@item.RiskId" type="radio" id="H" class="radio-button-H"
                               value="H" checked="@(item.Level.Equals("H"))"
                               @onchange="_ => HandleChangeHigh(item)" />
                        <div class="radio-tile-H">
                            <label>H</label>
                        </div>
                    </div>

There is one for each of the risk levels.

The implementation in blazor for the component is where the Risks and Risk Items lists are passed to the component as parameters.

<RequestRiskChoice @bind-ItemsChosen="maintReqInitation.RiskListsChosen" Risks="maintReqInitation.Risks">
                    </RequestRiskChoice>

CSS Code for styling.

.container-full {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.inner-radio-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
}

.container-outer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 25%;
    background-color: lightgray;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
}

.input-container {
    display: flex;
    position: relative;
    height: 4rem;
    width: 4rem;
    margin: 0.5rem;
}

    .radio-button-H, .radio-button-M, .radio-button-L {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        margin: 0;
        cursor: pointer;
    }

    .radio-tile-H, .radio-tile-M, .radio-tile-L {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        border: 2px solid red;
        border-radius: 5px;
        padding: 1rem;
        transition: transform 300ms ease;
    }

.radio-tile-M {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 2px solid yellow;
    border-radius: 5px;
    padding: 1rem;
    transition: transform 300ms ease;
}
.radio-tile-L {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 2px solid green;
    border-radius: 5px;
    padding: 1rem;
    transition: transform 300ms ease;
}
    .radio-button-H:checked + .radio-tile-H {
        background-color: red;
        border: 2px solid red;
        color: white;
        transform: scale(1.1, 1.1);
    }

    .radio-tile-label-H {
        color: white;
        background-color: red;
    }

    .radio-button-M:checked + .radio-tile-M {
        background-color: yellow;
        border: 2px solid yellow;
        color: white;
        transform: scale(1.1, 1.1);
    }

    .radio-tile-label-M {
        color: black;
        background-color: yellow;
    }

    .radio-button-L:checked + .radio-tile-L {
        background-color: green;
        border: 2px solid green;
        color: white;
        transform: scale(1.1, 1.1);
    }

    .radio-tile-label-L {
        color: white;
        background-color: green;
    }

This has proven to be confusing but in the end with the help of our friend google I managed to find and implement the code needed using Javascript in blazor to do this so adding here for my memory and just in case i tmay help anyone else in the future.

First the Javascript file method:

function saveAsFile(filename, bytesBase64) {
    var link = document.createElement('a');
    link.download = filename;
    link.href = "data:application/octet-stream;base64," + bytesBase64;
    document.body.appendChild(link); // Needed for Firefox
    link.click();
    document.body.removeChild(link);
}

Then in the blazor file or class file you would call as

await JSRuntime.InvokeAsync<object>("saveAsFile", fileName, Convert.ToBase64String(content));

It needs (if I have understood this correctly) the content to be byte format so for my excel file I used ClosedXML to create the excel file then at the end exported so it donwloaded to the users selected download location.

What I essentially have in my project is a:

• Razor page which has a table of requests with an export button which calls a method from a custom excel class. This custom excel class is injected into this razor page.

• The custom excel class uses ClosedXML to create the excel file as required with data, formatting etc.

• In the startup the custom excel class is injected as a service so the razor page can inject it.

Custom Class Code:

using System.Threading.Tasks;
using System.IO;
using Microsoft.JSInterop;


namespace SACOMaintenance.Blazor.Server.Services
{
    public class MaintenanceRequestsExcel
    {

        private readonly IJSRuntime JSRuntime;

        public MaintenanceRequestsExcel(IJSRuntime jSRuntime)
        {
            JSRuntime = jSRuntime;
        }

            using (var workbook = new XLWorkbook())
            {
                var worksheet = workbook.Worksheets.Add("Maint Requests All");

                worksheet.Cell("A1").Value = "All Maintenance Requests";
                worksheet.Cell("A1").Style.Font.Bold = true;
                worksheet.Cell("A1").Style.Font.FontSize = 20;
                worksheet.Range("A1", "E1").Merge(true);

                worksheet.Cell("A2").Value = "Id";
                worksheet.Cell("A2").Style.Alignment.SetHorizontal(XLAlignmentHorizontalValues.Center);
                worksheet.Cell("A2").Style.Font.Bold = true;

                worksheet.Cell("B2").Value = "Details";
                worksheet.Cell("B2").Style.Alignment.SetHorizontal(XLAlignmentHorizontalValues.Center);
                worksheet.Cell("B2").Style.Font.Bold = true;

                worksheet.Cell("C2").Value = "Date Raised";
                worksheet.Cell("C2").Style.Alignment.SetHorizontal(XLAlignmentHorizontalValues.Center);
                worksheet.Cell("C2").Style.Font.Bold = true;

                worksheet.Cell("D2").Value = "Equipment Name";
                worksheet.Cell("D2").Style.Alignment.SetHorizontal(XLAlignmentHorizontalValues.Center);
                worksheet.Cell("D2").Style.Font.Bold = true;

                worksheet.Cell("E2").Value = "Status";
                worksheet.Cell("E2").Style.Alignment.SetHorizontal(XLAlignmentHorizontalValues.Center);
                worksheet.Cell("E2").Style.Font.Bold = true;

                worksheet.Column(1).Style.Alignment.SetHorizontal(XLAlignmentHorizontalValues.Center);
                worksheet.Column(3).Style.Alignment.SetHorizontal(XLAlignmentHorizontalValues.Center);
                worksheet.Column(4).Style.Alignment.SetHorizontal(XLAlignmentHorizontalValues.Center);
                worksheet.Column(5).Style.Alignment.SetHorizontal(XLAlignmentHorizontalValues.Center);

                worksheet.Range("A2", "E2").SetAutoFilter();

                //loop through the collection and put the items in columns then increment to the next row
                var i = 3; //declare the row number to start

                //loop through the items in the list
                foreach(var item in exportList)
                {
                    worksheet.Cell("A" + i).Value = item.Id;
                    worksheet.Cell("B" + i).Value = item.RequestDetails;
                    worksheet.Cell("C" + i).Value = item.DateRaised;
                    worksheet.Cell("D" + i).Value = item.Equipment.Name;
                    worksheet.Cell("E" + i).Value = item.Status.StatusName;
                    i++;
                }

                worksheet.Columns("A", "E").AdjustToContents();

                //Download the excel file to the users download default lcoation
                using (var stream = new MemoryStream())
                {
                    workbook.SaveAs(stream);
                    var content = stream.ToArray();

                    var fileName = "Maintenance Request Export " + DateTime.Now.ToString("dd-MM-yyyy") + " .xlsx"; //TODO: see if this format can be changed in the app settings?
                    await JSRuntime.InvokeAsync<object>("saveAsFile", fileName, Convert.ToBase64String(content));
                } 
            }
        }
    }  
}

So the Javascript is add from a using statment so it can call the relevant javascript file from this line

using Microsoft.JSInterop;

Then the IJSRuntime is injected into the class and constructor.

 private readonly IJSRuntime JSRuntime;

        public MaintenanceRequestsExcel(IJSRuntime jSRuntime)
        {
            JSRuntime = jSRuntime;
        }

The part of the method that creates the excel and download with the Javascript function is

using (var stream = new MemoryStream())
{
       workbook.SaveAs(stream);
        var content = stream.ToArray();

        var fileName = "Maintenance Request Export " + DateTime.Now.ToString("dd-MM-yyyy") + " .xlsx"; //TODO: see if this format can be changed in the app settings?
        await JSRuntime.InvokeAsync<object>("saveAsFile", fileName, Convert.ToBase64String(content));
}

In the startup class in blazor the excel class is added as a service

services.AddScoped<MaintenanceRequestsExcel>();

In the razor page file I call the excel class method to run the export function and download the file. The method is tied to an onclick event of a button.

public async Task ExportExcelFile()
 {
        await ExcelExport.ExportListToExcel(maintReqListViewModel.requests);
 }

Here is a quick video of it in action where it is exporting the table shown into an excel file.