Form Elements
Introduction
Abp provides form input tag helpers to make building forms easier.
Demo
See the form elements demo page to see it in action.
abp-input
abp-input
tag creates a Bootstrap form input for a given c# property. It uses Asp.Net Core Input Tag Helper in background, so every data annotation attribute of input
tag helper of Asp.Net Core is also valid for abp-input
.
Usage:
<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"/>
Model:
public class FormElementsModel : PageModel
{
public SampleModel MyModel { get; set; }
public void OnGet()
{
MyModel = new SampleModel();
}
public class SampleModel
{
[Required]
[Placeholder("Enter your name...")]
[InputInfoText("What is your name?")]
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; }
}
}
Attributes
You can set some of the attributes on your c# property, or directly on html tag. If you are going to use this property in a abp-dynamic-form, then you can only set these properties via property attributes.
Property Attributes
[TextArea()]
: Converts the input into a text area.
[Placeholder()]
: Sets placeholder for input. You can use a localization key directly.[InputInfoText()]
: Sets a small info text for input. You can use a localization key directly.[FormControlSize()]
: Sets size of form-control wrapper element. Available values areAbpFormControlSize.Default
AbpFormControlSize.Small
AbpFormControlSize.Medium
AbpFormControlSize.Large
[DisabledInput]
: Input is disabled.[ReadOnlyInput]
: Input is read-only.
Tag Attributes
info
: Sets a small info text for input. You can use a localization key directly.auto-focus
: If true, browser auto focuses on the element.size
: Sets size of form-control wrapper element. Available values areAbpFormControlSize.Default
AbpFormControlSize.Small
AbpFormControlSize.Medium
AbpFormControlSize.Large
disabled
: Input is disabled.readonly
: Input is read-only.label
: Sets the label for input.display-required-symbol
: Adds the required symbol (*) to label if input is required. DefaultTrue
.
Label & Localization
You can set label of your input in different ways:
- You can use
Label
attribute and directly set the label. But it doesn't auto localize your localization key. So use it aslabel="@L["{LocalizationKey}"].Value"
. - You can set it using
[Display(name="{LocalizationKey}")]
attribute of Asp.Net Core. - You can just let abp find the localization key for the property. It will try to find "DisplayName:{PropertyName}" or "{PropertyName}" localization keys, if
label
or[DisplayName]
attributes are not set.
abp-select
abp-select
tag creates a Bootstrap form select for a given c# property. It uses Asp.Net Core Select Tag Helper in background, so every data annotation attribute of select
tag helper of Asp.Net Core is also valid for abp-select
.
abp-select
tag needs a list of Microsoft.AspNetCore.Mvc.Rendering.SelectListItem
to work. It can be provided by asp-items
attriube on the tag or [SelectItems()]
attribute on c# property. (if you are using abp-dynamic-form, c# attribute is the only way.)
abp-select
supports multiple selection.
abp-select
auto-creates a select list for Enum properties. No extra data is needed. If property is nullable, an empty key and value is added to top of the auto-generated list.
Usage:
<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"/>
Model:
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
}
}
Attributes
You can set some of the attributes on your c# property, or directly on html tag. If you are going to use this property in a abp-dynamic-form, then you can only set these properties via property attributes.
Property Attributes
[SelectItems()]
: Sets the select data. Parameter should be the name of the data list. (see example above)
[InputInfoText()]
: Sets a small info text for input. You can use a localization key directly.[FormControlSize()]
: Sets size of form-control wrapper element. Available values areAbpFormControlSize.Default
AbpFormControlSize.Small
AbpFormControlSize.Medium
AbpFormControlSize.Large
Tag Attributes
asp-items
: Sets the select data. This Should be a list of SelectListItem.info
: Sets a small info text for input. You can use a localization key directly.size
: Sets size of form-control wrapper element. Available values areAbpFormControlSize.Default
AbpFormControlSize.Small
AbpFormControlSize.Medium
AbpFormControlSize.Large
label
: Sets the label for input.display-required-symbol
: Adds the required symbol (*) to label if input is required. DefaultTrue
.
Label & Localization
You can set label of your input in different ways:
- You can use
Label
attribute and directly set the label. But it doesn't auto localize your localization key. So use it aslabel="@L["{LocalizationKey}"].Value".
- You can set it using
[Display(name="{LocalizationKey}")]
attribute of Asp.Net Core. - You can just let abp find the localization key for the property. It will try to find "DisplayName:{PropertyName}" or "{PropertyName}" localization keys.
Localizations of combobox values are set by abp-select
for Enum property. It searches for "{EnumTypeName}.{EnumPropertyName}" or "{EnumPropertyName}" localization keys. For instance, in the example above, it will use "CarType.StationWagon" or "StationWagon" keys for localization when it localizes combobox values.
abp-radio
abp-radio
tag creates a Bootstrap form radio group for a given c# property. Usage is very similar to abp-select
tag.
Usage:
<abp-radio asp-for="@Model.MyModel.CityRadio" asp-items="@Model.CityList" inline="true"/>
<abp-radio asp-for="@Model.MyModel.CityRadio2"/>
Model:
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; }
}
}
Attributes
You can set some of the attributes on your c# property, or directly on html tag. If you are going to use this property in a abp-dynamic-form, then you can only set these properties via property attributes.
Property Attributes
[SelectItems()]
: Sets the select data. Parameter should be the name of the data list. (see example above)
Tag Attributes
asp-items
: Sets the select data. This Should be a list of SelectListItem.Inline
: If true, radio buttons will be in single line, next to each other. If false, they will be under each other.