Blazor表单概述

的Blazor表格允许您根据模型生成表单并管理自定义表单。可以通过各种参数控制组件，通过使用控件实现所需的布局默认编辑器或添加自定义的，设置取向并组织这些编辑组而且列．

Form组件是Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

创建Blazor窗体

要将Form组件与模型一起使用:

1. 使用TelerikForm标记，将组件添加到razor页面。

2. 类提供对象模型的参数EditContext类到EditContext参数。

3. 使用< FormValidation >标记，并在其中提供一个验证器-如DataAnnotationsValidator这是框架附带的，用于支持表单验证。

@*为TelerikForm提供一个模型*@ @using System.ComponentModel.DataAnnotations      @code {public Person Person = new Person();公共类Person{[可编辑(假)]公共int Id{获取;设置;} [Required] [MaxLength(20, ErrorMessage = "第一个名字最长应该是20个字符长")][Display(name = "第一个名字")]public string FirstName {get;设置;} [Required] [MaxLength(25, ErrorMessage = " last name最长25个字符")][Display(name = " last name ")] public string LastName {get;设置;}[必选][显示(名称= "出生日期")]public DateTime?DOB{得到;设置; } } }

@*为TelerikForm提供EditContext *@ @using System.ComponentModel.DataAnnotations      @code {public EditContext MyEditContext {get;设置;} public Person Person = new Person();protected override void OnInitialized() {MyEditContext =新的EditContext(人);}公共类人{[可编辑的(假)]公共int Id{获取;设置;} [Required] [MaxLength(20, ErrorMessage = "第一个名字最长应该是20个字符长")][Display(name = "第一个名字")]public string FirstName {get;设置;} [Required] [MaxLength(25, ErrorMessage = " last name最长25个字符")][Display(name = " last name ")] public string LastName {get;设置; } [Required] [Display(Name = "Date of Birth")] public DateTime? DOB { get; set; } } }

表单项目

在Blazor Form中有两种方法来生成字段:

• 通过手动定义FormItems．
• 允许窗体自动生成．

表单项允许您自定义默认编辑器．(看到FormItems文章获取更多信息…．

自动生成字段

Telerik Form可以生成编辑器根据模型字段为您提供。它可以从两个模型，或EditContext，无论你提供给它什么。您可以使用数据标注属性验证字段的值。

以下数据类型是开箱即用的，它们使用以下默认编辑器:

自定义自动生成字段

属性可以自定义自动生成的字段EditorType属性，在< FormItem >，或使用theFormItem模板．的EditorType属性的成员FormEditorType枚举:

@* EditorType参数的使用*@ @using System.ComponentModel.DataAnnotations               @code { public Person person = new Person(); public class Person { public int Id { get; set; } = 10; public string FirstName { get; set; } = "John"; public string LastName { get; set; } = "Doe"; public DateTime DOB { get; set; } = DateTime.Today.AddYears(-20); } }

数据标注属性

用于Blazor的Telerik Form支持通过< DataAnnotationsValidator / >．属性中的所有验证属性数据标注属性. net提供的列表。

表单还使用了模型中的以下属性:

• (显示器(Name = "字段标题"))-获取字段名的标题(标题)，以呈现为其标签。

• (可编辑(false))-将内置编辑器呈现为禁用状态，以便用户无法更改其值。

方法进一步自定义编辑器表单项目．通过参数提供的显式设置将优先于数据注释属性。

形式参数

表单布局定制

Blazor Form暴露了多个参数，允许您自定义其布局:

形式参考

使用表单引用来访问EditContext类时，表单将生成的模型到它。例如，当您更改模型时，重新附加验证可能会很有用FormReference.EditContext.AddDataAnnotationsValidation ()．

@*获取表单组件的引用*@   @code {private TelerikForm FormReference {Get;设置;}}

下一个步骤

• 验证表单
• 探索表单事件
• 了解更多关于表单按钮的信息
• 对表单项进行分组

另请参阅

• 现场演示:表单
• API参考