Question

我使用Blazor Server Side和Editform进行粗操作。在我编辑现有记录时，除了“取消”或“重置”表单外，一切都很好。

当我打开编辑表单，然后在表单中的某些控件中更改某些内容，然后单击“取消”或“重置”按钮时，它将关闭表单，但是我更改的数据将更新到列表中，但请注意更新到数据库。

反正我可以防止吗？

Answer 1

这是我的代码。

    * Class
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; }
    }

/ ===================== /

*Edit form 
<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>

/ ==================

*List
@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 2

因为这个问题是概念性的，所以没有任何简单的解决方案。您无法通过按钮类型重置将表单重置为初始值。重置按钮，将所有字段重置为其初始值，即重置为创建HTML表单时的值。

但是，由于自动Blazor的创建和组件的销毁，Html表单可能在一次Edit中被销毁和创建了好几次。例如，如果某些字段或整个表单位于Tab控件的TabItem内，则每当更改选定的选项卡时，就会创建/销毁表单和/或破坏表单。因此，表格“初始值”与表格首次出现时出现的初始值不同，并且是无意义的值。

因此，您不能对HTML字段或表单进行操作，但是您需要对与表单绑定的模型进行操作，因为可以确保仅基础模型可以在所有Blazor重新渲染中生存。

总结出唯一的解决方案是将模型的初始属性值存储在某个位置，并在用户每次使用复位按钮或通过关闭模态等取消操作时将这些初始值复制到模型中。

Answer 3

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

@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" />

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

3 个答案: