如何在MudBlazor的MudDataGrid中实现特定记录删除功能？

步骤1：修改删除按钮，传递当前行数据 #

在你的CellTemplate里，把删除按钮的OnClick事件改成传入当前行的上下文对象（即当前要删除的Menuitemlist记录）：

<Column T="Menuitemlist" StickyLeft="true">
    <CellTemplate>
        <!-- 通过context获取当前行的Menuitemlist对象，传递给删除方法 -->
        <MudIconButton OnClick="@(() => PrcdBtnClick(context))" Color="@Color.Default" Icon="@Icons.Material.Filled.Delete" />
    </CellTemplate>
</Column>

步骤2：实现删除方法，处理记录移除 #

在代码逻辑部分（比如.razor.cs文件或razor页面的@code块），定义PrcdBtnClick方法，接收当前行的Menuitemlist对象，从中获取ID并移除记录：

// 假设你的Elements是List<Menuitemlist>类型
private List<Menuitemlist> Elements = new List<Menuitemlist>();

private void PrcdBtnClick(Menuitemlist itemToDelete)
{
    // 获取要删除记录的ID（根据你的Menuitemlist类实际字段调整，比如itemToDelete.Id）
    var deletedItemId = itemToDelete.Id;
    
    // 从集合中移除该记录
    Elements.Remove(itemToDelete);
    
    // 如果使用的是List，需要手动通知UI更新
    StateHasChanged();
    
    // 这里还可以添加后端API调用，比如删除数据库中的记录
    // await DeleteItemFromDatabase(deletedItemId);
}

优化建议：使用ObservableCollection自动刷新UI #

如果你不想每次删除后手动调用StateHasChanged()，可以把Elements的类型改成ObservableCollection<Menuitemlist>，它会自动监听集合变化并更新UI：

private ObservableCollection<Menuitemlist> Elements = new ObservableCollection<Menuitemlist>();

private void PrcdBtnClick(Menuitemlist itemToDelete)
{
    var deletedItemId = itemToDelete.Id;
    Elements.Remove(itemToDelete);
    // 无需调用StateHasChanged()，ObservableCollection会自动触发UI更新
    // await DeleteItemFromDatabase(deletedItemId);
}

完整修改后的MudDataGrid代码示例 #

<MudItem xs="12" Class="pt-0">
   <div id="unique_id_scroll_section" class="ma-0" style="height:200px;overflow: auto">
   <MudDataGrid Items="@Elements" Hover="true" Striped="true" Dense="true">
          <Columns>
                <Column T="Menuitemlist" StickyLeft="true">
                     <CellTemplate>
                          <MudIconButton OnClick="@(() => PrcdBtnClick(context))" Color="@Color.Default" Icon="@Icons.Material.Filled.Delete" />
                     </CellTemplate>
                </Column>
                <Column T="Menuitemlist" Field="ItemName" Title="Name" />
                <Column T="Menuitemlist" Title="Qty" Style="width:10px" />
                <Column T="Menuitemlist" Field="OptionalSalesPrice" Title="Price" Style="width:10px" />
                <Column T="Menuitemlist" Title="Total" Style="width:10px" />
          </Columns>
   </MudDataGrid>
   </div> 
</MudItem>

@code {
    // 替换成你的实际数据集合类型
    private ObservableCollection<Menuitemlist> Elements = new ObservableCollection<Menuitemlist>();

    private void PrcdBtnClick(Menuitemlist itemToDelete)
    {
        // 获取记录ID
        var itemId = itemToDelete.Id;
        // 移除记录
        Elements.Remove(itemToDelete);
        // 可选：调用后端接口删除数据库中的对应记录
        // _ = DeleteItemAsync(itemId);
    }

    // 假设的Menuitemlist类，根据你的实际结构调整
    public class Menuitemlist
    {
        public int Id { get; set; }
        public string ItemName { get; set; }
        public decimal OptionalSalesPrice { get; set; }
        // 其他字段...
    }
}

内容的提问来源于stack exchange，提问作者Danul Hivi Vihan