UMS.Razor 🪒

Welcome to UMS.Razor!

This is a set of components that are used for delevoping of software at inLogic A/S. The UMS.Razor is based on bootstrap so we need to include that in our App.razor. There's also a javascript that need to be registred in program.cs, but enough about that.

Let's get started! 😎

Installation guide 🔧

First we need to need to update our App.razor

App.razor 
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css" rel="stylesheet">

    <link href="_content/UMS.Razor/Datepicker.css" rel="stylesheet" />
    <link href="_content/UMS.Razor/Datepicker-dark.css" rel="stylesheet" />
</head>

Add the two links to the head element.

App.razor 
<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>

Add the two scripts to the end of the body tag.

Program.cs 
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddScoped<UMS.Razor.JS>();

Here we add the UMS.Razor.JS class as a scoped service.

_Imports.razor 
@using UMS.Razor
@using UMS.Razor.Toast
@using UMS.Razor.Chart
@using UMS.Razor.ConfirmDialog
@using UMS.Razor.ThemeSwitcher
@using UMS.Razor.Modal
@using UMS.Razor.AutoComplete
@using UMS.Razor.FileUpload
@using UMS.Razor.Datepicker
@using UMS.Razor.LoadingIndicator

Add to UMS.Razor to _Imports.razor otherwise you will need to write the whole namespace.

Now you are ready to start using UMS.Razor 🪒 🎉

AutoComplete

Example


selected value:

selected label:


selected value:

selected label:

Code

Razor (cshtml, Razor) 
<AutoComplete LabelText="AutoCompleteExample" Options="examples" TItem="AutoCompleteExample" LabelString="Label" ValueString="id" @bind-SelectedValue="SelectedValue" />

<p>selected value: @SelectedValue?.id</p>
<p>selected label: @SelectedValue?.Label</p>
    
<hr />

<AutoComplete IsFormFloating="false" LabelText="AutoCompleteExample" Options="examples1" TItem="AutoCompleteExample" LabelString="Label" ValueString="id" @bind-SelectedValue="SelectedValue1" />

<p>selected value: @SelectedValue1?.id</p>
<p>selected label: @SelectedValue1?.Label</p>
c# 
private AutoCompleteExample SelectedValue { get; set; }
private AutoCompleteExample SelectedValue1 { get; set; }

private List<AutoCompleteExample> examples = new() { new() { id = 1, Label = "One" }, new() { id = 2, Label = "Two" }, new() { id = 3, Label = "Three" } };
private List<AutoCompleteExample> examples1 = new() { new() { id = 1, Label = "Apples" }, new() { id = 2, Label = "Oranges" }, new() { id = 3, Label = "Pears" } };

public class AutoCompleteExample
{
    public int id { get; set; }
    public string Label { get; set; }
}

AutoComplete V2

Example


selected value:

selected label:


selected value:

selected label:

Code

Razor (cshtml, Razor) 
<AutoCompleteV2 Options="examples" TItem="AutoCompleteExample" LabelString="Label" ValueString="id" @bind-SelectedValue="SelectedValue" PlaceholderString="Ello fessor" IsFormFloating="true" />
<br />
<p>selected value: @SelectedValue?.id</p>
<p>selected label: @SelectedValue?.Label</p>

<hr />

<AutoCompleteV2 Options="examples1" TItem="AutoCompleteExample" LabelString="Label" ValueString="id" @bind-SelectedValue="SelectedValue1" PlaceholderString="Ello fessor" IsFormFloating="false" />
<br />
<p>selected value: @SelectedValue1?.id</p>
<p>selected label: @SelectedValue1?.Label</p>
c# 
private AutoCompleteExample SelectedValue { get; set; }
private AutoCompleteExample SelectedValue1 { get; set; }

private List<AutoCompleteExample> examples = new() { new() { id = 1, Label = "One" }, new() { id = 2, Label = "Two" }, new() { id = 3, Label = "Three" }, new() { id = 4, Label = "Only one" }, new() { id = 5, Label = "Only one5" }, new() { id = 6, Label = "Only one6" }, new() { id = 7, Label = "Only one7" }, new() { id = 8, Label = "Only one8" }, new() { id = 9, Label = "Only one9" }, new() { id = 10, Label = "Only one10" } };
private List<AutoCompleteExample> examples1 = new() { new() { id = 1, Label = "Apples" }, new() { id = 2, Label = "Oranges" }, new() { id = 3, Label = "Pears" } };

public class AutoCompleteExample
{
    public int id { get; set; }
    public string Label { get; set; }
}

Charts

Example

Code

