Form Elements

Example


 public class FormElementsModel : PageModel
    {
        public SampleModel MyModel { get; set; }

        public void OnGet()
        {
            MyModel = new SampleModel();
        }

        public class SampleModel
        {
            [Required]
            public string Name { get; set; }

            [Required]
            [DataType(DataType.Password)]
            public string Password { get; set; }

            public bool CheckMeOut { get; set; }
        }
    }

<abp-input asp-for="@Model.MyModel.Name" label="Name"/>
<abp-input asp-for="@Model.MyModel.Password" label="Password" />
<abp-input asp-for="@Model.MyModel.CheckMeOut" label="Check Me Out" />

<div class="mb-3">
<label for="MyModel_Name">Name</label>
<input type="text" data-val="true" data-val-required="The Name field is required." id="MyModel_Name" name="MyModel.Name" value="" class="form-control ">
<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.Name" data-valmsg-replace="true"></span>
</div>
<div class="mb-3">
<label for="MyModel_Password">Password</label>
<input type="password" data-val="true" data-val-required="The Password field is required." id="MyModel_Password" name="MyModel.Password" class="form-control ">
<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.Password" data-valmsg-replace="true"></span>
</div>
<div class="form-check">
<input type="checkbox" data-val="true" data-val-required="The CheckMeOut field is required." id="MyModel_CheckMeOut" name="MyModel.CheckMeOut" value="true" class="form-check-input "><input name="MyModel.CheckMeOut" type="hidden" value="false">
<label class="form-check-label" for="MyModel_CheckMeOut">Check Me Out</label>
</div>

Form controls


 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();
        }

        public class SampleModel
        {
            [Required]
            public string EmailAddress { get; set; }

            public string City { get; set; }

            public List<string> Cities { get; set; }

            [TextArea]
            public string Description { get; set; }
        }
    }

<abp-input asp-for="@Model.MyModel.EmailAddress" label="Email Address" placeholder="name@example.com" />
<abp-select asp-for="@Model.MyModel.City" asp-items="@Model.CityList" label="City">
    <option value="">Choose a city</option>
</abp-select>
<abp-select asp-for="@Model.MyModel.Cities" asp-items="@Model.CityList" label="Cities" />
<abp-input asp-for="@Model.MyModel.Description" label="Description" />

    <div class="mb-3">
        <label for="MyModel_EmailAddress">Email Address</label>
        <input placeholder="name@example.com" type="text" data-val="true" data-val-required="The EmailAddress field is required." id="MyModel_EmailAddress" name="MyModel.EmailAddress" value="" class="form-control ">
        <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.EmailAddress" data-valmsg-replace="true"></span>
    </div>
    <div class="mb-3">
        <label for="MyModel_City">City</label>
        <select id="MyModel_City" name="MyModel.City" class="form-control">
            <option value="">Choose a city</option>
            <option value="NY">New York</option>
            <option value="LDN">London</option>
            <option value="IST">Istanbul</option>
            <option value="MOS">Moscow</option>
        </select>
    </div>
    <div class="mb-3">
        <label for="MyModel_Cities">Cities</label>
        <select id="MyModel_Cities" multiple="multiple" name="MyModel.Cities" class="form-control">
            <option value="NY">New York</option>
            <option value="LDN">London</option>
            <option value="IST">Istanbul</option>
            <option value="MOS">Moscow</option>
        </select>
    </div>
    <div class="mb-3">
        <label for="MyModel_Description">Description</label>
        <textarea id="MyModel_Description" name="MyModel.Description" class="form-control "></textarea>
        <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.Description" data-valmsg-replace="true"></span>
    </div>

Sizing


 public class FormElementsModel : PageModel
    {
        public SampleModel MyModel { get; set; }

        public void OnGet()
        {
            MyModel = new SampleModel();
        }

        public class SampleModel
        {
            public string LargeInput { get; set; }

            public string SmallInput { get; set; }
        }
    }

<abp-input asp-for="@Model.MyModel.LargeInput" size="Large" />
<abp-input asp-for="@Model.MyModel.SmallInput" size="Small" />

<div class="mb-3">
    <label for="MyModel_LargeInput">LargeInput</label>
    <input type="text" id="MyModel_LargeInput" name="MyModel.LargeInput" value="" class="form-control form-control-lg">
    <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.LargeInput" data-valmsg-replace="true"></span>
</div>
<div class="mb-3">
    <label for="MyModel_SmallInput">SmallInput</label>
    <input type="text" id="MyModel_SmallInput" name="MyModel.SmallInput" value="" class="form-control form-control-sm">
    <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.SmallInput" data-valmsg-replace="true"></span>
</div>

Disabled And ReadOnly


 public class FormElementsModel : PageModel
    {
        public SampleModel MyModel { get; set; }

        public void OnGet()
        {
            MyModel = new SampleModel();
            MyModel.SampleInput0 = "This is a disabled input.";
            MyModel.SampleInput0 = "This is a disabled input.";
            MyModel.SampleInput1 = "This is a readonly input.";
        }

        public class SampleModel
        {
            public string SampleInput0 { get; set; }

            public string SampleInput1 { get; set; }

            public string SampleInput2 { get; set; }
        }
    }

