DEV Community: Chris Key

Changing the page Title in Blazor (Client-side)

Chris Key — Sat, 01 Feb 2020 15:50:17 +0000

One of the first things I found with Blazor was no ability to set the page title.

This may come natively in time, but for now here is a simple solution.

Firstly, we need to define some JavaScript - you can put this directly in your index.html as a script or in a JS library file. (Ideally the build pipeline would compile all component JS into a single minified file and attach it to the index.html automatically. One day.)

window.setTitle = (title) => {
    console.log('Setting title', title);
    document.title = title;
}

This simply creates a function in the window scope that sets the title to whatever is in the input.

Then we create a PageTitle.razor component to use in other components to manage the page title:

@inject IJSRuntime JSRuntime;
@code {
    private String _title = "";
    [Parameter]
    public String Title {
        get {
            return this._title;
        }
        set {
            this._title = value;
            setTitle();
        }
    }


    protected override void OnInitialized() {
        setTitle();
    }

    private void setTitle() {
        System.Console.WriteLine("Blazor setting Title to {0}", this._title);
        JSRuntime.InvokeAsync<string>("setTitle", new object[] { this._title });
    }
}

We inject the JSRuntime to allow interop with JavaScript. The Title property has a simple getter, but the setter is designed to trigger a refresh in the code below.

To use the component in another (I'm using the Counter example), it is used as normal:

<PageTitle Title="Counter" @ref="PageTitle" />

This will change the page title to Counter when the component is initialised. I've added a reference so that I can use the code below:

private PageTitle PageTitle;
private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
    this.PageTitle.Title = String.Format("Counter: {0}", currentCount);
    Console.WriteLine("Incrementing");
    AlertService.addMessage(new Alert(currentCount.ToString(), Alerts.Info));
}

The reference to PageTitle is created to allow it to be used and wired up to the component specified above by Blazor's default magic.

Then after incrementing the counter, we set the Title to the formatted string. You will remember above that the setter has logic to trigger the refresh when the title is changed.

(My AlertService)

This works fine (albeit with a tiny delay, but nothing a user will notice). You will get a build warning:

Pages\Counter.razor(18,9): warning BL0005: Component parameter 'Title' should not be set outside of its component. [C:\code\blazor\first-run\WebApplication1\WebApplication1.csproj]

This could be eradicated by using a method instead of setter, but I wanted to show this way of doing it.

Building an alert service in Blazor (Client-side)

Chris Key — Sat, 01 Feb 2020 15:28:22 +0000

I've been mostly playing with AngularJS and Angular for the last few years at Packt as a dev manager, but now I'm moving to a new role where they've chosen to build a platform with Blazor.

