Blazor 内联渲染怪异

Question

我正在使用 Blazor Bootstrap 并尝试在提交表单后更新页面。该表单只是创建一个数据库条目并返回 true 或 false。该页面使用的是“禁用”选项卡，具体取决于用户是否已提交表单。这是代码：

private void CreateNewTeam()
{
    OwnedTeam.Id = Guid.NewGuid().ToString();
    var TeamModel = new Data.Models.Teams()
        {
            TeamName = OwnedTeam.TeamName,
            TeamLogo = OwnedTeam.TeamLogo,
            TeamLeader = OwnedTeam.TeamLeader,
            ID = OwnedTeam.Id
        };

    bool Created = TeamService.CreateTeam(TeamModel);
    if (Created)
    {
        TeamsMessages.Add(CreateToastMessage(ToastType.Success, "New Team created."));
        teamCreated = true;
        InvokeAsync(StateHasChanged);
    }
    else
    {
        TeamsMessages.Add(CreateToastMessage(ToastType.Danger, "No Team created. If the issue persists contact admin."));
    }
}

布尔值在页面加载时设置为 false：

private bool teamCreated = false;

然后在 InitalizedAsync 上检查该用户的数据库中是否有任何活动的内容：

protected override async Task OnInitializedAsync()
{
    TeamInformation = TeamService.GetTeamInformation();
    var authstate = await GetAuthenticationStateAsync.GetAuthenticationStateAsync();
    var user = authstate.User;
    if (user?.Identity?.Name != null)
    {
        isAuthenticated = true;
        isMemberofAnyTeam = TeamInformation.Any(x => x.TeamMembers.Contains(user.Identity.Name));
        OwnedTeam = TeamInformation.FirstOrDefault(x => x.TeamLeader == user.Identity.Name)!;

        if (OwnedTeam == null)
        {
            OwnedTeam = new TeamListing { TeamLeader = user.Identity.Name };
        }
        teamCreated = !string.IsNullOrEmpty(OwnedTeam.TeamName);
    }
}

我遇到的问题是，当我提交表单时，禁用的功能不会被删除，直到我离开页面并返回。以下是 Blazor 页面详细信息：

<Tab Title="Create Team" Disabled="@(teamCreated)">
                <Content>
                    <EditForm Model="@OwnedTeam" OnValidSubmit="CreateNewTeam">
                        <DataAnnotationsValidator />
                        <label class="col-md-2 col-form-label">Name: <span class="text-danger">*</span></label>
                        <div class="col-md-10">
                            <InputText class="form-control" @bind-Value="OwnedTeam.TeamName" Placeholder="Team Name" />
                            <ValidationMessage For="@(() => OwnedTeam.TeamName)" />
                        </div>
                        <div class="col-md-12" style="padding-top: 10px">
                            <button class="btn btn-success" type="submit">Create New Team</button>
                        </div>
                    </EditForm>
                </Content>
            </Tab>
            <Tab Title="Manage Team" Disabled="@(!teamCreated)">
                <Content>
                    <div class="justify-content-center team-container">
                        <Card Class="team-card">
                            <-- ommited for brevity -->
                        </Card>
                    </div>
                </Content>
            </Tab>

我确信发生了一些愚蠢的事情，但我无法弄清楚，所以任何帮助将不胜感激。它只发生在提交表单时，就像它没有被正确地重新渲染一样，正如我所说，如果我离开或做任何其他事情，它就会完美地工作。例如，我在此页面上有另一个选项卡，只需单击该选项卡就足以让页面正常工作，这真是太神奇了。

Answer 1

我最终对系统的工作方式做了一些改变。最后为了解决这个问题，我采取了非常生硬的方法，并在 Razor 中的提交功能末尾实现了这行代码：

MyNavigationManager.NavigateTo（MyNavigationManager.Uri，forceLoad：true）;