EditForm组件是Blazor管理用户输入的方法,它使得根据用户输入执行验证变得很容易。它还提供检查是否已满足所有验证规则的功能,如果未满足,则向用户显示验证错误。
虽然可以使用标准的<form>HTML元素创建表单,但我建议使用EditForm组件,因为它为我们提供了额外的功能。

注意:如果您还没有这样做,我建议您阅读关于双向绑定指令的部分。

The form model

EditForm的关键功能是它的Model参数。此参数为组件提供上下文,组件可以使用该上下文来启用用户界面绑定并确定用户输入是否有效。
让我们从创建一个可以与EditForm一起使用的类开始。此时,一个简单的空类就足够了。

  1. public class Person
  2. {
  3. }

编辑标准Index.razor页面,如下所示:

  1. @page "/"
  2. <EditForm Model=@Person>
  3. <input type="submit" value="Submit" class="btn btn-primary"/>
  4. </EditForm>
  5. @code
  6. {
  7. Person Person = new Person();
  8. }

第9行为我们的表单创建要绑定到的Person实例。第3行创建一个EditForm并将其Model参数设置为我们的实例。前面的razor标记产生以下HTML。

  1. <form>
  2. <input class="btn btn-primary" type="submit" value="Submit">
  3. </form>

Detecting form submission

当用户单击上一个示例中的“Submit”按钮时,EditForm将触发其OnSubmit事件。我们可以在代码中使用此事件来处理任何业务逻辑。

  1. @page "/"
  2. <h1>Status: @Status</h1>
  3. <EditForm Model=@Person OnSubmit=@FormSubmitted>
  4. <input type="submit" value="Submit" class="btn btn-primary"/>
  5. </EditForm>
  6. @code
  7. {
  8. string Status = "Not submitted";
  9. Person Person = new Person();
  10. void FormSubmitted()
  11. {
  12. Status = "Form submitted";
  13. // Post data to the server, etc
  14. }
  15. }

表格事宜将在处理表格事宜部分进行更深入的介绍。