Why are CascadingValue's null when accessing the page directly?

Question

I have an application where almost every page is going to need to reference their organization record, so in MainLayout.razor I have this code

@code {

  Organization CurrentOrganization { get; set; }

  protected override async Task OnInitializedAsync()
  {
    await base.OnInitializedAsync();
    CurrentOrganization = await GetOrganization();
  }

}

<CascadingValue Name="CurrentOrganization" Value="@CurrentOrganization">
  // This wraps the entire page body
</CascadingValue>

Then in my page I reference the CascadingValue like this

@page "/organization"
@code {

  [CascadingParameter(Name = "CurrentOrganization")]
  Organization CurrentOrganization { get; set; }

  protected override async Task OnParametersSetAsync()
  {
      await base.OnParametersSetAsync();
      // Use CurrentOrganization
  }

}

If I launch the website the OnInitializedAsync method in MainLayout is called (twice, and both times CurrentOrganization is set properly) and if I click on the Organization page, the OnParametersSetAsync method fires and the CurrentOrganization isn't null and everything works fine.

If I go directly to the Organization page URL in the browser though, OnInitializedAsync in MainLayout fires once, then the OnParametersSetAsync method fires but the CurrentOrganization is now null.

What's different about accessing the page directly through the URL rather than clicking a link to get to it? If MainLayout is setting the CascadingValue before the page is loaded, why is the CascadingParameter null?

do it work if you make remove the await from await GetOrganization(); I might be that it has run on to setting up the app before it has had a reply so at this point it will be null the question is if you protect the app from this being null does get called a second time after the async task has returned? — David Masterson
Does it work if you call CurrentOrganization = await GetOrganization(); before await base.OnInitializedAsync(); ? — agua from mars
@aguafrommars, unfortunately that didn't seem to do anything. — Brandon
@DavidMasterson, CurrentOrganization is never null in the MainLayout method, it always gets set properly. I did what you suggested though and put a null check in the OnParametersAsync and now it looks like it does get called twice, with the second time having the CurrentOrganization set. I'm not sure why it's doing what it's doing, but it seems to work this way. If you want to post that as an answer I can accept it. — Brandon

David Masterson David Masterson · Accepted Answer · 2019-11-21T21:35:46

What seems to be happening is when you go straight to the Organization page by URL is that

You start the await GetOrganization();
The app moves on to setting up the Organization Page and fires the OnParametersSet
with the still null CurrentOrganization
The Task Completes and sets the CurrentOrganization Parameter
The OnParametersSet is raised again this time with the CurrentOrganization set

When you do it manually inside the app I guess the await GetOrganization() completes before you have time to click the link.

If you handle the null the first time you enter OnParametersSet then consume it on the second pass when it is not null.

OR it might just be as simple as calling

 CurrentOrganization = await GetOrganization(); 
 base.OnInitializedAsync();

as 'agua from mars' suggested

Why are CascadingValue's null when accessing the page directly?

1 Answers