抠丁客 抠丁客
项目
版本
编辑 (2025/12/24)

动态表单

简介

abp-dynamic-form 为给定的 C# 模型创建一个 Bootstrap 表单。

基本用法：

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

模型：

public class DynamicFormsModel : PageModel
{
    [BindProperty]
    public DetailedModel MyDetailedModel { get; set; }

    public List<SelectListItem> CountryList { get; set; } = new List<SelectListItem>
    {
        new SelectListItem { Value = "CA", Text = "Canada"},
        new SelectListItem { Value = "US", Text = "USA"},
        new SelectListItem { Value = "UK", Text = "United Kingdom"},
        new SelectListItem { Value = "RU", Text = "Turkey"}
    };

    public void OnGet()
    {
            MyDetailedModel = new DetailedModel
            {
                Name = "",
                Description = "Lorem ipsum dolor sit amet.",
                IsActive = true,
                Age = 65,
                Day = DateTime.Now,
                MyCarType = CarType.Coupe,
                YourCarType = CarType.Sedan,
                Country = "RU",
                NeighborCountries = new List<string>() { "UK", "CA" }
            };
    }

    public class DetailedModel
    {
        [Required]
        [Placeholder("输入您的姓名...")]
        [Display(Name = "姓名")]
        public string Name { get; set; }

        [TextArea(Rows = 4)]
        [Display(Name = "描述")]
        [InputInfoText("描述您自己")]
        public string Description { get; set; }

        [Required]
        [DataType(DataType.Password)]
        [Display(Name = "密码")]
        public string Password { get; set; }

        [Display(Name = "是否激活")]
        public bool IsActive { get; set; }

        [Required]
        [Display(Name = "年龄")]
        public int Age { get; set; }

        [Required]
        [Display(Name = "我的车型")]
        public CarType MyCarType { get; set; }

        [Required]
        [AbpRadioButton(Inline = true)]
        [Display(Name = "您的车型")]
        public CarType YourCarType { get; set; }

        [DataType(DataType.Date)]
        [Display(Name = "日期")]
        public DateTime Day { get; set; }

        [SelectItems(nameof(CountryList))]
        [Display(Name = "国家")]
        public string Country { get; set; }

        [SelectItems(nameof(CountryList))]
        [Display(Name = "邻国")]
        public List<string> NeighborCountries { get; set; }
    }

    public enum CarType
    {
        Sedan,
        Hatchback,
        StationWagon,
        Coupe
    }
}

演示

查看动态表单演示页面以了解实际效果。

属性

abp-model

为动态表单设置 C# 模型。此模型的属性将被转换为表单中的输入控件。

column-size

在此，使用 col-sm 来设置尺寸。设置此属性时，会同时添加 col-12。

submit-button

可为 True 或 False。

如果为 True，将在表单底部生成一个提交按钮。

默认值为 False。

required-symbols

可为 True 或 False。

如果为 True，必填的输入控件将带有一个表示必填的符号（*）。

默认值为 True。

表单内容放置

默认情况下，abp-dynamic-form 会清除其内部 HTML 并将输入控件放置到自身中。如果您想向动态表单添加额外内容，或将输入控件放置到某个特定区域，您可以使用 <abp-form-content /> 标签。此标签将被表单内容替换，而 abp-dynamic-form 标签的其余内部 HTML 将保持不变。

用法：

<abp-dynamic-form abp-model="@Model.MyExampleModel">
    <div>
        一些内容....
    </div>
    <div class="input-area">
        <abp-form-content />
    </div>
    <div>
        更多内容....
    </div>
</abp-dynamic-form>

输入顺序

abp-dynamic-form 按照属性的 DisplayOrder 特性，然后是它们在模型类中的属性顺序进行排序。

每个属性的默认 DisplayOrder 特性数值是 10000。

参见下面的示例：

public class OrderExampleModel
{
    [DisplayOrder(10004)]
    public string Name{ get; set; }

    [DisplayOrder(10005)]
    public string Surname{ get; set; }

    // 默认 10000
    public string EmailAddress { get; set; }

    [DisplayOrder(10003)]
    public string PhoneNumber { get; set; }

    [DisplayOrder(9999)]
    public string City { get; set; }
}

在此示例中，输入字段将按此顺序显示：City > EmailAddress > PhoneNumber > Name > Surname。

忽略属性

默认情况下，abp-dynamic-form 会为模型类中的每个属性生成输入控件。如果您想忽略某个属性，请使用 DynamicFormIgnore 特性。

参见下面的示例：

        public class MyModel
        {
            public string Name { get; set; }

            [DynamicFormIgnore]
            public string Surname { get; set; }
        }

在此示例中，不会为 Surname 属性生成输入控件。

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

如果您阅读过表单元素文档，您会注意到 abp-radio 和 abp-select 标签在 C# 模型上非常相似。因此，我们必须使用 [AbpRadioButton()] 特性来告诉 abp-dynamic-form 您的哪些属性将是单选按钮组，哪些将是组合框。参见下面的示例：

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

模型：

public class DynamicFormsModel : PageModel
{
    [BindProperty]
    public DetailedModel MyDetailedModel { get; set; }

    public List<SelectListItem> CountryList { get; set; } = new List<SelectListItem>
    {
        new SelectListItem { Value = "CA", Text = "Canada"},
        new SelectListItem { Value = "US", Text = "USA"},
        new SelectListItem { Value = "UK", Text = "United Kingdom"},
        new SelectListItem { Value = "RU", Text = "Turkey"}
    };

    public void OnGet()
    {
            MyDetailedModel = new DetailedModel
            {
                ComboCarType = CarType.Coupe,
                RadioCarType = CarType.Sedan,
                ComboCountry = "RU",
                RadioCountry = "UK"
            };
    }

    public class DetailedModel
    {
        public CarType ComboCarType { get; set; }

        [AbpRadioButton(Inline = true)]
        public CarType RadioCarType { get; set; }

        [SelectItems(nameof(CountryList))]
        public string ComboCountry { get; set; }

        [AbpRadioButton()]
        [SelectItems(nameof(CountryList))]
        public string RadioCountry { get; set; }
    }

    public enum CarType
    {
        Sedan,
        Hatchback,
        StationWagon,
        Coupe
    }
}

如上例所示：

  • 如果在枚举属性上使用了 [AbpRadioButton()]，它将是一个单选按钮组。否则，是组合框。
  • 如果在属性上同时使用了 [SelectItems()] 和 [AbpRadioButton()]，它将是一个单选按钮组。
  • 如果只在属性上使用了 [SelectItems()]，它将是一个组合框。
  • 如果属性上没有使用这些特性中的任何一个，它将是一个文本框。

本地化

abp-dynamic-form 也处理本地化。

默认情况下，它会尝试查找 "DisplayName:" 或 "" 本地化键，并将本地化值设置为输入标签。

您可以使用 Asp.Net Core 的 [Display()] 特性自行设置。您可以在该特性中使用本地化键。参见下面的示例：

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

另请参阅

在本文档中