如何在Blazor WebAssembly中用C#编程操作MudDataGrid行？

MudDataGrid采用数据源驱动的渲染逻辑，操作单个行本质是通过修改绑定的数据源，再配合Grid的API实现样式变更或行删除。以下是针对需求的具体实现方案：

一、编程方式修改行背景颜色 #

通过给数据模型添加状态标记，结合RowClassFunc动态绑定样式类，就能实现行背景色的切换：

1. 定义带状态标记的数据模型 #

给业务模型增加一个用于标记行样式的属性：

public class Customer
{
    public int Id { get; set; }
    public string Name { get; set; }
    // 标记该行是否需要高亮
    public bool IsHighlighted { get; set; }
}

2. 配置MudDataGrid并绑定样式逻辑 #

在Razor组件中，通过RowClassFunc根据模型状态返回对应的CSS类，同时添加触发样式变更的交互按钮：

<MudDataGrid @ref="_dataGrid" Items="@_customerList" RowClassFunc="@GetRowClass">
    <Columns>
        <PropertyColumn Property="x => x.Id" Title="ID" />
        <PropertyColumn Property="x => x.Name" Title="姓名" />
        <TemplateColumn Title="操作">
            <MudButton OnClick="@(() => ToggleRowHighlight(context))">切换背景色</MudButton>
        </TemplateColumn>
    </Columns>
</MudDataGrid>

3. 实现样式切换逻辑 #

在组件的C#代码块中，修改模型状态后触发Grid重新渲染：

private MudDataGrid<Customer> _dataGrid;
private List<Customer> _customerList = new()
{
    new Customer { Id = 1, Name = "张三" },
    new Customer { Id = 2, Name = "李四" },
    new Customer { Id = 3, Name = "王五" }
};

// 根据模型状态返回样式类
private string GetRowClass(Customer customer)
{
    return customer.IsHighlighted ? "bg-amber-200" : string.Empty;
}

// 切换指定行的高亮状态
private void ToggleRowHighlight(Customer targetCustomer)
{
    targetCustomer.IsHighlighted = !targetCustomer.IsHighlighted;
    // 触发Grid重新渲染，应用新样式
    _dataGrid.Render();
}

二、编程方式删除单个行 #

删除行直接操作绑定的数据源集合，再通知Grid刷新即可：

1. 添加删除按钮并实现逻辑 #

在Grid的列中添加删除按钮，点击时从数据源移除对应项：

<TemplateColumn Title="操作">
    <MudButton Color="Color.Error" OnClick="@(() => DeleteTargetRow(context))">删除</MudButton>
</TemplateColumn>

2. 实现删除逻辑 #

private void DeleteTargetRow(Customer targetCustomer)
{
    _customerList.Remove(targetCustomer);
    // 刷新Grid数据，移除对应行
    _dataGrid.RefreshDataAsync();
}

3. 通过ID或条件删除行 #

如果需要通过ID等条件定位行，直接查询数据源后删除：

private void DeleteRowById(int targetId)
{
    var customerToDelete = _customerList.FirstOrDefault(c => c.Id == targetId);
    if (customerToDelete != null)
    {
        _customerList.Remove(customerToDelete);
        _dataGrid.RefreshDataAsync();
    }
}

内容的提问来源于stack exchange，提问作者user2569050