Vor Blazor 5.0 konnte man die Kopfelemente eines HTML-Dokuments nur per JavaScript beeinflussen. Dann lieferte Microsoft eine Abstraktion dafür und seit Blazor 6.0 gibt es sogar eine Lösung innerhalb des .NET SDK.

Das Zusatzpaket Microsoft.AspNetCore.Components.Web.Extensions kam als Abstraktion in Blazor 5.0 hinzu und seit der Version 6.0 können Kopfdaten über die im .NET SDK enthaltenen Komponenten <PageTitle> und <HeadContent> beeinflusst werden.

Lösung in Blazor 5.0

In Blazor 5.0 muss man dazu zunächst ein NuGet-Paket installieren, das es nur in der Preview gibt:

install-package Microsoft.AspNetCore.Components.Web.Extensions -pre

In der index.html (bei Blazor WebAssembly) bzw. _ host.cshtml (bei Blazor Server) ergänzt man:

<!--Für Blazor-Extensions von Microsoft-->
<script src="_content/Microsoft.AspNetCore.Components.Web.Extensions/headManager.js"></script>

In der jeweiligen Komponente oder global in _Imports.razor bindet man den Namensraum ein:

@using Microsoft.AspNetCore.Components.Web.Extensions.Head

Danach kann man in der Seite an beliebiger Stelle die Elemente platzieren, z. B.:

<Title Value="@title"></Title>

Listing 1 zeigt, wie man den Titel der Seite per Klick auf einen Button auf die aktuelle Uhrzeit ändert. Das Ergebnis sieht man in Abbildung 1.

Abb. 1: Ausgabe von Listing 1

@page "/Demos/HTMLHead"
@using Microsoft.AspNetCore.Components.Web.Extensions.Head
<h3>HTML-Head beeinflussen</h3>
<button @onclick="ChangeTitle">Change Title</button>
<Title Value="@title"></Title>
<br />
Titel wurde gesetzt auf: @title
@code
{
  public string title { get; set; } = "n/a";
  public void ChangeTitle()
  {
    title = DateTime.Now.ToLongTimeString();
  }
}

Lösung in Blazor 6.0

In Blazor 6.0 ist die Lösung deutlich komplexer einzurichten, dann aber etwas flexibler in der Bedienung. Man braucht kein NuGet-Paket; die Funktionen sind schon in den .NET SDKs (Microsoft.NET.Sdk.BlazorWebAssembly bzw. Microsoft.NET.Sdk.Web) enthalten.

Für Blazor WebAssembly muss der Entwickler in Program.cs nur ergänzen, dass es eine zweite Wurzelkomponente vom Typ HeadOutlet gibt:

builder.RootComponents.Add<HeadOutlet>("head::after");

In Blazor Desktop muss man Vergleichbares tun, nur syntaktisch etwas anders, da es dort bei RootComponents.Add() keinen Typparameter gibt:

var rh = new Microsoft.AspNetCore.Components.WebView.Wpf.RootComponent();
rh.ComponentType = typeof(HeadOutlet);
rh.Selector = "head::after";
C_WebView.RootComponents.Add(rh)...