Razor (cshtml, Razor) 
<div class="row row-cols-1 row-cols-md-5 g-4">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <Chart ChartType="bar" _Data="BarChartData" />
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <Chart ChartType="doughnut" _Data="DoughnutChartData"></Chart>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <Chart ChartType="pie" _Data="PieChartData"></Chart>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <Chart ChartType="line" _Data="LineChartData"></Chart>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <Chart ChartType="polarArea" _Data="PolarAreaChartData"></Chart>
                </div>
            </div>
        </div>
    </div>
C# 
private ChartData BarChartData = new();
    private ChartData DoughnutChartData = new();
    private ChartData PieChartData = new();
    private ChartData LineChartData = new();
    private ChartData PolarAreaChartData = new();

    protected override void OnInitialized()
    {
        CreateBarChartData();
        CreatePieChartData();
        CreateDoughnutChartData();
        CreateLineChartData();
        CreatePolarAreaChartData();
    }

    private void CreateBarChartData()
    {
        BarChartData.labels = new();
        BarChartData.datasets = new();

        var dataSet = new Datasets();
        dataSet.borderWidth = 1;
        dataSet.label = "Bar chart";
        dataSet.borderWidth = 1;
        dataSet.data = new();

        dataSet.data.Add(1);
        dataSet.data.Add(2);
        dataSet.data.Add(3);
        dataSet.data.Add(4);
        dataSet.data.Add(5);
        dataSet.data.Add(6);
        dataSet.data.Add(10.5f);
        BarChartData.labels.Add("Red");
        BarChartData.labels.Add("Blue");
        BarChartData.labels.Add("Yellow");
        BarChartData.labels.Add("Green");
        BarChartData.labels.Add("Purple");
        BarChartData.labels.Add("Orange");
        BarChartData.labels.Add("Float value");

        BarChartData.datasets.Add(dataSet);
    }


    private void CreateDoughnutChartData()
    {
        DoughnutChartData.labels = new();
        DoughnutChartData.datasets = new();

        var dataSet = new Datasets();
        dataSet.borderWidth = 1;
        dataSet.label = "Doughnut chart";

        dataSet.data = new();

        dataSet.data.Add(7);
        dataSet.data.Add(3);
        dataSet.data.Add(1);
        DoughnutChartData.labels.Add("New");
        DoughnutChartData.labels.Add("Old");
        DoughnutChartData.labels.Add("Not set");

        DoughnutChartData.datasets.Add(dataSet);
    }

    private void CreatePieChartData()
    {
        PieChartData.labels = new();
        PieChartData.datasets = new();

        var dataSet = new Datasets();
        dataSet.borderWidth = 1;
        dataSet.label = "Pie chart";

        dataSet.data = new();

        dataSet.data.Add(7);
        dataSet.data.Add(8);
        dataSet.data.Add(2);
        PieChartData.labels.Add("New");
        PieChartData.labels.Add("Old");
        PieChartData.labels.Add("Not set");

        PieChartData.datasets.Add(dataSet);
    }

    private void CreateLineChartData()
    {
        LineChartData.labels = new();
        LineChartData.datasets = new();

        var dataSet = new Datasets();
        dataSet.borderWidth = 1;
        dataSet.label = "Pie chart";
        dataSet.tension = 0.1f;
        dataSet.fill = false;
        dataSet.borderColor = "rgb(75, 192, 192)";

        dataSet.data = new();

        dataSet.data.Add(7);
        dataSet.data.Add(8);
        dataSet.data.Add(2);
        dataSet.data.Add(10);
        LineChartData.labels.Add("January");
        LineChartData.labels.Add("February");
        LineChartData.labels.Add("March");
        LineChartData.labels.Add("April");

        LineChartData.datasets.Add(dataSet);
    }

    private void CreatePolarAreaChartData()
    {
        PolarAreaChartData.labels = new();
        PolarAreaChartData.datasets = new();

        var dataSet = new Datasets();
        dataSet.label = "Polar Area chart";

        dataSet.data = new();

        dataSet.data.Add(7);
        dataSet.data.Add(8);
        dataSet.data.Add(2);
        dataSet.data.Add(10);
        dataSet.data.Add(10.4f);
        PolarAreaChartData.labels.Add("January");
        PolarAreaChartData.labels.Add("February");
        PolarAreaChartData.labels.Add("March");
        PolarAreaChartData.labels.Add("April");
        PolarAreaChartData.labels.Add("float value");

        PolarAreaChartData.datasets.Add(dataSet);
    }

Confirm Dialog

Example

Code

Razor (cshtml, Razor) 
<button class="btn btn-primary" @onclick="() => confirmDialog.Show()">Show dialog</button>

<ConfirmDialog @ref="confirmDialog" Title="Test" Description="This is a test." onOkClick="OkClick">
</ConfirmDialog>

<ConfirmDialog @ref="confirmDialog" Title="Test" onOkClick="OkClick">
    <h1>Test</h1>
