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 are
  • AbpFormControlSize.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 are
  • AbpFormControlSize.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. Default True.

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 Label attribute and directly set the label. But it doesn’t auto localize your localization key. So use it as label="@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 are
  • AbpFormControlSize.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 are
  • AbpFormControlSize.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. Default True.

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 as label="@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.