I'm totally brand new to Blazor, and haven't used .Net since 4.0 came out (original framework, Core didn't exist then). I'm going to write up some of my discoveries as part of this migration to be used as a reference for anyone else starting out.

Why an Alert Service?

All the tutorials I've seen so far are fairly static, with minimal interaction between pages and components (hint, pages are components). A UI often needs a way of letting a user know something has happened. It may be directly related to the component they are interacting with, in which case popping up a message is pretty easy, but doing it for every component can mean being repetitive. A background service may need to let a user know something has happened, or a component that is going out of focus. In this case, as a component out of focus can't display anything, nor can a service, we need something else to manage messages.

My requirements were pretty simple - ability to show at any time, in a range of colours (following Bootstrap) and automatically disappear after some seconds.

I originally looked at a component in the MainLayout that was accessible down the stack through the use of CascadingValue but it got messy around the redraw and having events for making messages disappear.

The code structure

= Shared
  = Interfaces
      IAlert.cs
  = Classes
      Alert.cs
  = Enums
      Alerts.cs
  = Services
      AlertService.cs
  MainLayout.razor
= Components
    AlertComponent.razor
= wwwroot
  = css
      alert-service.css
  index.html
Program.cs

The Code Files

We have an interface to define the type for the alerts being passed around, not absolutely necessary but useful for mocking tests later on:

public interface IAlert {
    string message { get; set; }
    Alerts alert { get; set; }
}

A class is then used to actually hold the data. Coming from TypeScript, this is unnecessary as anonymous classes do the job perfectly well.

public class Alert : IAlert
{
    public Alert() {}
    public Alert(string message, Alerts alert) {
        this.message = message;
        this.alert = alert;
    }

    public string message { get; set; }
    public Alerts alert { get; set; }
}

The enum is used to hold all the different types of alert: Primary, Secondary, Danger, Warning, Info etc.

public enum Alerts {
    Primary,
    Secondary,
    Success,
    Info,
    Danger,
    Warning,
    Dark,
    Light
}

The AlertService defines our actual code:

using System;
using System.Collections.Generic;

public class AlertService {
    public List<IAlert> messages { get; private set; }
    public event Action RefreshRequested;

    public AlertService() {
        this.messages = new List<IAlert>();
    }

    public void addMessage(Alert alert) {
        this.messages.Add(alert);
        System.Console.WriteLine("Message count: {0}", this.messages.Count);
        RefreshRequested?.Invoke();

        // pop message off after a delay
        new System.Threading.Timer((_) => {
            this.messages.RemoveAt(0);
            RefreshRequested?.Invoke();
        }, null, 8000, System.Threading.Timeout.Infinite);
    }
}

There is a private property to hold the messages in a list, and a public method to add to the list.

There is also an event setup for when data changes. Then anything that wants to use the data from the service can be notified when changes occur. This event is referenced twice in theaddMessage method - once when the alert is added to the list, and once when it is removed.

You can see we have a timer set to 8 seconds to remove the top item in the list. If for some reason the list is empty, this could potentially cause problems - ideally some defences should be added here.

The AlertComponent has the physical layout and rendering method:

@inject AlertService AlertService

<div class="alert-service">
    @for (int c = 0 ; c < AlertService.messages.Count ; c++)
    {
        <span class="alert @getAlertClass(AlertService.messages[c])">@AlertService.messages[c].message</span>
    }
</div>

@code {
    protected override void OnInitialized() {
        Console.WriteLine("AlertComponent:Initializied");
        AlertService.RefreshRequested += Refresh;
    }

    private String getAlertClass(IAlert alert) {
        return String.Format("alert-{0}", alert.alert.ToString().ToLower());
    }

    private void Refresh() {
        Console.WriteLine("AlertComponent:refreshing");
        StateHasChanged();
    }
}

Firstly, we inject the AlertService into the component. There are changes in the Program.cs below that make this possible.

We then have some HTML with a razor iterator to build the messages. This is slightly inefficient as every update will recreate all the DOM elements, rather than adding and removing as necessary. This would be much worse if we had a more complex structure, but as it is, it isn't completely terrible. I did try using a BlazorStrap Alert but it had issues with reading data out of sync (no idea why yet).

The code is mostly just helpers. When the component is initialised, the AlertService RefreshRequested event is subscribed and wired to the Refresh() method.

The getAlertClass() method performs the required manipulation to build the CSS class from the Alert object containing the enum.

We put our component into MainLayout with simply:

<AlertComponent />

In alert-service.css we have some fairly simple CSS:

.alert-service {
    position: absolute;
    top: 4rem;
    right: 2rem;
}

.alert-service span {
    display: block;
    width: 20rem;
    line-height: 2.2rem;
    text-align: right;
    padding: 0.8rem;
    margin: 0.4em;
}


.alert {
    color: #fff;
    border-style: solid;
    border-width: 0 1px 4px 1px
}

.alert-primary {
    background-color: #158CBA;
    border-color: #127ba3
}

...snip...

Finally, in Program.cs we have to register our service to make it available to components. We add the following line next to where the App is registered (shown together):

builder.RootComponents.Add<App>("app");
builder.Services.AddSingleton<AlertService>();

Now, we can use the AlertService in any component.

For example, I added it to the default Counter page/component:

@page "/counter"
@inject AlertService AlertService
<PageTitle Title="Counter" @ref="PageTitle" />

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private PageTitle PageTitle;
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
        this.PageTitle.Title = String.Format("Counter: {0}", currentCount);
        Console.WriteLine("Incrementing");
        AlertService.addMessage(new Alert(currentCount.ToString(), Alerts.Info));
    }
}

You can see we inject the AlertService at the top, as in the AlertComponent. We can then reference it in the IncrementCount() method based on the definition in the injection. We add our message, and it shows on screen for 8 secs.

Future changes for this setup would allow for persistent, manually dismissable messages, and to ensure HTML safety in the messages displayed to ensure no XSS capability.

PageTitle is another problem I solved....