Blazor中实现可取消的双向绑定内联编辑方案咨询

Blazor没有内置的双向绑定撤销机制，你需要在编辑开始时手动保存原数据的副本，点击取消时用副本恢复原对象的状态。

具体实现步骤：

• 新增变量存储编辑前的原始数据副本
• 进入编辑模式时，创建当前行数据的深拷贝（避免引用关联导致副本同步修改）
• 点击取消时，用副本覆盖原数据的属性值，退出编辑模式
• 点击保存时，保留修改（或提交到数据库），退出编辑模式

修改后的完整代码如下：

@page "/inlineeditingsample"

<PageTitle>Inline Editing Sample</PageTitle>

<h1>Inline Editing Sample</h1>

@if (_items == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Description</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in _items)
            {
                var link = $"TableSampleDetails/{@item.ID}";
                <tr>
                    @if (item == _editItem)
                    {
                        <td>
                        @item.ID
                        </td>
                        <td><input type="text" class="form-control" @bind="@item.Title"/></td>
                        <td><input type="text" class="form-control" @bind="@item.Description" /></td>
                        <td>
                            <button type="button" class="btn btn-link" @onclick="() => Cancel(item)">Cancel</button>
                            <button type="button" class="btn btn-link" @onclick="() => Save(item)">Save</button>
                        </td>
                    }
                    else
                    {
                        <td>
                            <NavLink href="@link">@item.ID</NavLink>
                        </td>
                        <td>@item.Title</td>
                        <td>@item.Description</td>
                        <td>
                            <button type="button" class="btn btn-link" @onclick="() => Edit(item)">Edit</button>
                            <button type="button" class="btn btn-link" @onclick="() => Delete(item)">Delete</button>
                        </td>
                    }
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private DAL.SampleObject? _editItem;
    private DAL.SampleObject? _originalItem; // 新增：存储原始数据副本
    private List<DAL.SampleObject> _items;

    private DAL.SampleDal _dal = new DAL.SampleDal();

    private void Edit(DAL.SampleObject item)
    {
        _editItem = item;
        // 创建深拷贝，这里用Json序列化方式，需要确保SampleObject可序列化
        var json = System.Text.Json.JsonSerializer.Serialize(item);
        _originalItem = System.Text.Json.JsonSerializer.Deserialize<DAL.SampleObject>(json);
        // 如果SampleObject是简单类，也可以手动复制属性：
        // _originalItem = new DAL.SampleObject { ID = item.ID, Title = item.Title, Description = item.Description };
    }

    private void Save(DAL.SampleObject item)
    {
        _editItem = null;
        _originalItem = null;

        // 调用仓储更新数据
        // 完成后显示提示
    }

    private void Delete(DAL.SampleObject item)
    {
        _editItem = null;
        _originalItem = null;

        // 调用仓储删除数据
        // 完成后显示提示
        _items.Remove(item);
    }

    private void Cancel(DAL.SampleObject item)
    {
        if (_originalItem != null)
        {
            // 用原始副本覆盖当前数据
            item.Title = _originalItem.Title;
            item.Description = _originalItem.Description;
        }
        _editItem = null;
        _originalItem = null;
    }

    protected override async Task OnInitializedAsync()
    {
        var items = await _dal.ListObjectsAsync(0, int.MaxValue);
        _items = items.ToList();
    }
}

说明：

• 深拷贝的方式：如果SampleObject是简单的POCO类，手动复制属性更高效；如果类结构复杂，用Json序列化反序列化是通用的深拷贝方法（需要确保类可序列化，没有循环引用）。
• 这样修改后，编辑时输入框的修改只会作用于原对象，但点击取消时会恢复到编辑前的状态，不会影响原数据的持久化版本，直到点击保存才提交修改。

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