Page Title

Radzen Studio Blazor Server
1

Is it possible to change the page title? I can see it is set in the _Hosts.cshtml file but if I modify it, it gets overwritten on the next Radzen build.

For example, when I created my app I called it, MyTestApplication. I'd like the title to look a little more presentable such as My Test Application. I guess it would be nice to be able to modify it at page level too as per this post: Contents of titlebar

Thanks,

Paul.

2

Hi Paul,

Not from the Blazor side at the moment - only using JavaScript:

Our own demo is using the same technique:
https://blazor.radzen.com/

3

Just thought I'd share how we did it.
Add server/Pages/_Host.cshtml to ignore list so your code there doesn't get overwritten.
In _Host.cshtml add these lines in body (can't write the whole script containers in this forum post but you get the point):
script>
window.setTitle = (title) => {
document.title = title;
}
</script
Create a Blazor component in the Shared folder, for example PageTitle.razor.
Add this code in 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);
}

}
Now make a customclass for the page you want to change the title for, if you have a page called Main.razor you should also have a class for this page Main.razor.cs. You need to create Main.razor.custom.cs and add this code:
using System.Threading.Tasks;
using Microsoft.JSInterop;
namespace YourNamespace
{
public partial class MainComponent
{
IJSRuntime JsRuntime;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeVoidAsync("setTitle", "Your title");
}

}

}

Hope it helps someone!

1 Like