+ 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="form-group">
+<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="form-group">
+<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>
+
+ 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" />
+<abp-select asp-for="@@Model.MyModel.Cities" asp-items="@@Model.CityList" label="Cities" />
+<abp-input asp-for="@@Model.MyModel.Description" label="Description" />
+
+<div class="form-group">
+<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="form-group">
+<label for="MyModel_City">City</label>
+<select id="MyModel_City" name="MyModel.City" 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="form-group">
+<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="form-group">
+<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>
+
+ 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="form-group">
+<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="form-group">
+<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>
+
+ 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.";
+ MyModel.SampleInput2 = "This is a readonly plain-text.";
+ }
+
+ 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" />
+<abp-input asp-for="@@Model.MyModel.SampleInput2" readonly="True_PlainText"/>
+
+<div class="form-group">
+ <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="form-group">
+ <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>
+<div class="form-group">
+ <label for="MyModel_SampleInput2">SampleInput2</label>
+ <input type="text" id="MyModel_SampleInput2" name="MyModel.SampleInput2" value="This is a readonly plain-text." class="form-control-plaintext " readonly="">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.SampleInput2" data-valmsg-replace="true"></span>
+</div>
+
+ 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="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="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 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-radio 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-radio 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-radio 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-radio 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>
+
+ 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="@Model.MyModel.CarType"/>
+
+ <div class="form-group">
+ <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>
+