-<abp-dynamic-form abp-model="Model.PersonInput"/> --
+public class DynamicFormsModel : PageModel
+ {
+ [BindProperty]
+ public DetailedModel MyDetailedModel { get; set; }
-# Override an input Example
+ 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"}
+ };
-
-
-
-
-
- Posted Values:
-
- Name: @Model.PersonInput.Name
- Surname: @Model.PersonInput.Surname
- City: @Model.PersonInput.City
- Phone.Name: @Model.PersonInput.Phone.Name
- Phone.Number: @Model.PersonInput.Phone.Number
- Day: @Model.PersonInput.Day.ToString("yyyy-MM-dd")
- Country: @Model.PersonInput.Country
- IsActive: @Model.PersonInput.IsActive
-
-
-
-
-<abp-dynamic-form abp-model="Model.PersonInput">
- <abp-input asp-for="Model.PersonInput.Name" label="Overrided name" />
- <abp-input asp-for="Model.PersonInput.Phone.Number" label="Overrided number" />
- <abp-button button-type="Primary" type="submit" text="submit" />
-</abp-dynamic-form>
-
+ public void OnGet()
+ {
+ MyDetailedModel = new DetailedModel
+ {
+ Name = "John Surname",
+ 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]
+ [Display(Name = "Name")]
+ public string Name { get; set; }
+
+ [TextArea(Rows = 4)]
+ [Display(Name = "Description")]
+ 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="form-group">
+<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="John Surname" class="form-control ">
+<span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Name" data-valmsg-replace="true"></span>
+ </div>
+ <div class="form-group">
+<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="form-group">
+<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="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="form-group">
+<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="form-group">
+<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-radio 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-radio 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-radio 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-radio 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="form-group">
+<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="form-group">
+<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="form-group">
+<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>
+
+
+
-# Form with Button Example
+Order Attribute Example
-
- Posted Values:
-
- Name: @Model.PersonInput.Name
- Surname: @Model.PersonInput.Surname
- City: @Model.PersonInput.City
- Phone.Name: @Model.PersonInput.Phone.Name
- Phone.Number: @Model.PersonInput.Phone.Number
- Day: @Model.PersonInput.Day.ToString("yyyy-MM-dd")
- Country: @Model.PersonInput.Country
- IsActive: @Model.PersonInput.IsActive
-
+
-<abp-dynamic-form abp-model="Model.PersonInput" submit-button="true"/>
-
+
+
+
+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="form-group">
+<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="form-group">
+<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="form-group">
+<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="form-group">
+<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>
+
+
+
-# Non-dynamic Form
+Attribute Examples
-
-
- Posted Values:
-
- Name: @Model.PersonInput.Name
- Surname: @Model.PersonInput.Surname
- Age: @Model.PersonInput.Age
- Is Active: @Model.PersonInput.IsActive
- Day: @Model.PersonInput.Day
- City: @Model.PersonInput.City
- Country: @Model.PersonInput.Country
- Phone.Number: @Model.PersonInput.Phone.Number
- Phone.Name: @Model.PersonInput.Phone.Name
-
+
+
+
+
+public class DynamicFormsModel : PageModel
+ {
+ public AttributeExamplesModel MyAttributeExamplesModel { get; set; }
+
+ public void OnGet()
+ {
+ MyAttributeExamplesModel = new AttributeExamplesModel();
+ MyAttributeExamplesModel.DisabledInput = "Disabled Input";
+ MyAttributeExamplesModel.ReadonlyInput = "Readonly Input";
+ MyAttributeExamplesModel.ReadonlyPlainTextInput = "Readonly Plain Text 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; }
+
+ [ReadOnlyInput(PlainText = true)]
+ public string ReadonlyPlainTextInput { 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">
- <abp-input asp-for="Model.PersonInput.Name" />
- <abp-input asp-for="Model.PersonInput.Surname" />
- <abp-input asp-for="Model.PersonInput.Age" />
- <abp-input asp-for="Model.PersonInput.IsActive" />
- <abp-input asp-for="Model.PersonInput.Day" />
- <abp-select asp-for="Model.PersonInput.City" />
- <abp-select asp-for="Model.PersonInput.Country" />
- <abp-input asp-for="Model.PersonInput.Phone.Number" />
- <abp-input asp-for="Model.PersonInput.Phone.Name" />
- <abp-button type="submit" button-type="Primary" text="Submit" />
+ <div class="form-group">
+<input type="hidden" id="MyAttributeExamplesModel_HiddenInput" name="MyAttributeExamplesModel.HiddenInput" value="" class="form-control ">
+ </div>
+ <div class="form-group">
+<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="form-group">
+<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="form-group">
+<label for="MyAttributeExamplesModel_ReadonlyPlainTextInput">ReadonlyPlainTextInput</label>
+<input type="text" id="MyAttributeExamplesModel_ReadonlyPlainTextInput" name="MyAttributeExamplesModel.ReadonlyPlainTextInput" value="Readonly Plain Text Input" class="form-control-plaintext " readonly="">
+<span class="text-danger field-validation-valid" data-valmsg-for="MyAttributeExamplesModel.ReadonlyPlainTextInput" data-valmsg-replace="true"></span>
+ </div>
+ <div class="form-group">
+<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="form-group">
+<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>
-
+
+
+
-# Form Content Placement
+Form Content Placement
-
+
+
+ First Div!
+ ---------
+
+
+ Second Div!
+
-
- Posted Values:
-
- Name: @Model.PersonInput.Name
- Name: @Model.PersonInput.Surname
- City: @Model.PersonInput.City
- Phone.Name: @Model.PersonInput.Phone.Name
- Phone.Number: @Model.PersonInput.Phone.Number
- Day: @Model.PersonInput.Day.ToString("yyyy-MM-dd")
- Country: @Model.PersonInput.Country
- IsActive: @Model.PersonInput.IsActive
-
-
-<abp-dynamic-form abp-model="@Model.PersonInput">
- <abp-form-content />
- <abp-button button-type="Primary" type="submit" text="submit" />
+
+
+
+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="form-group">
+ <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>
+