动态表单

提示: 在开始阅读本文档之前,请确保你已经看过并理解了abp表单元素文档.

介绍

abp-dynamic-form 为给定c#模型创建bootstrap表单.

基本用法:

  1. <abp-dynamic-form abp-model="@Model.MyDetailedModel"/>

Model:

  1. public class DynamicFormsModel : PageModel
  2. {
  3.     [BindProperty]
  4.     public DetailedModel MyDetailedModel { get; set; }
  6.     public List<SelectListItem> CountryList { get; set; } = new List<SelectListItem>
  7.     {
  8.         new SelectListItem { Value = "CA", Text = "Canada"},
  9.         new SelectListItem { Value = "US", Text = "USA"},
  10.         new SelectListItem { Value = "UK", Text = "United Kingdom"},
  11.         new SelectListItem { Value = "RU", Text = "Russia"}
  12.     };
  14.     public void OnGet()
  15.     {
  16.             MyDetailedModel = new DetailedModel
  17.             {
  18.                 Name = "",
  19.                 Description = "Lorem ipsum dolor sit amet.",
  20.                 IsActive = true,
  21.                 Age = 65,
  22.                 Day = DateTime.Now,
  23.                 MyCarType = CarType.Coupe,
  24.                 YourCarType = CarType.Sedan,
  25.                 Country = "RU",
  26.                 NeighborCountries = new List<string>() { "UK", "CA" }
  27.             };
  28.     }
  30.     public class DetailedModel
  31.     {
  32.         [Required]
  33.         [Placeholder("Enter your name...")]
  34.         [Display(Name = "Name")]
  35.         public string Name { get; set; }
  37.         [TextArea(Rows = 4)]
  38.         [Display(Name = "Description")]
  39.         [InputInfoText("Describe Yourself")]
  40.         public string Description { get; set; }
  42.         [Required]
  43.         [DataType(DataType.Password)]
  44.         [Display(Name = "Password")]
  45.         public string Password { get; set; }
  47.         [Display(Name = "Is Active")]
  48.         public bool IsActive { get; set; }
  50.         [Required]
  51.         [Display(Name = "Age")]
  52.         public int Age { get; set; }
  54.         [Required]
  55.         [Display(Name = "My Car Type")]
  56.         public CarType MyCarType { get; set; }
  58.         [Required]
  59.         [AbpRadioButton(Inline = true)]
  60.         [Display(Name = "Your Car Type")]
  61.         public CarType YourCarType { get; set; }
  63.         [DataType(DataType.Date)]
  64.         [Display(Name = "Day")]
  65.         public DateTime Day { get; set; }
  67.         [SelectItems(nameof(CountryList))]
  68.         [Display(Name = "Country")]
  69.         public string Country { get; set; }
  71.         [SelectItems(nameof(CountryList))]
  72.         [Display(Name = "Neighbor Countries")]
  73.         public List<string> NeighborCountries { get; set; }
  74.     }
  76.     public enum CarType
  77.     {
  78.         Sedan,
  79.         Hatchback,
  80.         StationWagon,
  81.         Coupe
  82.     }
  83. }

Demo

参阅 动态表单demo页面查看示例.

Attributes

abp-model

为动态表单设置c#模型,模型的属性以表单形式转化为输入.

submit-button

可以为 True 或 False.

如果为 True,则会在表单底部生成一个提交按钮.

默认值是 False.

required-symbols

可以为 True 或 False.

如果为 True,则必需的输入将带有一个符号(*),表示它们是必需的.

默认值是 True.

表单内容布局

默认情况下,“abp-dynamic-form 会清除内部html并将inputs放入自身. 如果要向动态表单添加其他内容或将inputs放置到某些特定区域,可以使用<abp-form-content />标签. 这个标签将被表单内容替换, 而 abp-dynamic-form 标签的内部html的其余部分将保持不变.

用法:

  1. <abp-dynamic-form abp-model="@Model.MyExampleModel">
  2.     <div>
  3.         Some content....
  4.     </div>
  5.     <div class="input-area">
  6.         <abp-form-content />
  7.     </div>
  8.     <div>
  9.         Some more content....
  10.     </div>
  11. </abp-dynamic-form>

