MudBlazor DataGrid 问题 - 如何控制自动生成的保存按钮的操作

Question

我正在尝试自学 MudBlazor，因为我厌倦了自己处理所有 CSS。它是如此美好和强大，我喜欢它！

不过我确实遇到了一个小问题。假设您想要使用 DataGrid 并让列根据其模型属性自动生成表单。代码示例在这里：https://www.mudbazor.com/components/datagrid#editing搜索编辑示例。

在代码中，有一个小的编辑按钮，当您单击它时，会出现自动生成的表单。那里有一个接受和取消按钮。问题是：

如何控制自动生成表单中的接受按钮？

我知道我可以更改 OnClick 属性，以便它使用我自己的函数，但随后自动生成的表单将不会出现。我实际上想使用它，但我只需要控制“接受”按钮的操作。在他们提供的示例中，按钮正确更新了列表，但我需要推送到数据库中。我们的想法是，如果可以的话，避免迭代 300-1000 个项目。

谢谢！

BMET1.

这张图片显示了我在说什么

---

@using System.Net.Http.Json @using MudBlazor.Examples.Data.Models @inject HttpClient httpClient

<MudDataGrid T="Element" Items="@Elements.Take(4)" ReadOnly="@_readOnly" EditMode="@(_isCellEditMode ? DataGridEditMode.Cell : DataGridEditMode.Form)"
    StartedEditingItem="@StartedEditingItem" CanceledEditingItem="@CanceledEditingItem" CommittedItemChanges="@CommittedItemChanges"
    Bordered="true" Dense="true" EditTrigger="@(_editTriggerRowClick ? DataGridEditTrigger.OnRowClick : DataGridEditTrigger.Manual)">
    <Columns>
        <PropertyColumn Property="x => x.Number" Title="Nr" IsEditable="false" />
        <PropertyColumn Property="x => x.Sign" />
        <PropertyColumn Property="x => x.Name" />
        <PropertyColumn Property="x => x.Position">
            <EditTemplate>
                <MudSelect @bind-Value="context.Item.Position" Required RequiredError="You must select a Position!!!" Margin="@Margin.Dense">
                    <MudSelectItem Value="0">zero</MudSelectItem>
                    <MudSelectItem Value="1">one</MudSelectItem>
                    <MudSelectItem Value="17">seventeen</MudSelectItem>
                </MudSelect>
            </EditTemplate>
        </PropertyColumn>
        <PropertyColumn Property="x => x.Molar" Title="Molar mass" />
        <TemplateColumn Hidden="@(_isCellEditMode || _readOnly || _editTriggerRowClick)" CellClass="d-flex justify-end">
            <CellTemplate>
                <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Edit" OnClick="@context.Actions.StartEditingItemAsync" />
            </CellTemplate>
        </TemplateColumn>
    </Columns> </MudDataGrid>

<div class="d-flex flex-wrap mt-4">
    <MudSwitch @bind-Checked="@_readOnly" Color="Color.Primary">Read Only</MudSwitch>
    <div class="d-flex justify-start align-center">
        <p class="mud-typography mud-typography-body1 mud-inherit-text mr-2">Form</p>
        <MudSwitch @bind-Checked="@_isCellEditMode">Cell</MudSwitch>
    </div>
    <div class="d-flex justify-start align-center">
        <p class="mud-typography mud-typography-body1 mud-inherit-text mr-2">Manual</p>
        <MudSwitch @bind-Checked="@_editTriggerRowClick">On Row Click</MudSwitch>
    </div> </div>

<MudExpansionPanels Style="flex:1">
    <MudExpansionPanel Text="Show Events">
        @foreach (var message in _events)
        {
            <MudText Typo="@Typo.body2">@message</MudText>
        }
        @if(_events.Count > 0) 
        {
            <div class="d-flex">
                <MudSpacer/>
                <MudButton Class="mt-3" ButtonType="ButtonType.Button" Variant="Variant.Filled" OnClick="@(() =>
_events.Clear())">Clear</MudButton>
            </div>
        }
    </MudExpansionPanel> </MudExpansionPanels>

@code {
    private IEnumerable<Element> Elements = new List<Element>();
    private bool _readOnly;
    private bool _isCellEditMode;
    private List<string> _events = new();
    private bool _editTriggerRowClick;

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }

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

    void CanceledEditingItem(Element item)
    {
        _events.Insert(0, $"Event = CanceledEditingItem, Data = {System.Text.Json.JsonSerializer.Serialize(item)}");
    }

    void CommittedItemChanges(Element item)
    {
        _events.Insert(0, $"Event = CommittedItemChanges, Data = {System.Text.Json.JsonSerializer.Serialize(item)}");
    } }

Answer 1

我想我找到了合适的方法。这不是我希望的方式，但在紧要关头它会做的。

在示例代码中，有一个回调函数，名为 CommiedItemChanges。当然，您可以使用您的类之一更改元素类型，然后简单地将“项目”推送到函数内的数据库。

void CommittedItemChanges(Element item)
    {
//Insert your code for pushing into the DB here. 
        _events.Insert(0, $"Event = CommittedItemChanges, Data = {System.Text.Json.JsonSerializer.Serialize(item)}");
    } }

如果有人知道更好的方法，请告诉我。我很想了解更多。我发现的方法的唯一缺点是它仍然会弄乱列表，但对此您无能为力。您必须使用提供的其他功能来创建临时保存的项目。