如何以 Blazor 形式重置模型？

Question

在我的 Blazor 应用程序中，我有一个项目列表。单击其中一项将打开一个对话框组件，该组件作为参数。对话框中有一个 EditForm：

<div class="modal-container">
    <div class="modal">
        <EditForm Model="@Item" OnValidSubmit="SaveForm">
            <p><input type="text" @bind="@Item.Title" /></p>
            <p><input type="button" @onclick="Cancel" value="Cancel" /><input type="submit" value="Save" /></p>
        </EditForm>
    </div>
</div>

@code {

    [Parameter]
    public EventCallback<Item> Callback { get; set; }

    [Parameter]
    public Item Item { get; set; } = new();
    public Item OriginalItem => Item; // <= First attempt

    protected override async Task OnInitializedAsync()
    {
        OriginalItem = Item; // <= Second attempt
    }

    async Task Cancel
    {
        Item = OriginalItem; // <= This doesn't work

        await Callback.InvokeAsync(null);
    }

    async Task SaveForm
    {
        // ...
    }
}

当我更改 Item.Title 值并单击“取消”按钮并关闭对话框时，项目模型仍在更新，我在项目列表中看到了更改。这就是 Blazor 的工作方式，但在这种情况下不是我想要的。

我尝试通过保留原始项目模型参数的副本并在取消函数中覆盖它来“重置”项目模型，但这似乎不起作用。

什么是正确的做法？

据我所知，情况恰恰相反；单击取消按钮设置 OriginalItem = Item。我真的不明白为什么。

Answer 1

这里回答了这个问题

Answer 2

我假设你的对话框在一个组件中，该组件传递了一个 Item 类型的参数？不管怎样，我遇到了和你一样的问题，很容易就解决了。

为您的对话框组件提供本地属性。

Public string Title {get;set;}

在 OnInitializedAsync 中，将您的本地属性设置为您的项目的值属性

this.Title = Item.Title

将对话框的输入字段绑定到其本地属性而不是项目属性。

<Input @bind=Title>

当您点击取消时什么都不做。只关闭对话框。

点击保存后，将项目属性设置为本地属性的值

Item.Title = Title

应该可以解决问题

如何以 Blazor 形式重置模型？

How to reset model in Blazor form?

c#

blazor