How to set page title in blazor?

blazor

10,544

Solution 1

Note: starting with .Net 6.0 there is official support for changing the title, so the solution below is no longer needed.

Provide following script in your index.html (or in an included .js file):

<script>
     setTitle = (title) => { document.title = title; };
</script>

In each page inject the jsinterop:
```
@inject IJSRuntime JSRuntime;
```

After each render, set the document title to the value of your choice:

@code
{
   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
      await JSRuntime.InvokeVoidAsync("setTitle", "this is the new title"); ;        
   }    
}

Solution 2

In ASP.NET CORE 5.0, a new component for Title is added

 <Title value="Page title" />

Msdn Reference: https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/additional-scenarios?view=aspnetcore-5.0#influence-html-head-tag-elements

First add the using statement in the component

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

You can install (if not installed) using the command.

dotnet add package Microsoft.AspNetCore.Components.Web.Extensions --version 5.0.0-preview9.20467.1

5.0.0-preview9.20467.1 is the version when I am writing this. Please check the nuget url for the latest version

Nuget url: https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Web.Extensions/

Then add the Title tag.

<Title Value="My page title" />

See the sample output image below

Solution 3

From ASP.NET CORE 6.0, the official docs says that we can Influence HTML <title> tag elements easily by using PageTitle component.

Add the HeadOutlet Component in Program.cs

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

Then use PageTitle Component

<PageTitle>@title</PageTitle>

~~Update 1:~~

Looks like this API has been put on hold to improve further. This has been removed from official docs link. Here is the github issue tracking the same. I'll update the answer once the API finally gets available in docs.

Update 2:

The above issue has been resolved and ASP.NET Core team added <PageTitle> component in ASP.NET Core 6.0. I have also updated the answer accordingly.

Solution 4

For those targeting .NET Core 3.1

Kudos to this post, you can make a reusable component.

Add below script to a js file, or add to index.html

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
    <script>
        window.setTitle = (title) => {
            document.title = title;
        }
    </script>
</body>
</html>

In the shared folder create a new component PageTitle.razor

@inject IJSRuntime JsRuntime;
@code {
    [Parameter]
    public string Title { get; set; }
    protected override async Task OnInitializedAsync()
    {
        await SetTitle();
    }
    private async Task SetTitle()
    {
        await JsRuntime.InvokeVoidAsync("setTitle", Title);
    }
}

Add to the razor page you want to change the name of:

<PageTitle Title="Home sweet home" />

Solution 5

.NET 6 RC1 introduced the PageTitle component to handle this scenario. The PageTitle component is inside of the Microsoft.AspNetCore.Components.Web namespace.

You can place the component anywhere within your Blazor app and the contents of the PageTitle will be reflected as the title of your page. If you have multiple PageTitle components, the one that has been rendered last will become the title of your page.

In this case, the title will be "Page Title 2":

@page "/counter"
<PageTitle>Page Title 1</PageTitle>
<PageTitle>Page Title 2</PageTitle>

For PageTitle and HeadContent to work, you do need to add the HeadOutlet as a root component. If you're using Blazor WASM completely client-side (no pre-render), you need to add the following line to your Startup.cs file after adding your App as a root component:

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

The head::after CSS selector instructs where to render the output of the HeadOutlet which will be respected for HeadContent, but if there's a title tag already present, the existing title tag will be updated.

If you're using Blazor WASM with pre-rendering, you'd put the following line inside the head of your _Layout.cshtml file:

<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />

This is assuming you have a _Layout.cshtml file from following Microsoft's docs to setup Blazor WASM pre-rendering.

If you want more details, I wrote a blog post on PageTitle, HeadContent, and HeadOutlet with more details at the Telerik Blog.

I also just found some very new documentation from Microsoft on PageTitle, HeadContent, etc that is relevant.

View more solutions

10,544

Author by

mko

Updated on June 14, 2022

Comments

mko 12 months

As Blazor being a SPA framework, I would like to know is it possible to set a page title for each individual page in Blazor?

I am currently working on Blazor webassembly project and cannot figure out a way how to add a page title since there is only one index.html as it should be in SPA, but would be really useful if it can be achieved to set title for each "page".