MudBlazor DataGrid - 添加新记录/验证记录

Question

开始使用 Mudblazor 并使用其组件代码创建数据网格。我无法找到任何可以帮助我添加新记录并验证已编辑记录的内容。

有人有 doco 可以指点我吗？

到目前为止，我有以下工作可以显示和进行编辑，但不确定下一步该去哪里。

   @page "/setup/vendors"



@inject VendorService _VendorService
@inject NavigationManager navigationManager


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


<MudDataGrid T="Vendor"
            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>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 IEnumerable<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());
   }

   // 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 CommittedItemChanges(Vendor item)
   {
       Console.WriteLine("In CommittedItemChanges");

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

}

Answer 1

如果将 ref 标记添加到 DataGrid，则可以在新对象上手动调用 SetEditingItemAsync。

例如

            <MudDataGrid 
            @ref="dataGrid">

然后，大概来自按钮 OnClick 处理程序；

dataGrid.SetEditingItemAsync(new Item());

然后您可以使用 CommiedItemChanges 正常处理它