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

Question

我正在尝试使用布局中的 CascadingParameter 以通用方式管理我网站的“加载”。
但是，在调用“onclick”加载之后，我无法从“继承页面”EditForm 的“OnValidSubmit”函数中停止“加载”。

让我给你看。
在我的 MainLayout 中，我设法显示正在加载的 h2 或页面的内容，无论它是什么：

<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;
   }
}

在从该 MainLayout 继承的其他页面中，我有一个 EditForm 将检查用户名和密码是否与数据库匹配。
如果没有错误，则应调用“加载”函数，然后在数据库中进行搜索，然后导航到主页。
因此，我将“加载”功能添加到我的 EditForm 的“onclick”中，当我单击按钮时，它会正确显示加载 h2：

    <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>

然后使用我的“OnValidSubmit”函数在数据库中进行研究：

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";
    }
}

但是我的 StopLoading() 函数没有更新我的页面！
即使我的调试器说我在布局中正确输入了函数，布局也不会输入 html 部分的“else”，也不会显示“@Body”。
我试图在布局中使用 this.StateHasChanged() （它唯一工作的地方）但我正在寻找另一个解决方案，因为它不会显示错误消息。

我该怎么做才能强制布局刷新 html 部分？ 谢谢

Answer 1

通常失败的重载可以通过使用StateHasChanged();来解决StateHasChanged(); 所以试试

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

- - 编辑 - -

如果这使局部变量丢失，则可以选择将这些变量移动到服务中。 在我的示例中，我仅针对加载和错误执行此操作，但可以像加载一样完成其余操作。

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

然后改变你的代码：

@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);
    }
}

设置错误信息：

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";
    }
}

不要忘记在 Program.cs 中注册服务

builder.Services.AddSingleton<LoadService>();