使用Blazor在点击提交后清除输入字段

Question

我想知道有没有人知道如何在点击保存按钮“提交”后清除所有输入字段？当我返回页面时，我的值仍然存在。

这是我使用的代码。

@page "/testform"
@inject BlazorApp6.Data.Person person
@inject BlazorApp6.DBContext.ValidationTestContext Context
@inject BlazorApp6.Interface.INterface Manager

<EditForm Model="@person" OnValidSubmit="@CreatePerson">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <div class="form-group">
            <label for="Name">Name</label>
            <InputText @bind-Value=Person.Name class="form-control" id="Name" />
            <ValidationMessage For=@(() => Person.Name) />
        </div>
        <div class="form-group">
            <label for="Age">Age</label>
            <InputNumber @bind-Value=Person.Age class="form-control" id="Age" />
            <ValidationMessage For=@(() => Person.Age) />
        </div>
        <input type="submit" class="btn btn-primary" value="Save" />
    </EditForm>

@code {



    protected override async Task OnInitializedAsync()
    {
        person.OnChange += StateHasChanged;
    }

    private void CreatePerson()
    {

        Manager.Create(person);
        
       
    }

}

- Anders Dahl

---

你没有使用 EditForms 的 OnSubmit 或 OnValidSubmit。https://blazor-university.com/forms/handling-form-submission/ - Brian Parker

@Orak，我已经添加了。但它仍然不起作用。 - Anders Dahl

Answer 1

重置所有值。最简单的方法：

private void CreatePerson()
{
    Manager.Create(person);
    person = new Person();            
}

你不需要使用StateHasChanged：

protected override async Task OnInitializedAsync()
{
    // person.OnChange += StateHasChanged;
}

否则，您需要对 new Person() 周围的事件进行 -= 和 += 的操作。

- H H

---

我看到你注入了Person，这不是一个好的方法。应该注入服务而非实体。 - H H

当我尝试这样做时，我会得到以下错误信息：“找不到类型或命名空间名称'Person'（您是否缺少使用指令或程序集引用？）”。这个错误信息是否与@injection有关？ - Anders Dahl

是的，@include BlazorApp6.Data - H H

Answer 2

编写一个函数以清除输入字段。

private void ClearInputFields()
{
    person.Name = string.Empty;  

}

在成功提交后调用该方法

- Brian K. Mwaniki