blazorblazor-server-side

Blazor Server Side - MainLayout cascading parameter always NULL in Index


I have created a class of NewStuff.cs, and am attempting to send it down from my MainLayout into all of my other components, beginning with the Index.razor component. But on the Index side, it keeps coming up NULL. I have debugged my class variable to make sure that it is not null and has data on the MainLayout.razor component.

My partial code:

<div class="page">
    <main>
        <div style="height:200px;border-bottom-style:solid;background-color:steelblue">
        </div>
        <div>
            <NavMenu />
        </div>
        <CascadingValue Value="@newStuff">
        <article class="content px-4">
            @Body
        </article>
        </CascadingValue>
    </main>
</div>

@code{
    [CascadingParameter]
    private NewStuff newStuff { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        ///Code to populate newStuff to ensure that it isn't null.
    }
}

And my relevant, partial code on the index side:

@code{
    [CascadingParameter]
    private Task<AuthenticationState> authenticationState { get; set; }
    [CascadingParameter]
    private NewStuff newStuff { get; set; }
    private String username { get; set; }
    private TennantInfoDTO tennantInfo { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        var authState = await authenticationState;
        username = authState.User.Identity.Name;
        tennantInfo = await _tennantInfoRepository.Get(newStuff);
    }

}

It is here while debugging the parameter that I find it is now null, and the values that were previously there have disappeared. Have I overlooked something in my code when dealing with cascading parameters in Blazor?

Update -- added App.razor:

@using App_Database.Data;

<CascadingAuthenticationState>
<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
            <NotAuthorized>
                <LoginRedirect/>
            </NotAuthorized>
        </AuthorizeRouteView>
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>
</CascadingAuthenticationState>


@code{

}

Solution

  • I believe I have fixed the issue.

    I moved my cascading parameter in the MainLayout.razor outside of the <div class="page">.

    This appears to have worked:

    <CascadingValue Value="@newStuff">
    <div class="page">
        <main>
            <div style="height:200px;border-bottom-style:solid;background-color:steelblue">
            </div>
            <div>
                <NavMenu />
            </div>
            <article class="content px-4">
                @Body
            </article>
        </main>
    </div>
    </CascadingValue>