输入排序

abp-dynamic-form 通过 DisplayOrder attribute对属性进行排序,然后按模型类中的属性顺序进行排序.

默认每个属性的 DisplayOrder attribute值是10000.

参见以下示例:

  1. public class OrderExampleModel
  2. {
  3.     [DisplayOrder(10004)]
  4.     public string Name{ get; set; }
  6.     [DisplayOrder(10005)]
  7.     public string Surname{ get; set; }
  9.     //Default 10000
  10.     public string EmailAddress { get; set; }
  12.     [DisplayOrder(10003)]
  13.     public string PhoneNumber { get; set; }
  15.     [DisplayOrder(9999)]
  16.     public string City { get; set; }
  17. }

在这个示例中,inputs字段顺序为: City > EmailAddress > PhoneNumber > Name > Surname.

忽略属性

默认情况下, abp-dynamic-form 会为模型类中的每个属性生成输入. 如果要忽略属性请使用 DynamicFormIgnore attribute.

参见以下示例:

  1. public class MyModel
  2. {
  3.     public string Name { get; set; }
  5.     [DynamicFormIgnore]
  6.     public string Surname { get; set; }
  7. }

在这个示例中,不会为 Surname 属性生成输入.

指示文本框,单选按钮组和组合框

如果你已经阅读了表单元素文档,你会注意到在c#模型上 abp-radio 和 abp-select 标签非常相. 我们必须使用 [AbpRadioButton()] attribute来告诉 abp-dynamic-form 你的哪些属性是单选按钮组,哪些属性是组合框.

参见以下示例:

  1. <abp-dynamic-form abp-model="@Model.MyDetailedModel"/>

Model:

  1. public class DynamicFormsModel : PageModel
  2. {
  3.     [BindProperty]
  4.     public DetailedModel MyDetailedModel { get; set; }
  6.     public List<SelectListItem> CountryList { get; set; } = new List<SelectListItem>
  7.     {
  8.         new SelectListItem { Value = "CA", Text = "Canada"},
  9.         new SelectListItem { Value = "US", Text = "USA"},
  10.         new SelectListItem { Value = "UK", Text = "United Kingdom"},
  11.         new SelectListItem { Value = "RU", Text = "Russia"}
  12.     };
  14.     public void OnGet()
  15.     {
  16.             MyDetailedModel = new DetailedModel
  17.             {
  18.                 ComboCarType = CarType.Coupe,
  19.                 RadioCarType = CarType.Sedan,
  20.                 ComboCountry = "RU",
  21.                 RadioCountry = "UK"
  22.             };
  23.     }
  25.     public class DetailedModel
  26.     {
  27.         public CarType ComboCarType { get; set; }
  29.         [AbpRadioButton(Inline = true)]
  30.         public CarType RadioCarType { get; set; }
  32.         [SelectItems(nameof(CountryList))]
  33.         public string ComboCountry { get; set; }
  35.         [AbpRadioButton()]
  36.         [SelectItems(nameof(CountryList))]
  37.         public string RadioCountry { get; set; }
  38.     }
  40.     public enum CarType
  41.     {
  42.         Sedan,
  43.         Hatchback,
  44.         StationWagon,
  45.         Coupe
  46.     }
  47. }

正如你上面的例子中看到:

  • 如果在Enum属性上使用 [AbpRadioButton()],它将是一个单选按钮组. 否则它是组合框.
  • 如果在属性上使用 [SelectItems()] 和 [AbpRadioButton()],那么它将是一个单选按钮组.
  • 如果只在属性上使用 [SelectItems()],它将是一个组合框.
  • 如果一个属性没有使用这些属性,它将是一个文本框.

本地化

abp-dynamic-form 会处理本地化.

默认情况下, 它将尝试查找 “DisplayName:{PropertyName}” 或 “{PropertyName}” 定位本地化键,并将定位值设置为label.

你可以使用Asp.Net Core的 [Display()] attribute自行设置. 可以在此属性中使用本地化密钥. 请参阅以下示例:

  1. [Display(Name = "Name")]
  2. public string Name { get; set; }