抠丁客
表单元素
简介
Abp 提供了表单输入标签助手，使构建表单更加容易。
演示
查看表单元素演示页面以了解实际效果。
abp-input
abp-input 标签为给定的 C# 属性创建一个 Bootstrap 表单输入。它在后台使用了 Asp.Net Core Input 标签助手，因此 Asp.Net Core 的 input 标签助手的每个数据注解特性对 abp-input 同样有效。
用法：
<abp-input asp-for="@Model.MyModel.Name"/>
<abp-input asp-for="@Model.MyModel.Description"/>
<abp-input asp-for="@Model.MyModel.Password"/>
<abp-input asp-for="@Model.MyModel.IsActive"/>
模型：
public class FormElementsModel : PageModel
{
public SampleModel MyModel { get; set; }
public void OnGet()
{
MyModel = new SampleModel();
}
public class SampleModel
{
[Required]
[Placeholder("输入您的姓名...")]
[InputInfoText("您叫什么名字？")]
public string Name { get; set; }
[Required]
[FormControlSize(AbpFormControlSize.Large)]
public string SurName { get; set; }
[TextArea(Rows = 4)]
public string Description { get; set; }
[Required]
[DataType(DataType.Password)]
public string Password { get; set; }
public bool IsActive { get; set; }
}
}
属性
您可以在 C# 属性上设置一些特性，或者直接在 HTML 标签上设置。如果您要在 abp-dynamic-form 中使用此属性，那么您只能通过属性特性来设置这些属性。
属性特性
[TextArea()]：将输入转换为文本区域。[Placeholder()]：设置输入的描述区域。您可以直接使用本地化键。[InputInfoText()]：设置输入框的提示文本。您可以直接使用本地化键。[FormControlSize()]：设置 form-control 包装元素的大小。可用值有：AbpFormControlSize.DefaultAbpFormControlSize.SmallAbpFormControlSize.MediumAbpFormControlSize.Large
[DisabledInput]：将输入设置为禁用状态。[ReadOnlyInput]：将输入设置为只读状态。
标签属性
info：设置输入框的提示文本。您可以直接使用本地化键。auto-focus：当其值为 true 时，让浏览器将焦点设置到此元素。size：设置 form-control 包装元素的大小。可用值有：AbpFormControlSize.DefaultAbpFormControlSize.SmallAbpFormControlSize.MediumAbpFormControlSize.Large
disabled：将输入设置为禁用状态。readonly：将输入设置为只读状态。label：设置输入框的标签。required-symbol：当输入为必填时，在标签上添加必填符号(*)。默认值为True。floating-label：将标签设置为浮动标签。默认值为False。
Asp.Net Core Input 标签助手的 asp-format、name 和 value 属性对 abp-input 标签助手同样有效。
标签与本地化
您可以通过以下几种方式设置输入框的标签：
- 您可以使用
Label属性直接设置标签。此属性不会自动本地化文本。要本地化标签，请使用label="@L["{LocalizationKey}"].Value"。 - 您可以使用 ASP.NET Core 的
[Display(name="{LocalizationKey}")]特性来设置。 - 您可以只让 abp 为属性查找本地化键。如果未设置
label或[DisplayName]特性，它将尝试查找 "DisplayName:" 或 "" 本地化键。
abp-select
abp-select 标签为给定的 C# 属性创建一个 Bootstrap 表单下拉选择框。它在后台使用了 ASP.NET Core Select 标签助手，因此 ASP.NET Core 的 select 标签助手的每个数据注解特性对 abp-select 同样有效。
abp-select 标签需要 Microsoft.AspNetCore.Mvc.Rendering.SelectListItem 列表才能工作。可以通过标签上的 asp-items 属性或 C# 属性上的 [SelectItems()] 特性来提供。（如果您使用 abp-dynamic-form，C# 特性是唯一方式。）
abp-select 支持多选。
abp-select 为枚举属性自动创建选择列表。无需额外数据。如果属性可为空，则会在自动生成的列表顶部添加一个空键值。
用法：
<abp-select asp-for="@Model.MyModel.City" asp-items="@Model.CityList"/>
<abp-select asp-for="@Model.MyModel.AnotherCity"/>
<abp-select asp-for="@Model.MyModel.MultipleCities" asp-items="@Model.CityList"/>
<abp-select asp-for="@Model.MyModel.MyCarType"/>
<abp-select asp-for="@Model.MyModel.MyNullableCarType"/>
模型：
public class FormElementsModel : PageModel
{
public SampleModel MyModel { get; set; }
public List<SelectListItem> CityList { get; set; }
public void OnGet()
{
MyModel = new SampleModel();
CityList = new List<SelectListItem>
{
new SelectListItem { Value = "NY", Text = "New York"},
new SelectListItem { Value = "LDN", Text = "London"},
new SelectListItem { Value = "IST", Text = "Istanbul"},
new SelectListItem { Value = "MOS", Text = "Moscow"}
};
}
public class SampleModel
{
public string City { get; set; }
[SelectItems(nameof(CityList))]
public string AnotherCity { get; set; }
public List<string> MultipleCities { get; set; }
public CarType MyCarType { get; set; }
public CarType? MyNullableCarType { get; set; }
}
public enum CarType
{
Sedan,
Hatchback,
StationWagon,
Coupe
}
}
属性
您可以在 C# 属性上设置一些特性，或者直接在 HTML 标签上设置。如果您要在 abp-dynamic-form 中使用此属性，那么您只能通过属性特性来设置这些属性。
属性特性
[SelectItems()]：设置选择数据。参数应为数据列表的名称。（参见上面的示例）[InputInfoText()]：设置输入框的提示文本。您可以直接使用本地化键。[FormControlSize()]：设置 form-control 包装元素的大小。可用值有：AbpFormControlSize.DefaultAbpFormControlSize.SmallAbpFormControlSize.MediumAbpFormControlSize.Large
标签属性
asp-items：设置选择数据。这应该是 SelectListItem 的列表。info：设置输入框的提示文本。您可以直接使用本地化键。size：设置 form-control 包装元素的大小。可用值有：AbpFormControlSize.DefaultAbpFormControlSize.SmallAbpFormControlSize.MediumAbpFormControlSize.Large
label：设置输入框的标签。required-symbol：当输入为必填时，在标签上添加必填符号(*)。默认值为True。
标签与本地化
您可以通过以下几种方式设置输入框的标签：
- 您可以使用
Label属性直接设置标签。但它不会自动本地化您的本地化键。因此请使用label="@L["{LocalizationKey}"].Value"。 - 您可以使用 ASP.NET Core 的
[Display(name="{LocalizationKey}")]特性来设置。 - 您可以只让 abp 为属性查找本地化键。它将尝试查找 "DisplayName:" 或 "" 本地化键。
对于枚举属性，组合框值的本地化由 abp-select 设置。它会搜索 "." 或 "" 本地化键。例如，在上面的示例中，当本地化组合框值时，它将使用 "CarType.StationWagon" 或 "StationWagon" 键进行本地化。
abp-radio
abp-radio 标签为给定的 C# 属性创建一个 Bootstrap 表单单选按钮组。用法与 abp-select 标签非常相似。
用法：
<abp-radio asp-for="@Model.MyModel.CityRadio" asp-items="@Model.CityList" inline="true"/>
<abp-radio asp-for="@Model.MyModel.CityRadio2"/>
模型：
public class FormElementsModel : PageModel
{
public SampleModel MyModel { get; set; }
public List<SelectListItem> CityList { get; set; } = new List<SelectListItem>
{
new SelectListItem { Value = "NY", Text = "New York"},
new SelectListItem { Value = "LDN", Text = "London"},
new SelectListItem { Value = "IST", Text = "Istanbul"},
new SelectListItem { Value = "MOS", Text = "Moscow"}
};
public void OnGet()
{
MyModel = new SampleModel();
MyModel.CityRadio = "IST";
MyModel.CityRadio2 = "MOS";
}
public class SampleModel
{
public string CityRadio { get; set; }
[SelectItems(nameof(CityList))]
public string CityRadio2 { get; set; }
}
}
属性
您可以在 C# 属性上设置一些特性，或者直接在 HTML 标签上设置。如果您要在 abp-dynamic-form 中使用此属性，那么您只能通过属性特性来设置这些属性。
属性特性
[SelectItems()]：设置选择数据。参数应为数据列表的名称。（参见上面的示例）
标签属性
asp-items：设置选择数据。这应该是 SelectListItem 的列表。Inline：如果为 true，单选按钮将在一行中显示，彼此相邻。如果为 false，它们将彼此上下排列。
abp-date-picker 和 abp-date-range-picker
abp-date-picker 和 abp-date-range-picker 标签为给定的 C# 属性创建一个 Bootstrap 表单日期选择器。abp-date-picker 用于选择单个日期，abp-date-range-picker 用于选择日期范围。它使用了 datepicker jQuery 插件。
用法：
<abp-date-picker asp-for="@Model.MyModel.MyDate" />
<abp-date-range-picker asp-for-start="@Model.MyModel.MyDateRangeStart" asp-for-end="@Model.MyModel.MyDateRangeEnd" />
<abp-dynamic-form abp-model="DynamicFormExample"></abp-dynamic-form>
模型：
public class FormElementsModel : PageModel
{
public SampleModel MyModel { get; set; }
public DynamicForm DynamicFormExample { get; set; }
public void OnGet()
{
MyModel = new SampleModel();
DynamicFormExample = new DynamicForm();
}
public class SampleModel
{
public DateTime MyDate { get; set; }
public DateTime MyDateRangeStart { get; set; }
public DateTime MyDateRangeEnd { get; set; }
}
public class DynamicForm
{
[DateRangePicker("MyPicker",true)]
public DateTime StartDate { get; set; }
[DateRangePicker("MyPicker",false)]
[DatePickerOptions(nameof(DatePickerOptions))]
public DateTime EndDate { get; set; }
public DateTime DateTime { get; set; }
public DynamicForm()
{
StartDate = DateTime.Now;
EndDate = DateTime.Now;
DateTime = DateTime.Now;
}
}
public AbpDatePickerOptions DatePickerOptions { get; set; }
}
属性
您可以在 C# 属性上设置一些特性，或者直接在 HTML 标签上设置。如果您要在 abp-dynamic-form 中使用此属性，那么您只能通过属性特性来设置这些属性。
属性特性
[Placeholder()]：设置输入的描述区域。您可以直接使用本地化键。[InputInfoText()]：设置输入框的提示文本。您可以直接使用本地化键。[FormControlSize()]：设置 form-control 包装元素的大小。可用值有：AbpFormControlSize.DefaultAbpFormControlSize.SmallAbpFormControlSize.MediumAbpFormControlSize.Large
[DisabledInput]：将输入设置为禁用状态。[ReadOnlyInput]：将输入设置为只读状态。[DatePickerOptions()]：设置日期选择器的预定义选项。参数应为选项属性的名称（参见上面的示例）。请参阅可用的 datepicker 选项。您可以直接使用本地化键。
abp-date-picker
[DatePicker]：将输入设置为日期选择器。特别是对于字符串属性。
abp-date-range-picker
[DateRangePicker()]：为日期范围选择器设置选择器 ID。您可以通过设置 IsStart=true 将属性设置为开始日期，或者保持默认/ false 将其设置为结束日期。
标签属性
info：设置输入框的提示文本。您可以直接使用本地化键。auto-focus：当其值为 true 时，让浏览器将焦点设置到此元素。size：设置 form-control 包装元素的大小。可用值有：AbpFormControlSize.DefaultAbpFormControlSize.SmallAbpFormControlSize.MediumAbpFormControlSize.Large
disabled：将输入设置为禁用状态。readonly：将输入设置为只读状态。label：设置输入框的标签。required-symbol：当输入为必填时，在标签上添加必填符号(*)。默认值为True。open-button：当其为True时，将添加一个打开日期选择器的按钮。默认值为True。clear-button：当其为True时，将添加一个清除日期选择器的按钮。默认值为True。single-open-and-clear-button：当其为True时，将打开和清除按钮显示在一个按钮中。默认值为True。is-utc：当其为True时，将日期转换为 UTC。默认值为False。is-iso：当其为True时，将日期转换为 ISO 格式。默认值为False。visible-date-format：设置输入的日期格式。默认格式是用户文化的日期格式。您需要提供一个 JavaScript 日期格式约定。例如：YYYY-MM-DDTHH:MM:SSZ。input-date-format：为后端兼容性设置隐藏输入的日期格式。默认格式为YYYY-MM-DD。您需要提供一个 JavaScript 日期格式约定。例如：YYYY-MM-DDTHH:MM:SSZ。date-separator：设置一个字符来分隔开始和结束日期。默认值为-。- 其他未映射的属性将按原样自动添加到输入元素中。请参阅可用的 datepicker 选项。例如：
data-start-date="2020-01-01"
abp-date-picker
asp-date：设置日期值。这应该是DateTime、DateTime?、DateTimeOffset、DateTimeOffset?或string值。
abp-date-range-picker
asp-for-start：设置开始日期值。这应该是DateTime、DateTime?、DateTimeOffset、DateTimeOffset?或string值。asp-for-end：设置结束日期值。这应该是DateTime、DateTime?、DateTimeOffset、DateTimeOffset?或string值。
标签与本地化
您可以通过以下几种方式设置输入框的标签：
- 您可以使用
Label属性直接设置标签。此属性不会自动本地化文本。要本地化标签，请使用label="@L["{LocalizationKey}"].Value"。 - 您可以使用 ASP.NET Core 的
[Display(name="{LocalizationKey}")]特性来设置。 - 您可以只让 abp 为属性查找本地化键。如果未设置
label或[DisplayName]特性，它会尝试按照约定查找本地化。例如DisplayName:{YourPropertyName}或{YourPropertyName}。如果您的属性名是 FullName，它将搜索DisplayName:FullName或{FullName}。
JavaScript 使用
var newPicker = abp.libs.bootstrapDateRangePicker.createDateRangePicker(
{
label: "New Picker",
}
);
newPicker.insertAfter($('body'));
var newPicker = abp.libs.bootstrapDateRangePicker.createSinglePicker(
{
label: "New Picker",
}
);
newPicker.insertAfter($('body'));
选项
label：设置输入框的标签。placeholder：设置输入框的占位符。value：设置输入框的值。name：设置输入框的名称。id：设置输入框的 ID。required：将输入框设置为必填。disabled：将输入框设置为禁用状态。readonly：将输入框设置为只读状态。size：设置 form-control 包装元素的大小。可用值有：AbpFormControlSize.DefaultAbpFormControlSize.SmallAbpFormControlSize.MediumAbpFormControlSize.Large
openButton：当其为True时，将添加一个打开日期选择器的按钮。默认值为True。clearButton：当其为True时，将添加一个清除日期选择器的按钮。默认值为True。singleOpenAndClearButton：当其为True时，将打开和清除按钮显示在一个按钮中。默认值为True。isUtc：当其为True时，将日期转换为 UTC。默认值为False。isIso：当其为True时，将日期转换为 ISO 格式。默认值为False。visibleDateFormat：设置输入的日期格式。默认格式是用户文化的日期格式。您需要提供一个 JavaScript 日期格式约定。例如：YYYY-MM-DDTHH:MM:SSZ。inputDateFormat：为后端兼容性设置隐藏输入的日期格式。默认格式为YYYY-MM-DD。您需要提供一个 JavaScript 日期格式约定。例如：YYYY-MM-DDTHH:MM:SSZ。dateSeparator：设置一个字符来分隔开始和结束日期。默认值为-。startDateName：设置隐藏开始日期输入的名称。endDateName：设置隐藏结束日期输入的名称。dateName：设置隐藏日期输入的名称。- 其他 datepicker 选项。例如：
startDate: "2020-01-01"。
