MudBlazor DataGrid：新增记录与记录验证问题求助

一、官方文档参考重点 #

直接查看MudBlazor官方文档的DataGrid章节，重点关注表单编辑模式、新增行操作和数据验证板块，里面有完整的代码示例和逻辑说明，能快速解决你的问题。

二、新增记录实现步骤 #

1. 给MudDataGrid添加引用，方便调用新增方法：
   在<MudDataGrid>标签里加上@ref="_dataGrid"
2. 给工具栏的“Add New”按钮绑定点击事件：
   把按钮改成 <MudButton OnClick="AddNewVendor">Add New</MudButton>
3. 修改数据集合类型：将IEnumerable<Vendor>改为List<Vendor>，方便新增时添加元素
4. 完善CommittedItemChanges事件，区分新增和编辑逻辑：

修改后的@code核心片段 #

private MudDataGrid<Vendor> _dataGrid;
private List<Vendor> theGridData; // 替换原IEnumerable类型

private async Task AddNewVendor()
{
    await _dataGrid.StartCreateItemAsync();
}

async Task CommittedItemChanges(Vendor item)
{
    Console.WriteLine("In CommittedItemChanges");
    // 根据VendorID判断是新增还是编辑（假设新增时VendorID为0）
    if (item.VendorID == 0)
    {
        await _VendorService.Create(item);
    }
    else
    {
        await _VendorService.Update(item);
    }
    await UpdateDataAsync();
}

三、编辑记录验证实现 #

1. 模型级验证（推荐） #

在Vendor模型类上添加DataAnnotations验证特性，MudDataGrid会自动识别并在提交时触发验证：

using System.ComponentModel.DataAnnotations;

public class Vendor
{
    public int VendorID { get; set; }
    
    [Required(ErrorMessage = "供应商名称不能为空")]
    public string VendorName { get; set; }
    
    [Url(ErrorMessage = "请输入有效的网址格式")]
    public string Website { get; set; }
    
    [EmailAddress(ErrorMessage = "请输入有效的销售邮箱")]
    public string SalesEmail { get; set; }
    
    [EmailAddress(ErrorMessage = "请输入有效的财务邮箱")]
    public string AccountsEmail { get; set; }
}

验证不通过时，DataGrid会自动在输入框下方显示错误提示，阻止提交操作。

2. 自定义验证逻辑 #

如果需要更复杂的验证，可在CommittedItemChanges事件中手动验证：

using System.ComponentModel.DataAnnotations;

async Task CommittedItemChanges(Vendor item)
{
    var validationContext = new ValidationContext(item);
    var validationResults = new List<ValidationResult>();
    
    // 执行全属性验证
    if (!Validator.TryValidateObject(item, validationContext, validationResults, validateAllProperties: true))
    {
        // 处理验证失败，比如打印错误或显示提示
        foreach (var result in validationResults)
        {
            Console.WriteLine($"验证错误：{result.ErrorMessage}");
        }
        return; // 验证失败，终止保存
    }
    
    // 验证通过，执行保存逻辑
    if (item.VendorID == 0)
    {
        await _VendorService.Create(item);
    }
    else
    {
        await _VendorService.Update(item);
    }
    await UpdateDataAsync();
}

四、完整修改后的页面代码 #

@page "/setup/vendors"

@inject VendorService _VendorService
@inject NavigationManager navigationManager

@attribute [Authorize(Policy = "PageAccessPolicy")]

<MudDataGrid T="Vendor"
            @ref="_dataGrid"
            MultiSelection="false"
            Items="@theGridData"
            SortMode="SortMode.Multiple"
            Filterable="true"
            QuickFilter="@_quickFilter"
            ReadOnly="@_readOnly"
            EditMode="DataGridEditMode.Form"
            StartedEditingItem="@StartedEditingItem"
            CanceledEditingItem="@CanceledEditingItem"
            CommittedItemChanges="@CommittedItemChanges"
            Bordered="true"
            Dense="true"
            EditTrigger="DataGridEditTrigger.Manual">
   <ToolBarContent>
       <MudText Typo="Typo.h6">Manage Vendors</MudText>
       <MudSpacer />
       <MudTextField @bind-Value="_searchString" Placeholder="Search" Adornment="Adornment.Start" Immediate="true"
                     AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
       <MudButton OnClick="AddNewVendor">Add New</MudButton>
   </ToolBarContent>
   <Columns>
       @*<PropertyColumn Property="x => x.VendorID" Title="VendorID" IsEditable="false"/>*@
       <PropertyColumn Property="x => x.VendorName" Title="VendorName" />
       <PropertyColumn Property="x => x.Website" Title="Website" />
       <PropertyColumn Property="x => x.SalesEmail" Title="SalesEmail" />
       <PropertyColumn Property="x => x.AccountsEmail" Title="AccountsEmail" />
       <TemplateColumn CellClass="d-flex justify-end">
           <CellTemplate>
               <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Edit" OnClick="@context.Actions.StartEditingItemAsync" />
           </CellTemplate>
       </TemplateColumn>
   </Columns>
   <PagerContent>
       <MudDataGridPager T="Vendor" />
   </PagerContent>
</MudDataGrid>

@code {
   private MudDataGrid<Vendor> _dataGrid;
   private List<Vendor> theGridData;
   private string _searchString;

   private bool _readOnly = false;

   protected override async Task OnInitializedAsync()
   {
       await UpdateDataAsync();
   }


   async Task UpdateDataAsync()
   {
       theGridData = (await Task.Run(() => _VendorService.GetAll())).ToList();
   }

   // quick filter - filter gobally across multiple columns with the same input
   private Func<Vendor, bool> _quickFilter = x =>
   {
       if (string.IsNullOrWhiteSpace(_searchString))
           return true;

       if (x.VendorName.Contains(_searchString, StringComparison.OrdinalIgnoreCase))
           return true;

       if (x.Website.Contains(_searchString, StringComparison.OrdinalIgnoreCase))
           return true;


       return false;
   };

   // events
   void StartedEditingItem(Vendor item)
   {
       Console.WriteLine("In StartedEditingItem");
       // _events.Insert(0, $"Event = StartedEditingItem, Data = {System.Text.Json.JsonSerializer.Serialize(item)}");
   }

   void CanceledEditingItem(Vendor item)
   {
       Console.WriteLine("In CanceledEditingItem");
       // _events.Insert(0, $"Event = CanceledEditingItem, Data = {System.Text.Json.JsonSerializer.Serialize(item)}");
   }

   async Task AddNewVendor()
   {
       await _dataGrid.StartCreateItemAsync();
   }

   async Task CommittedItemChanges(Vendor item)
   {
       Console.WriteLine("In CommittedItemChanges");

       // 模型验证示例（如果用自定义验证，替换以下逻辑）
       var validationContext = new ValidationContext(item);
       var validationResults = new List<ValidationResult>();
       if (!Validator.TryValidateObject(item, validationContext, validationResults, validateAllProperties: true))
       {
           foreach (var result in validationResults)
           {
               Console.WriteLine($"验证错误：{result.ErrorMessage}");
           }
           return;
       }

       if (item.VendorID == 0)
       {
           await _VendorService.Create(item);
       }
       else
       {
           await _VendorService.Update(item);
       }
       await UpdateDataAsync();
       // _events.Insert(0, $"Event = CommittedItemChanges, Data = {System.Text.Json.JsonSerializer.Serialize(item)}");
   }

}

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