如何在 Blazor 中的模态表单更新数据库后重新渲染 MudBlazor MudDataGrid

Question

我正在使用 MudDataGrid 和模态弹出窗口 (Blazorise.Modal) 中的数据编辑功能。单击行上的按钮将检索该数据的实例（单个记录）并将其放入模式中进行编辑。编辑后，单击模式弹出窗口上的提交按钮会将数据保存到数据库并关闭模式弹出窗口。这工作得很好，但之后我无法重新渲染（刷新）MudDataGrid，因此我所做的更改不会显示在 MudDataGrid 中。如何刷新网格？这是我到目前为止的代码

数据网格设置

<MudDataGrid ServerData="LoadGridData" T="AgencyGridViewModel" @ref="_dataGrid" ReadOnly="true">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Agencies</MudText>
        <MudSpacer />
        <MudTextField @bind-Value="_searchString" Placeholder="Search" Adornment="Adornment.Start" Immediate="true"
                      AdornmentIcon="@Icons.Material.Filled.Search" IconSize="MudBlazor.Size.Medium" Class="mt-0"></MudTextField>
    </ToolBarContent>
    <Columns>
        <PropertyColumn Property="x => x.Id" Hidden />
        <PropertyColumn Property="x => x.AgencyIdentifier" Hidden />
        <PropertyColumn Property="x => x.AgencyName" Title="Agency Name" />
        <PropertyColumn Property="x => x.AgencyAdd1" Title="Address 1" />
        <PropertyColumn Property="x => x.AgencyAdd2" Title="Address 2" />
        <PropertyColumn Property="x => x.AgencyTown_City" Title="Town/City" />
        <PropertyColumn Property="x => x.AgencyPostcode" Title="Postcode" />
        <TemplateColumn  CellClass="d-flex justify-end">
            <CellTemplate>
                <div @onclick:stopPropagation="true" @onclick:preventDefault="true">
                    <MudIconButton Size="@MudBlazor.Size.Small" Icon="@Icons.Material.Rounded.Edit" @onclick="() => EditItem(context.Item!)" />
                </div>
            </CellTemplate>
        </TemplateColumn>
    </Columns>
    <PagerContent>
        <MudDataGridPager T="AgencyGridViewModel" Disabled="false" />
    </PagerContent>
</MudDataGrid>

这会将数据加载到网格中

private async Task<GridData<AgencyGridViewModel>> LoadGridData(GridState<AgencyGridViewModel> state)
{
    lastGridState = state;
    var result = await AgencyService.GetPagedAsync(new PagedMessageRequest() { Page = state.Page, PageSize = state.PageSize }, this.CancelToken);
    Agencies = Mapper.Map<IEnumerable<AgencyDto>, IEnumerable<AgencyGridViewModel>>(result.Result);
    GridData<AgencyGridViewModel> data = new()
    {
        Items = Agencies.AsQueryable(),
        TotalItems = result.Count
    };
    return data;
}

这将激活模式弹出窗口（在页面中预定义）

private async Task<Task> EditItem(AgencyGridViewModel item)
{
    var result = await AgencyService.GetAgencyAsync(item.Id, item.AgencyIdentifier, this.CancelToken).ConfigureAwait(true);
    Agency = Mapper.Map<AgencyDto, AgencyViewModel>(result);
    return modalRef.Show();
}

当在模态弹出窗口上按下提交按钮时运行此代码（模态中有一个编辑表单）

private async void OnValidSubmit(EditContext context)
{
    if (context.Validate())
    {
        var agencyDTO = Mapper.Map<AgencyViewModel, AgencyDto>(Agency);
        var request = new UpdateAgencyRequest(agencyDTO);
        await AgencyService.SaveAsync(request, this.CancelToken).ConfigureAwait(false);
        _ = modalRef.Hide();
        await LoadGridData(lastGridState);
        await InvokeAsync(StateHasChanged);
    }
}

这工作正常，数据已保存并且模式关闭，但是网格永远不会刷新

根据我的理解，这一行应该重新渲染组件

await InvokeAsync(StateHasChanged);

但事实并非如此，我是不是搞错了？在这种情况下如何重新渲染（刷新）网格？

Answer 1

是的，它告诉 UI 重新渲染组件，但它不一定从数据库中获取数据来更新 UI。

在您的方法中，更新后进行页面刷新以从数据库中获取数据。

public class YourServiceName(NavigationManager navigationManager)
{
    private readonly NavigationManager _navigationManager = navigationManager;

    YourUpdateMethod()
    {
          Your update logic
          _navigationManager.Refresh(true);
    }
}

希望有帮助