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>
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>
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>
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>
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>
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>
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>