Category: Blazor

Blazor: Modifying header meta and link elements

by Geir Sigurður, posted in .net5, Blazor, English, Technology

When creating web applications, we all try to create good SEO tags in the header of each page. Modifying the meta tags based on page content is a standard practice. In Blazor, this is not obvious as the _host.cshtml is rendered before the Blazor execution pipeline.

There was a tag extension in the preview of Blazor 5 which didn’t make it into the release and there are no news if this is continued or not (just a note from a program manager that this didn’t make it into the release) … so I guess this will be solved across the board in next release …. ? 🙂

Fortunately we have Toolbelt.Blazor.HeadElement (https://github.com/jsakamoto/Toolbelt.Blazor.HeadElement/)

This works nicely if you make sure to use server prerendering as explained in the documentation. The default setup options result in (at least) the Facebook screen scraping does not collect the updated title and meta elements, but only the original ones (which are the site static default ones).

This is all fixed with …. 

 app.UseHeadElementServerPrerendering();

…. as described in the documentation. Check out: https://golf80.com/Rounds/33957

Blazor OnClick doesn’t fire

by Geir Sigurður, posted in Blazor, English, Technology

#notetoself … Once again, scratching my head for way to long about something that turns out to have a simple workaround #devlife

On one of my (new) blazor pages (/Bookings/TeeTimes), onclick event was not firing. Didn’t matter what kind of flavour of onclick declaration I used, the event was not getting fired.

Until of course I noticed that this page was producing a lot of blazor loading errors:

Turns out I was running the project (as usual) from command line (dotnet) and had a shortcut in my browser to go directly to this page. Seems like that sets the “document root” to “Bookings” and from that it tries to find the blazor files.

Starting from the root page and navigating to the Bookings/TeeTimes page solved the problem, with the permanent fix being adding this within the head element of the layout

<base href="/" />