在 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

您没有显示与编辑表单相关的服务器端代码，但我认为它看起来像这样：

@code {
    public Address model { get; set; }
}

您实际上可以实现 getter 和 setter。在此过程中，创建一个典型的支持字段，然后还创建一个克隆字段来捕获您的初始数据。还要创建一个重置函数，该函数从克隆字段中捕获值并将其放回当前模型状态。

@code { 

    public Address model {
        get { return _model; }
        set {
            _model = value;
            _clone = new Address {
                province = value.province,
                address = value.address,
                contact_name = value.contact_name,
                phone_number = value.phone_number            
            }
        }
    Address _model;
    Address _clone;

    public void reset () {
        _model.province = _clone.province;
        _model.address = _clone.address;
        _model.contact_name = _clone.contact_name;
        _model.phone_number = _clone.phone_number;
    }

}

然后，在您的编辑表单中，不要使用“重置”类型的按钮，而是执行以下操作：

<button class="btn btn-warning" @onclick="reset" @onclick:preventDefault>Cancel</button>

这将持续到 Microsoft 的人实施类似的东西：

<InputText @firstNonBlankAsInitial="true" @bind-Value="@model.province" />

Answer 2

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

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

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

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