在 Editform 中单击取消（重置按钮）时，Blazor 将模型重置为初始状态

Question

我有一个使用 Blazor 服务器端和 Editform 的 crud 操作。除了在编辑现有记录后尝试重置表单时，一切都很好。

当我更改表单控件中的某些内容然后单击重置按钮时，它会关闭表单。我更改的数据已更新到 HTML 表，但未在数据库中更新。

无论如何我可以防止这种情况吗？

这是我的模型：

public class Address  
{
    public string province { get; set; }
    public string address { get; set; }
    public string contact_name { get; set; }
    public string phone_number { get; set; }
}

这是我的编辑表格：

<EditForm Model="@model" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div class="form-group">
        <InputText @bind-Value="@model.province" />
    </div> 
    <div class="form-group">
        <InputText @bind-Value="@model.contact_name" />
    </div>
    <div class="form-group">
        <InputText @bind-Value="@model.phone_number" />
    </div>
    <div class="form-group">
        <InputText @bind-Value="@model.address" />
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
    <button type="reset" class="btn btn-warning">Cancel</button>
</EditForm>

这是我的 HTML 表：

@if (address_list== null)
{
    <p>Loading</p>
}
else
{
    <table class="table table-striped text-center">
        <thead>
            <tr>
                <th scope="col" class="text-center">Province</th>
                <th scope="col" class="text-center">Contact Name</th>
                <th scope="col" class="text-center">Phone</th>
                <th scope="col" class="text-center">Address</th>
                <th scope="col" class="text-center">Edit</th>
                <th scope="col" class="text-center">Delete</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var d in  address_list)
            {
                <tr>
                    <td>@d.province</td>
                    <td>@d.contact_person</td>
                    <td>@d.phone_number</td>
                    <td>@d.address</td>
                    <td><button type="button" class="btn btn-link" @onclick="@(() => Edit(d))">Edit</button></td>
                    <td><button type="button" class="btn btn-link" @onclick="@(() => Delete(d))">Delete</button></td>  
                </tr>
            }
        </tbody>
    </table>
}

Answer 1

由于问题是概念性的，因此不可能有任何简单的解决方案。您无法使用按钮类型重置将表单重置为初始值。重置按钮，将所有字段重置为其初始值，即创建 HTML 表单时的值。

但是，由于 Blazor 自动创建和销毁组件，Html 表单可能会在单次编辑期间被销毁和创建多次。例如，如果某些字段或整个表单位于选项卡控件的 TabItem 内，则每当您更改所选选项卡时，都会创建/销毁字段和/或表单。因此，表单“初始值”与表单第一次出现时出现的初始值不同，并且是无意义的值。

因此，您无法对 Html 字段或表单进行操作，但需要对绑定到表单的模型进行操作，因为只有底层模型才能确保在所有 Blazor 重新渲染中都能生存。

总结起来，唯一的解决方案是将模型的初始属性值存储在某处，并在用户使用重置按钮或关闭模态等取消操作时在模型上复制这些初始值。