在 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();解决，所以试试

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

--- 编辑---

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

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>();