1

I am building a razor page that contains a number of razor components that utilize Blazor Bootstrap doughnut charts and bar charts on a Blazor application. One of the elements on the page is a link to a different page on my application. When I open the page and try to click the link before all of the components have rendered, it throws the following exception:

Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'id')
TypeError: Cannot read properties of null (reading 'id')

The error message indicates this exception is thrown in the sub-components that contain the Bootstrap charts. The Bootstrap components follow the the same initialization procedure that is in their demos (https://demos.blazorbootstrap.com/charts/doughnut-chart) where I am configuring the data and options in OnInitialized() and initializing the chart in OnAfterRenderAsync(...). Here is sample code from one of the components that fail. Error indicates the exception is thrown at PreviousDonut.InitializeAsync...

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await CurrentDonut.InitializeAsync(CurrentUsageData, CurrentUsageOptions);
    }
    await base.OnAfterRenderAsync(firstRender);
}

And where it tries to navigate on button click...

private void Navigate()
{
    string url = $"/Dashboard";
    NavManager.NavigateTo(url);
}

I am trying to navigate between pages without having to wait for every component to be rendered.

I tried changing the link element from an anchor element to a button that calls NavigationManager.NavigateTo(link) with no success.

I tried setting the forceReload parameter in the NavigateTo() call which solves this problem, but resets the user authentication, so I cannot use this solution.

Improve this question
6
  • 1
    You can't make calls via IJSRuntime until after the first render. If you want to navigate before first render you can do so via NavigationManager. It would help if you could post the relevant parts of your code to help others understand your issue. Commented Nov 10, 2023 at 18:37
  • [Polite] An error means not a lot without sight of the code that generates it. "I am trying to navigate between pages without having to wait for every component to be rendered.". Why? Is that a normal use case? Commented Nov 10, 2023 at 20:52
  • @KurtHamilton Thanks for the info. I updated the question to include the part of my code that causes the error. I am currently using NavigationManager.NavigateTo() and am still running into the same problem. Although setting the forceReload parameter solves the problem, it resets previously established user authentication. Commented Nov 10, 2023 at 21:30
  • @MrCakaShaunCurtis I have added the code that throws the exception. The page usually takes quite some time to load every component which is far from ideal for users simply trying to use the link (which is the first component that renders nearly instantly). Please let me know if there are any specific parts of the code that may help better your understanding of the problem. Commented Nov 10, 2023 at 21:39
  • I'm pretty sure this is an issue with the Blazor Bootstrap code. What you really need to be doing is passing a cancellation token into CurrentDonut.InitializeAsync and calling it, but there's no option to do so. Without a deep look into their code I can't be sure, but there's probably some calls being made against disposed objects. How to solve - no idea [it's third party code]. Someone with more knowledge of Blazor Bootstrap may be able o provide an answer. Commented Nov 10, 2023 at 21:51
Related questions
1
How to navigate in a WPF Blazor Hybrid app
1
Blazor StateObject lost after Navigation to next page
5
Blazor Web App (.NET 8): How to use a server rendered component, on a WebAssembly rendered page?
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.