<abp-input asp-for="@Model.MyModel.SampleInput0" disabled="true" />
<abp-input asp-for="@Model.MyModel.SampleInput1" readonly="True" />

<div class="mb-3">
    <label for="MyModel_SampleInput0">SampleInput0</label>
    <input type="text" id="MyModel_SampleInput0" name="MyModel.SampleInput0" value="This is a disabled input." disabled="" class="form-control ">
    <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.SampleInput0" data-valmsg-replace="true"></span>
</div>
<div class="mb-3">
    <label for="MyModel_SampleInput1">SampleInput1</label>
    <input type="text" id="MyModel_SampleInput1" name="MyModel.SampleInput1" value="This is a readonly input." class="form-control " readonly="">
    <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.SampleInput1" data-valmsg-replace="true"></span>
</div>

Checkboxes and radios


 public class FormElementsModel : PageModel
    {
        public SampleModel MyModel { get; set; }

        public void OnGet()
        {
            MyModel = new SampleModel();
        }

        public class SampleModel
        {
            public bool DefaultCheckbox { get; set; }

            public bool DisabledCheckbox { get; set; }
        }
    }

<abp-input asp-for="@Model.MyModel.DefaultCheckbox"/>
<abp-input asp-for="@Model.MyModel.DisabledCheckbox" disabled="true"/>

<div class="mb-3 form-check">
    <input type="checkbox" data-val="true" data-val-required="The DefaultCheckbox field is required." id="MyModel_DefaultCheckbox" name="MyModel.DefaultCheckbox" value="true" class="form-check-input "><input name="MyModel.DefaultCheckbox" type="hidden" value="false">
    <label class="form-check-label" for="MyModel_DefaultCheckbox">DefaultCheckbox</label>
</div>
<div class="mb-3 form-check">
    <input type="checkbox" data-val="true" data-val-required="The DisabledCheckbox field is required." id="MyModel_DisabledCheckbox" name="MyModel.DisabledCheckbox" value="true" disabled="" class="form-check-input "><input name="MyModel.DisabledCheckbox" type="hidden" value="false">
    <label class="form-check-label" for="MyModel_DisabledCheckbox">DisabledCheckbox</label>
</div>

 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";
        }

        public class SampleModel
        {
            [Display(Name="City")]
            public string CityRadio { get; set; }
        }
    }

<abp-radio asp-for="@Model.MyModel.CityRadio" asp-items="@Model.CityList" inline="true"/>

<div>
    <div class="custom-control custom-control-inline">
        <input type="radio" id="MyModel.CityRadioRadioNY" name="MyModel.CityRadio" value="NY" class="custom-control-input">
        <label class="custom-control-label" for="MyModel.CityRadioRadioNY">New York</label>
    </div>
    <div class="custom-control custom-control-inline">
        <input type="radio" id="MyModel.CityRadioRadioLDN" name="MyModel.CityRadio" value="LDN" class="custom-control-input">
        <label class="custom-control-label" for="MyModel.CityRadioRadioLDN">London</label>
    </div>
    <div class="custom-control custom-control-inline">
        <input type="radio" id="MyModel.CityRadioRadioIST" name="MyModel.CityRadio" value="IST" checked="checked" class="custom-control-input">
        <label class="custom-control-label" for="MyModel.CityRadioRadioIST">Istanbul</label>
    </div>
    <div class="custom-control custom-control-inline">
        <input type="radio" id="MyModel.CityRadioRadioMOS" name="MyModel.CityRadio" value="MOS" class="custom-control-input">
        <label class="custom-control-label" for="MyModel.CityRadioRadioMOS">Moscow</label>
    </div>
</div>

Enum


 public class FormElementsModel : PageModel
    {
        public SampleModel MyModel { get; set; }

        public void OnGet()
        {
            MyModel = new SampleModel();
        }

        public class SampleModel
        {
            public CarType CarType { get; set; }
        }

        public enum CarType
        {
            Sedan,
            Hatchback,
            StationWagon,
            Coupe
        }
    }

<abp-select asp-for="Sedan"/>

 <div class="mb-3">
     <label for="MyModel_CarType">CarType</label>
     <select data-val="true" data-val-required="The CarType field is required." id="MyModel_CarType" name="MyModel.CarType" class="form-control">
         <option selected="selected" value="0">Sedan</option>
         <option value="1">Hatchback</option>
         <option value="2">StationWagon</option>
         <option value="3">Coupe</option>
     </select>
 </div>

Suppress Label Generation


 public class FormElementsModel : PageModel
 {
     public SampleModel MyModel { get; set; }

     public void OnGet()
     {
         MyModel = new SampleModel();
     }

     public class SampleModel
     {
         [Required]
         public string Name { get; set; }
     }
 }


<abp-input asp-for="@Model.MyModel.Name" suppress-label="true"/>
                

<div class="mb-3">
    <input type="text" id="MyModel_Name" name="MyModel.Name" value="" class="form-control ">
    <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.Name" data-valmsg-replace="true"></span>
</div>