MudTable 不是双向绑定吗？

Question

我对 Blazor 和 MudBlazor 还很陌生，我有一个奇怪的问题无法解决。不确定这是否会有所作为，但以防万一，我使用的是 Visual Studio 2022 17.1.3。我有一个显示对象列表的 MudTable。我想进行基本的 CRUD 操作，但在删除时遇到问题。我的逻辑相当简单，当点击删除按钮时，它会弹出一个 MudDialog 来确认删除。如果您单击对话框中的删除按钮，它会调用我的 DeleteUser 函数并传入 ID，这样我就可以删除，然后删除确认消息中使用的名称。当我完成整个过程并进行调试时，一切看起来都应该如此。我得到了 ID 和名称，我可以知道删除按钮已被单击，我可以从数据库中删除，我可以确认我列表中的记录数是一个值，然后在我将其从列表中删除后减去一条记录列表，但之后对话框将消失，MudTable 仍然显示原始记录，而不是显示已删除记录消失的新列表。更重要的是，如果我再次单击删除按钮，会弹出对话框（您仍然可以在背景中看到 table），然后第一个删除的记录就会消失，这应该已经发生了。这就像双向绑定件不起作用。真正让我着迷的是它最初是有效的。所以，也许我做了一些事情让它无法正常工作，但我没有看到任何看起来不对劲的地方。

我正在寻找任何建议。我花了几个小时试图解决这个问题，但没有取得任何进展。

<MudTable Items="@applications" Filter="new Func<AaApp, bool>(Search)" Hover="true" Bordered="true" Striped="true" Dense="true" >        
        <ToolBarContent>
            <a class="btn btn-sm btn-success" @onclick="(e => CreateAsync())" >
                <i class="fas fa-plus"></i> New
            </a>
            <MudSpacer />
            <MudTextField @bind-Value="searchString" Placeholder="Search for an Application..." Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
        </ToolBarContent>
        <HeaderContent>
            <MudTh>ID</MudTh>
            <MudTh>
                <MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<AaApp, object>(x=>x.Name)">Application Name</MudTableSortLabel>
            </MudTh>
            <MudTh>Description</MudTh>
            <MudTh></MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd DataLabel="ID">@context.Id</MudTd>
            <MudTd DataLabel="Application Name">@context.Name</MudTd>
            <MudTd DataLabel="Description">@context.Description</MudTd>
            <MudTd DataLabel="">
                <MudButton OnClick="@((e) => DeleteUser(@context.Id, @context.Name))" Variant="Variant.Filled" Color="Color.Error">Delete Records</MudButton>
            </MudTd>
        </RowTemplate>
        <PagerContent>
            <MudTablePager PageSizeOptions="new int[] { 5,10,25,50}" />
        </PagerContent>
    </MudTable>

@code {

    private string searchString = "";
    private List<AaApp> applications;
    private AaApp application = new(); 
    MudMessageBox msgBox { get; set; }


    private async void DeleteUser(int id, string name)
    {
        var msgText = "Are you sure you want to delete: <b>" + name + "</b>.";
        bool? result = await _dialogService.ShowMessageBox("Delete Confirmation",(MarkupString) msgText, yesText: "Delete", cancelText: "Cancel");

 
        if (result ?? false)
        {
            //delete from database
            db.DeleteApp(id);

            //Remove and re-sort list.  
            applications.RemoveAll(i => i.Id == id);
            applications = applications.OrderBy(a => a.Name).ToList();
        }

    }

    protected override async Task OnInitializedAsync()
    {
        applications = await db.GetApps();
    }

    private async Task CreateAsync()
    {
        var parameters = new DialogParameters();
        parameters.Add("application", new AaApp());

        var dialog = await _dialogService.Show<AddOrUpdateDialog>("Creat A New App", parameters).Result;

        if (dialog.Data != null)
        {
            AaApp newApp = dialog.Data as AaApp;

            db.InsertApp(newApp);

            NavigationManager.NavigateTo("Groups");
        }
    }

    private bool Search(AaApp app)
    {
        if (app.Name is not null && app.Name.Contains(searchString, StringComparison.OrdinalIgnoreCase))
        {
            return true;
        }
        return false;
    }
}

Answer 1

我在没有 MudDialog 的情况下尝试了您的代码，它工作正常。当我使用对话框时，我得到了相同的结果，所以我调用了 StateHasChanged 方法，一切正常。

        applications.RemoveAll(i => i.Id == id);
        applications = applications.OrderBy(a => a.Name).ToList();
        StateHasChanged();

MudTable 不是双向绑定吗？

MudTable not two way binding?

blazor

blazor-server-side

mudblazor