当我从函数调用时，在 onclick 事件之后 Blazor CascadingParameter 不会更新布局

Question

I am trying to use CascadingParameter from my Layout to manage the "loading" of my website in a generic way.
But I am not managing to stop the "loading" from the "OnValidSubmit" function of the "inherited page" EditForm, after I have called on "onclick" loading.

Let my show you.
In my MainLayout, I am managing to display a loading h2 or the content of a page whatever it is :

<CascadingValue Value="this">
@if (load == true)
{
    <h2>Loading...</h2>
} else
{
    @Body
}
</CascadingValue>

@code 
{ 
   public bool load = false;

   //---------------------------
   // Setters
   public void Loading()
   {
      load = true;
   }

   public void StopLoading()
   {
      load = false;
   }
}

In an other pages that inherits from that MainLayout, I have an EditForm that will check if username and password matches the database.
If no error, it should call the "Loading" function and then process the search in the database, and then Navigate to the home page.
So I added the "Loading" function to the "onclick" of my EditForm and it correctly displays the loading h2 when I click on the button :

    <EditForm Model="@user" OnValidSubmit="@TriggerLogin">
       <InputText id="name" placeholder="Email" @bind-Value="user.Username" inputmode="email" />
       <InputText id="password" placeholder="Mot de passe" @bind-Value="user.Password" type="password" inputmode="text" />
       <button class="button-pink" type="submit" @onclick="Layout.Loading">Se connecter</button>
   </EditForm>

And then process to make my research in the database with my "OnValidSubmit" function :

private async Task TriggerLogin()
{
    if (members.Login(user) == true)
    {
        // Do stuff with accesstoken
        Layout.StopLoading();
        NavigationManager.NavigateTo("/commandes");
    }
    else
    {
        Layout.StopLoading();
        error = "Wrong password or username";
    }
}

BUT my StopLoading() function is not updating my page !
Even if my debugger says that I enterred correctly the function in the Layout, the layout is not entering the "else" of the html part and doesn't display the "@Body".
I tried to use this.StateHasChanged() in the layout (the only place it worked) but I am searching for another solution because then it doesn't show the error message.

How can I do to force only the layout to refresh the html part ? Thanks

Answer 1

Normally failing reload can be solved by using StateHasChanged(); So try

public void StopLoading()
{
   load = false;
   InvokeAsync(StateHasChanged);
}

--- Edit ---

In case this make looses the local variables it would be an option to move those variables into a Service. In my sample I do it only for load and error but rest can be done like load.

public class LoadService {
    public bool Load {get;set;}
    public String ErrorMessage {get;set;}
}

Then change you code:

@inject LoadService LoadService 
//... html part
@if (LoadService.Load== true)
{
    <h2>Loading...</h2>
}
//... html part
@code 
{ 
   //... html part
   public void StopLoading()
   {
      LoadService.Load = false;
      InvokeAsync(StateHasChanged);
    }
}

Set the error Message:

private async Task TriggerLogin()
{
   if (members.Login(user) == true)
   {
       // Do stuff with accesstoken
       Layout.StopLoading();
       NavigationManager.NavigateTo("/commandes");
    }
    else
    {
        Layout.StopLoading();
        LoadService.ErrorMessage = "Wrong password or username";
    }
}

Don't forget to register the Service in Program.cs

builder.Services.AddSingleton<LoadService>();