Blazor WebAssembly Update Page Title

1
votes

Framework: .NET Core 3.1 (Blazor WebAssembly)

I have just scaffolded a simple Blazor WebAssembly app, and added multiple pages. On redirection to the specific page, I want to update the window/tab title to [Page Name] | My App.

In ASP.NET MVC or Core, we could use the ViewBag to update the <title> element in Layout.cshtml.

What would be the equivalent approach in Blazor WebAssembly app?

Thanks.

2
c#.net-coreblazorwebassemblyblazor-client-side
Does this answer your question? How to set page title in blazor? – rickvdbosch
Is it possible to update the title without using the IJSRuntime? – Vaibhav
I think this is a duplicate of this question. There are a few answers I also recommended to use this Nuget package. – Major

2 Answers

2
votes

You should be using the Microsoft.AspNetCore.Components.Web.Extensions nuget package: https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Web.Extensions. It is currently still in prerelease but stable.

It does exactly what you are looking for, you get components for <Title>, <Link>, and <Meta> tags. It still uses JavaScript to perform the update, but it is much cleaner than the other solutions out there. I personally use this package successfully in a production app. Here's how to get it setup:

  1. Install the nuget package Install-Package Microsoft.AspNetCore.Components.Web.Extensions -Prerelease
  2. In your index.html file under wwww root folder, add a reference to the JS file: <script src="_content/Microsoft.AspNetCore.Components.Web.Extensions/headManager.js" type="module"></script>
  3. On any *.razor page you want to set the title on, or in the _Imports.razor file for a folder, add the using directive: @using Microsoft.AspNetCore.Components.Web.Extensions.Head
  4. Use the various tags as needed:
<Title value="My Page Title" />
<Meta name="description" content="My Blazor Component" />
<Link rel="icon" type="image/x-icon" href="/favicon.ico" />
<Link rel="alternate" href="/feed.rss" type="application/rss+xml" />
0
votes

Likewise, here is a different blog post on how to set the page title. Essentially, you use the navigation manager to inject the current page, and then use JS Interop to call out an update the the page title.

https://www.iambacon.co.uk/blog/setting-the-document-title-in-your-blazor-app

There are definitely a few ways to do this. If you have issues implementing, let me know!