29.09.2022 17:00 UTC Watch the Event

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.
In this document
Mastering ABP Framework
Mastering ABP Framework Book

Build maintainable .NET solutions by following software development best practices using ABP.

See Details