</ConfirmDialog>
C# 
private void OkClick()
{
    // do something here
}

Datepicker

Example

DateOnly
Selected date: 04-06-2025
DateTime
Selected date: 04-06-2025

Code

Razor (cshtml, Razor) 
DateOnly
<Datepicker IsFormFloating="false" format="dd-mm-yyyy" label="Select a day" AutoHideAfterSelection="true" @bind-SelectedDate="selectedDate" />
<hr />
<Datepicker IsFormFloating="true" format="dd-mm-yyyy" label="Select a day" AutoHideAfterSelection="true" @bind-SelectedDate="selectedDate" />

Selected date: @selectedDate?.ToString("dd-MM-yyyy")
<hr />

DateTime
<Datepicker IsFormFloating="false" format="dd-mm-yyyy" label="Select a day" AutoHideAfterSelection="true" @bind-SelectedDateTime="selectedDateTime" />
Selected date: @selectedDateTime?.ToString("dd-MM-yyyy")
C# 
private DateOnly selectedDate { get; set; }
private DateTime? selectedDateTime { get; set; } = DateTime.Now;

FileUpload

Example

Styled

Drag files here or click to upload
Default

Code

Razor (cshtml, Razor) 
<UMS.Razor.FileUpload.FileUpload HideUploadButton="true" UploadedFilesChanged="OnChange" />
<UMS.Razor.FileUpload.FileUpload HideUploadButton="false" UploadedFilesChanged="OnChange" MaxAllowFileSizeInMB="5" />

    <div class="image-container">
        @foreach (var item in imageSources)
        {
            <img src="@item" />
        }
    </div>
C# 
private List<string> imageSources = [];

    async Task OnChange(List<IBrowserFile> files)
    {
        imageSources.Clear();
        foreach (var file in files)
        {
            long MaxFileSize = 5 * 1024 * 1024;

            using var stream = file.OpenReadStream(MaxFileSize);
            using var ms = new MemoryStream();
            await stream.CopyToAsync(ms);
            imageSources.Add($"data:{file.ContentType};base64,{Convert.ToBase64String(ms.ToArray())}");
        }
    }

LoadingIndicator

Example



Result:

Code

Razor (cshtml, Razor) 
<LoadingIndicator @ref="loading" InitialDelay="500" ShowModalBackground="true" />
<button class="btn btn-primary" @onclick="simpleWait">Simple wait - 250 ms</button>
<button class="btn btn-primary" @onclick="longWait">Long wait - 2500 ms</button>
<button class="btn btn-primary" @onclick="Reset">Reset</button>
<br />
<br />

Result: @result
C# 
private LoadingIndicator loading { get; set; } = new();
private string result { get; set; } = "";

private async Task simpleWait()
{
    loading.Show();
    await Task.Delay(250);
    result = "simpleWait is done";
    loading.Hide();
}

private async Task longWait()
{
    loading.Show();
    await Task.Delay(2500);
    result = "longWait is done";
    loading.Hide();
}

private void Reset()
{
    result = "";
}

Modal

Example

Code

Razor (cshtml, Razor) 
<button class="btn btn-primary" @onclick="() => modal.Show()">Show modal</button>
<Modal Title="Modal test" @ref="modal" OkButtonText="OK" ShowCancelButton="false" onOkClick="OkClick">
    <h2>Modal content goes here!</h2>
    <p>This can also be binded to properties.</p>
    <p>@content</p>
</Modal>
C# 
private string content { get; set; } = "Test content from bind!";
private Modal modal { get; set; }

private void OkClick()
{
    modal.Hide();
}

Theme switcher

Example

Code

Razor (cshtml, Razor) 
<ThemeSwitcher ShouldRenderWithFixedPosition="false" />

Toasts

Single toast

Example

Code

Razor (cshtml, Razor) 
<button class="btn btn-primary" @onclick="ShowUMSToast">Normal toast</button>

<ToastContainer>
    <Toast @ref="Toast"></Toast>
</ToastContainer>
C# 
private void ShowUMSToast()
{
    Toast.Title = "Test";
    Toast.Description = "This is a test of toast";
    Toast.Show();
}
types of toast 
public enum ToastType
{
    primary,
    secondary,
    success,
    danger,
    warning,
    info,
    light,
    dark
}
Multiple toasts
Razor (cshtml, Razor) 
<button class="btn btn-primary" @onclick="ShowUMSToast">Normal toast</button>

<ToastContainer @ref="tc" />
C# 
private ToastContainer tc = new();

private void ShowUMSToast()
{
    var displayToast = tc.GetToast();

    if (displayToast != null)
    {
        displayToast.Title = "Test";
        displayToast.Description = "Test";
        displayToast.Show();
    }
}
An unhandled error has occurred. Reload 🗙