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.DefaultAbpFormControlSize.SmallAbpFormControlSize.MediumAbpFormControlSize.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.DefaultAbpFormControlSize.SmallAbpFormControlSize.MediumAbpFormControlSize.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.
asp-format, name and value attributes of Asp.Net Core Input Tag Helper are also valid for abp-input tag helper.
Label & Localization
You can set label of your input in different ways:
- You can use
Labelattribute 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
labelor[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.DefaultAbpFormControlSize.SmallAbpFormControlSize.MediumAbpFormControlSize.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.DefaultAbpFormControlSize.SmallAbpFormControlSize.MediumAbpFormControlSize.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
Labelattribute 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.
08-09 May
