Search code examples
.netrazor-pagesblazor-server-side

Blazor page routing integration into existing razor page app

I followed the documentation here as best as I could. Microsoft Doc

I've added App.razor, _Imports.razor and _Host.cshtml as directed. _host app.razor

enter image description here

the test page is this enter image description here

I've updated the startup blazorHub() and MapFallbackToPage() endpoints

enter image description here

If I browser to existing razor Page ClientDashboard.cshtml and have it load the component the blazor page will load and function. So I know my blazor.js is loading correctly

@(await @Html.RenderComponentAsync<Components.ClientDashboard.ClientManagement>(RenderMode.Server, new{clientId = @Model.ClientID}))

But I'm not wanting to bypass this and just actual routing to navigate to my blazor pages localhost.com/ClientDashboard/42 for example.

But I'm currently getting page error when trying to browse to https://localhost:5001/TestRouting page

enter image description here enter image description here

I'm unsure what I'm missing or how to debug this and guidance would be appreciated!

Update I tried PMC suggestion but got different error page came up blank with this error in browser tools

enter image description here

enter image description here

Update 2

Moved all files into the Pages directory just in case there was an issue with the locations. Also tried a few versions of the host.cshtml

enter image description here

still, get null reference exception either directly on the page or in the console of the browser.

Referenced PMC Guide for the above different tweaks

I'm sure I'm missing something stupid here I just can't seem to figure out what.

Update 3

I updated _host file to match Qing Guo most of the change listed I had already done.

Default _layout page loads but not the blazor component I'm trying

enter image description here

Solution

  • Try change

    <Router AppAssembly="typeof(App).Assembly">

    to this in your App.Razor file

    <Router AppAssembly="typeof(Program).Assembly">

    I followed this guide and it worked for me with Razor Pages on Dot net 5.0, to implement Blazor components with a direct route also.