public class DynamicFormsModel : PageModel
{
[BindProperty]
public DetailedModel MyDetailedModel { get; set; }
public List<SelectListItem> CountryList { get; set; } = new List<SelectListItem>
{
new SelectListItem { Value = "CA", Text = "Canada"},
new SelectListItem { Value = "US", Text = "USA"},
new SelectListItem { Value = "UK", Text = "United Kingdom"},
new SelectListItem { Value = "RU", Text = "Russia"}
};
public void OnGet()
{
MyDetailedModel = new DetailedModel
{
Name = "",
Description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
IsActive = true,
Age = 65,
Day = DateTime.Now,
MyCarType = CarType.Coupe,
YourCarType = CarType.Sedan,
Country = "RU",
NeighborCountries = new List<string>() { "UK", "CA" }
};
}
public class DetailedModel
{
[Required]
[Placeholder("Enter your name...")]
[Display(Name = "Name")]
public string Name { get; set; }
[TextArea(Rows = 4)]
[Display(Name = "Description")]
[InputInfoText("Describe Yourself")]
public string Description { get; set; }
[Required]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }
[Display(Name = "Is Active")]
public bool IsActive { get; set; }
[Required]
[Display(Name = "Age")]
public int Age { get; set; }
[Required]
[Display(Name = "My Car Type")]
public CarType MyCarType { get; set; }
[Required]
[AbpRadioButton(Inline = true)]
[Display(Name = "Your Car Type")]
public CarType YourCarType { get; set; }
[DataType(DataType.Date)]
[Display(Name = "Day")]
public DateTime Day { get; set; }
[SelectItems(nameof(CountryList))]
[Display(Name = "Country")]
public string Country { get; set; }
[SelectItems(nameof(CountryList))]
[Display(Name = "Neighbor Countries")]
public List<string> NeighborCountries { get; set; }
}
public enum CarType
{
Sedan,
Hatchback,
StationWagon,
Coupe
}
}
<abp-dynamic-form abp-model="@Model.MyDetailedModel" submit-button="true" />
<form method="post" novalidate="novalidate">
<div class="mb-3">
<label for="MyDetailedModel_Name">Name</label>
<input type="text" data-val="true" data-val-required="The Name field is required." id="MyDetailedModel_Name" name="MyDetailedModel.Name" value="" class="form-control " placeholder="Enter your name...">
<span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Name" data-valmsg-replace="true"></span>
</div>
<div class="mb-3">
<label for="MyDetailedModel_Description">Description</label>
<textarea id="MyDetailedModel_Description" name="MyDetailedModel.Description" rows="4" class="form-control ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
<span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Description" data-valmsg-replace="true"></span>
</div>
<div class="mb-3">
<label for="MyDetailedModel_Password">Password</label>
<input type="password" data-val="true" data-val-required="The Password field is required." id="MyDetailedModel_Password" name="MyDetailedModel.Password" class="form-control ">
<span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Password" data-valmsg-replace="true"></span>
</div>
<div class="mb-3 form-check">
<input type="checkbox" checked="checked" data-val="true" data-val-required="The Is Active field is required." id="MyDetailedModel_IsActive" name="MyDetailedModel.IsActive" value="true" class="form-check-input "><input name="MyDetailedModel.IsActive" type="hidden" value="false">
<label class="form-check-label" for="MyDetailedModel_IsActive">Is Active</label>
</div>
<div class="mb-3">
<label for="MyDetailedModel_Age">Age</label>
<input type="number" data-val="true" data-val-required="The Age field is required." id="MyDetailedModel_Age" name="MyDetailedModel.Age" value="65" class="form-control ">
<span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Age" data-valmsg-replace="true"></span>
</div>
<div class="mb-3">
<label for="MyDetailedModel_MyCarType">My Car Type</label>
<select data-val="true" data-val-required="The My Car Type field is required." id="MyDetailedModel_MyCarType" name="MyDetailedModel.MyCarType" class="form-control valid" aria-describedby="MyDetailedModel_MyCarType-error" aria-invalid="false">
<option value="0">Sedan</option>
<option value="1">Hatchback</option>
<option value="2">StationWagon</option>
<option selected="selected" value="3">Coupe</option>
</select>
</div>
<div class="custom-control custom-control-inline">
<input type="radio" id="MyDetailedModel.YourCarTypeRadio0" name="MyDetailedModel.YourCarType" value="0" checked="checked" class="custom-control-input">
<label class="custom-control-label" for="MyDetailedModel.YourCarTypeRadio0">Sedan</label>
</div>
<div class="custom-control custom-control-inline">
<input type="radio" id="MyDetailedModel.YourCarTypeRadio1" name="MyDetailedModel.YourCarType" value="1" class="custom-control-input">
<label class="custom-control-label" for="MyDetailedModel.YourCarTypeRadio1">Hatchback</label>
</div>
<div class="custom-control custom-control-inline">
<input type="radio" id="MyDetailedModel.YourCarTypeRadio2" name="MyDetailedModel.YourCarType" value="2" class="custom-control-input">
<label class="custom-control-label" for="MyDetailedModel.YourCarTypeRadio2">StationWagon</label>
</div>
<div class="custom-control custom-control-inline">
<input type="radio" id="MyDetailedModel.YourCarTypeRadio3" name="MyDetailedModel.YourCarType" value="3" class="custom-control-input">
<label class="custom-control-label" for="MyDetailedModel.YourCarTypeRadio3">Coupe</label>
</div>
<div class="mb-3">
<label for="MyDetailedModel_Day">Day</label>
<input type="date" data-val="true" data-val-required="The Day field is required." id="MyDetailedModel_Day" name="MyDetailedModel.Day" value="2018-12-19" class="form-control ">
<span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Day" data-valmsg-replace="true"></span>
</div>
<div class="mb-3">
<label for="MyDetailedModel_Country">Country</label>
<select id="MyDetailedModel_Country" name="MyDetailedModel.Country" class="form-control">
<option value="CA">Canada</option>
<option value="US">USA</option>
<option value="UK">United Kingdom</option>
<option selected="selected" value="RU">Russia</option>
</select>
</div>
<div class="mb-3">
<label for="MyDetailedModel_NeighborCountries">Neighbor Countries</label>
<select id="MyDetailedModel_NeighborCountries" multiple="multiple" name="MyDetailedModel.NeighborCountries" class="form-control">
<option selected="selected" value="CA">Canada</option>
<option value="US">USA</option>
<option selected="selected" value="UK">United Kingdom</option>
<option value="RU">Russia</option>
</select>
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8Kbwu8pRBWJCh6KUtTDoAuTDS8evmWgc2dNZYWkzjZ1xFcA9ptyCgQBCTgA9NMoh_FXGRBDVunA7fx0TF1df1_OxaxerJvuWRCwFBhy8KbPcgXrVtmtSp6Z28gpFpO0Z1TSO1pdgdTwEXj43DBWq0Hc">
<button type="submit" class="btn btn-primary" data-busy-text="Processing..."><span>Submit</span></button>
</form>
public class DynamicFormsModel : PageModel
{
public OrderExampleModel MyOrderExampleModel { get; set; }
public void OnGet()
{
MyOrderExampleModel = new OrderExampleModel();
}
public class OrderExampleModel
{
[DisplayOrder(10005)]
public string Surname{ get; set; }
//Default 10000
public string EmailAddress { get; set; }
[DisplayOrder(10003)]
public string Name { get; set; }
[DisplayOrder(9999)]
public string City { get; set; }
}
}
<abp-dynamic-form abp-model="Model.MyOrderExampleModel"/>
<form method="post">
<div class="mb-3">
<label for="MyOrderExampleModel_City">City</label>
<input type="text" id="MyOrderExampleModel_City" name="MyOrderExampleModel.City" value="" class="form-control ">
<span class="text-danger field-validation-valid" data-valmsg-for="MyOrderExampleModel.City" data-valmsg-replace="true"></span>
</div>
<div class="mb-3">
<label for="MyOrderExampleModel_EmailAddress">EmailAddress</label>
<input type="text" id="MyOrderExampleModel_EmailAddress" name="MyOrderExampleModel.EmailAddress" value="" class="form-control ">
<span class="text-danger field-validation-valid" data-valmsg-for="MyOrderExampleModel.EmailAddress" data-valmsg-replace="true"></span>
</div>
<div class="mb-3">
<label for="MyOrderExampleModel_Name">Name</label>
<input type="text" id="MyOrderExampleModel_Name" name="MyOrderExampleModel.Name" value="" class="form-control ">
<span class="text-danger field-validation-valid" data-valmsg-for="MyOrderExampleModel.Name" data-valmsg-replace="true"></span>
</div>
<div class="mb-3">
<label for="MyOrderExampleModel_Surname">Surname</label>
<input type="text" id="MyOrderExampleModel_Surname" name="MyOrderExampleModel.Surname" value="" class="form-control ">
<span class="text-danger field-validation-valid" data-valmsg-for="MyOrderExampleModel.Surname" data-valmsg-replace="true"></span>
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8Kbwu8pRBWJCh6KUtTDoAuQICDXiCEgWpOHc7uIzSQ2dKiezdDkWplt2D8XLsCX39Z8B_GnplHrAfZgZ5GkNZN-tkEgKlMtyjoWv9MADyYb2MmWw-LuW8wfUXI9YSza5lo_8P03Vff4NxmrV3boG0xQ">
</form>
public class DynamicFormsModel : PageModel
{
public AttributeExamplesModel MyAttributeExamplesModel { get; set; }
public void OnGet()
{
MyAttributeExamplesModel = new AttributeExamplesModel();
MyAttributeExamplesModel.DisabledInput = "Disabled Input";
MyAttributeExamplesModel.ReadonlyInput = "Readonly Input";
MyAttributeExamplesModel.LargeInput = "Large Input";
MyAttributeExamplesModel.SmallInput = "Small Input";
}
public class AttributeExamplesModel
{
[HiddenInput]
public string HiddenInput { get; set; }
[DisabledInput]
public string DisabledInput{ get; set; }
[ReadOnlyInput]
public string ReadonlyInput { get; set; }
[FormControlSize(AbpFormControlSize.Large)]
public string LargeInput { get; set; }
[FormControlSize(AbpFormControlSize.Small)]
public string SmallInput { get; set; }
}
}
<abp-dynamic-form abp-model="Model.MyAttributeExamplesModel"/>
<form method="post">
<div class="mb-3">
<input type="hidden" id="MyAttributeExamplesModel_HiddenInput" name="MyAttributeExamplesModel.HiddenInput" value="" class="form-control ">
</div>
<div class="mb-3">
<label for="MyAttributeExamplesModel_DisabledInput">DisabledInput</label>
<input type="text" id="MyAttributeExamplesModel_DisabledInput" name="MyAttributeExamplesModel.DisabledInput" value="Disabled Input" disabled="" class="form-control ">
<span class="text-danger field-validation-valid" data-valmsg-for="MyAttributeExamplesModel.DisabledInput" data-valmsg-replace="true"></span>
</div>
<div class="mb-3">
<label for="MyAttributeExamplesModel_ReadonlyInput">ReadonlyInput</label>
<input type="text" id="MyAttributeExamplesModel_ReadonlyInput" name="MyAttributeExamplesModel.ReadonlyInput" value="Readonly Input" class="form-control " readonly="">
<span class="text-danger field-validation-valid" data-valmsg-for="MyAttributeExamplesModel.ReadonlyInput" data-valmsg-replace="true"></span>
</div>
<div class="mb-3">
<label for="MyAttributeExamplesModel_LargeInput">LargeInput</label>
<input type="text" id="MyAttributeExamplesModel_LargeInput" name="MyAttributeExamplesModel.LargeInput" value="Large Input" class="form-control form-control-lg">
<span class="text-danger field-validation-valid" data-valmsg-for="MyAttributeExamplesModel.LargeInput" data-valmsg-replace="true"></span>
</div>
<div class="mb-3">
<label for="MyAttributeExamplesModel_SmallInput">SmallInput</label>
<input type="text" id="MyAttributeExamplesModel_SmallInput" name="MyAttributeExamplesModel.SmallInput" value="Small Input" class="form-control form-control-sm">
<span class="text-danger field-validation-valid" data-valmsg-for="MyAttributeExamplesModel.SmallInput" data-valmsg-replace="true"></span>
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8Kbwu8pRBWJCh6KUtTDoAuSUKLRRJ2JhujqxKEZfzYxIDYQtg1knqOh9zyG1DjaXRnoavm1876JtbePc4El_6aDqwMUKuXshQhXIunS_hrygXH5v-Tm6Qw_zL-JEJnSmd6Q4EwCtwDBwGX0in4-swG8">
</form>
public class DynamicFormsModel : PageModel
{
public FormContentExampleModel MyFormContentExampleModel { get; set; }
public void OnGet()
{
MyFormContentExampleModel = new FormContentExampleModel();
}
public class FormContentExampleModel
{
public string SampleInput { get; set; }
}
}
<abp-dynamic-form abp-model="@Model.MyFormContentExampleModel">
<div>
First Div! <br />
---------
</div>
<abp-form-content />
<div>
--------- <br />
Second Div!
</div>
</abp-dynamic-form>
<form method="post">
<div>
First Div! <br />
---------
</div>
<div>
<div class="mb-3">
<label for="MyFormContentExampleModel_SampleInput">SampleInput</label>
<input type="text" id="MyFormContentExampleModel_SampleInput" name="MyFormContentExampleModel.SampleInput" value="" class="form-control ">
<span class="text-danger field-validation-valid" data-valmsg-for="MyFormContentExampleModel.SampleInput" data-valmsg-replace="true"></span>
</div>
</div>
<div>
--------- <br />
Second Div!
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8Kbwu8pRBWJCh6KUtTDoAuS4l6PkkSnj6NFFQcJPBjnUn13wQKxp0lm1Dw84zvR-1QrE4byCemr2_qENxB-Ob_YEc6yw3bvQcqN6VQ0ZPN4Sv6DvX5okAWE52wRXmNcHlTliFOPdjLcKcv3qBFXXlVk">
</form>