imhven
/
abp
mirror of https://github.com/abpframework/abp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

dynamic-form docs improvements

Browse Source
pull/670/head
Yunus Emre Kalkan 7 years ago
parent 23a57fa897
commit 20fb9b52c6
2 changed files with 89 additions and 83 deletions
Show Stats Download Patch File Download Diff File

153
framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml
Unescape View File

@ -53,7 +53,7 @@ public class DynamicFormsModel : PageModel
{
MyDetailedModel = new DetailedModel
{
Name = "John Surname",
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,
@ -68,6 +68,7 @@ public class DynamicFormsModel : PageModel
public class DetailedModel
{
[Required]
[Placeholder("Enter your name...")]
[Display(Name = "Name")]
public string Name { get; set; }
@ -121,83 +122,83 @@ public class DynamicFormsModel : PageModel
</abp-tab>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-dynamic-form abp-model=&quot;@Model.MyDetailedModel&quot; submit-button=&quot;true&quot; /&gt;
&lt;abp-dynamic-form abp-model=&quot;@@Model.MyDetailedModel&quot; submit-button=&quot;true&quot; /&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;form method=&quot;post&quot; novalidate=&quot;novalidate&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyDetailedModel_Name&quot;&gt;Name&lt;/label&gt;
&lt;input type=&quot;text&quot; data-val=&quot;true&quot; data-val-required=&quot;The Name field is required.&quot; id=&quot;MyDetailedModel_Name&quot; name=&quot;MyDetailedModel.Name&quot; value=&quot;John Surname&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyDetailedModel.Name&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;label for=&quot;MyDetailedModel_Name&quot;&gt;Name&lt;/label&gt;
&lt;input type=&quot;text&quot; data-val=&quot;true&quot; data-val-required=&quot;The Name field is required.&quot; id=&quot;MyDetailedModel_Name&quot; name=&quot;MyDetailedModel.Name&quot; value=&quot;&quot; class=&quot;form-control &quot; placeholder=&quot;Enter your name...&quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyDetailedModel.Name&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyDetailedModel_Description&quot;&gt;Description&lt;/label&gt;
&lt;textarea id=&quot;MyDetailedModel_Description&quot; name=&quot;MyDetailedModel.Description&quot; rows=&quot;4&quot; class=&quot;form-control &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/textarea&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyDetailedModel.Description&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;label for=&quot;MyDetailedModel_Description&quot;&gt;Description&lt;/label&gt;
&lt;textarea id=&quot;MyDetailedModel_Description&quot; name=&quot;MyDetailedModel.Description&quot; rows=&quot;4&quot; class=&quot;form-control &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/textarea&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyDetailedModel.Description&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyDetailedModel_Password&quot;&gt;Password&lt;/label&gt;
&lt;input type=&quot;password&quot; data-val=&quot;true&quot; data-val-required=&quot;The Password field is required.&quot; id=&quot;MyDetailedModel_Password&quot; name=&quot;MyDetailedModel.Password&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyDetailedModel.Password&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;label for=&quot;MyDetailedModel_Password&quot;&gt;Password&lt;/label&gt;
&lt;input type=&quot;password&quot; data-val=&quot;true&quot; data-val-required=&quot;The Password field is required.&quot; id=&quot;MyDetailedModel_Password&quot; name=&quot;MyDetailedModel.Password&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyDetailedModel.Password&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;form-check&quot;&gt;
&lt;input type=&quot;checkbox&quot; checked=&quot;checked&quot; data-val=&quot;true&quot; data-val-required=&quot;The Is Active field is required.&quot; id=&quot;MyDetailedModel_IsActive&quot; name=&quot;MyDetailedModel.IsActive&quot; value=&quot;true&quot; class=&quot;form-check-input &quot;&gt;&lt;input name=&quot;MyDetailedModel.IsActive&quot; type=&quot;hidden&quot; value=&quot;false&quot;&gt;
&lt;label class=&quot;form-check-label&quot; for=&quot;MyDetailedModel_IsActive&quot;&gt;Is Active&lt;/label&gt;
&lt;input type=&quot;checkbox&quot; checked=&quot;checked&quot; data-val=&quot;true&quot; data-val-required=&quot;The Is Active field is required.&quot; id=&quot;MyDetailedModel_IsActive&quot; name=&quot;MyDetailedModel.IsActive&quot; value=&quot;true&quot; class=&quot;form-check-input &quot;&gt;&lt;input name=&quot;MyDetailedModel.IsActive&quot; type=&quot;hidden&quot; value=&quot;false&quot;&gt;
&lt;label class=&quot;form-check-label&quot; for=&quot;MyDetailedModel_IsActive&quot;&gt;Is Active&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyDetailedModel_Age&quot;&gt;Age&lt;/label&gt;
&lt;input type=&quot;number&quot; data-val=&quot;true&quot; data-val-required=&quot;The Age field is required.&quot; id=&quot;MyDetailedModel_Age&quot; name=&quot;MyDetailedModel.Age&quot; value=&quot;65&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyDetailedModel.Age&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;label for=&quot;MyDetailedModel_Age&quot;&gt;Age&lt;/label&gt;
&lt;input type=&quot;number&quot; data-val=&quot;true&quot; data-val-required=&quot;The Age field is required.&quot; id=&quot;MyDetailedModel_Age&quot; name=&quot;MyDetailedModel.Age&quot; value=&quot;65&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyDetailedModel.Age&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyDetailedModel_MyCarType&quot;&gt;My Car Type&lt;/label&gt;
&lt;select data-val=&quot;true&quot; data-val-required=&quot;The My Car Type field is required.&quot; id=&quot;MyDetailedModel_MyCarType&quot; name=&quot;MyDetailedModel.MyCarType&quot; class=&quot;form-control valid&quot; aria-describedby=&quot;MyDetailedModel_MyCarType-error&quot; aria-invalid=&quot;false&quot;&gt;
&lt;option value=&quot;0&quot;&gt;Sedan&lt;/option&gt;
&lt;option value=&quot;1&quot;&gt;Hatchback&lt;/option&gt;
&lt;option value=&quot;2&quot;&gt;StationWagon&lt;/option&gt;
&lt;option selected=&quot;selected&quot; value=&quot;3&quot;&gt;Coupe&lt;/option&gt;
&lt;/select&gt;
&lt;label for=&quot;MyDetailedModel_MyCarType&quot;&gt;My Car Type&lt;/label&gt;
&lt;select data-val=&quot;true&quot; data-val-required=&quot;The My Car Type field is required.&quot; id=&quot;MyDetailedModel_MyCarType&quot; name=&quot;MyDetailedModel.MyCarType&quot; class=&quot;form-control valid&quot; aria-describedby=&quot;MyDetailedModel_MyCarType-error&quot; aria-invalid=&quot;false&quot;&gt;
&lt;option value=&quot;0&quot;&gt;Sedan&lt;/option&gt;
&lt;option value=&quot;1&quot;&gt;Hatchback&lt;/option&gt;
&lt;option value=&quot;2&quot;&gt;StationWagon&lt;/option&gt;
&lt;option selected=&quot;selected&quot; value=&quot;3&quot;&gt;Coupe&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;div class=&quot;custom-control custom-radio custom-control-inline&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;MyDetailedModel.YourCarTypeRadio0&quot; name=&quot;MyDetailedModel.YourCarType&quot; value=&quot;0&quot; checked=&quot;checked&quot; class=&quot;custom-control-input&quot;&gt;
&lt;label class=&quot;custom-control-label&quot; for=&quot;MyDetailedModel.YourCarTypeRadio0&quot;&gt;Sedan&lt;/label&gt;
&lt;input type=&quot;radio&quot; id=&quot;MyDetailedModel.YourCarTypeRadio0&quot; name=&quot;MyDetailedModel.YourCarType&quot; value=&quot;0&quot; checked=&quot;checked&quot; class=&quot;custom-control-input&quot;&gt;
&lt;label class=&quot;custom-control-label&quot; for=&quot;MyDetailedModel.YourCarTypeRadio0&quot;&gt;Sedan&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;custom-control custom-radio custom-control-inline&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;MyDetailedModel.YourCarTypeRadio1&quot; name=&quot;MyDetailedModel.YourCarType&quot; value=&quot;1&quot; class=&quot;custom-control-input&quot;&gt;
&lt;label class=&quot;custom-control-label&quot; for=&quot;MyDetailedModel.YourCarTypeRadio1&quot;&gt;Hatchback&lt;/label&gt;
&lt;input type=&quot;radio&quot; id=&quot;MyDetailedModel.YourCarTypeRadio1&quot; name=&quot;MyDetailedModel.YourCarType&quot; value=&quot;1&quot; class=&quot;custom-control-input&quot;&gt;
&lt;label class=&quot;custom-control-label&quot; for=&quot;MyDetailedModel.YourCarTypeRadio1&quot;&gt;Hatchback&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;custom-control custom-radio custom-control-inline&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;MyDetailedModel.YourCarTypeRadio2&quot; name=&quot;MyDetailedModel.YourCarType&quot; value=&quot;2&quot; class=&quot;custom-control-input&quot;&gt;
&lt;label class=&quot;custom-control-label&quot; for=&quot;MyDetailedModel.YourCarTypeRadio2&quot;&gt;StationWagon&lt;/label&gt;
&lt;input type=&quot;radio&quot; id=&quot;MyDetailedModel.YourCarTypeRadio2&quot; name=&quot;MyDetailedModel.YourCarType&quot; value=&quot;2&quot; class=&quot;custom-control-input&quot;&gt;
&lt;label class=&quot;custom-control-label&quot; for=&quot;MyDetailedModel.YourCarTypeRadio2&quot;&gt;StationWagon&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;custom-control custom-radio custom-control-inline&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;MyDetailedModel.YourCarTypeRadio3&quot; name=&quot;MyDetailedModel.YourCarType&quot; value=&quot;3&quot; class=&quot;custom-control-input&quot;&gt;
&lt;label class=&quot;custom-control-label&quot; for=&quot;MyDetailedModel.YourCarTypeRadio3&quot;&gt;Coupe&lt;/label&gt;
&lt;input type=&quot;radio&quot; id=&quot;MyDetailedModel.YourCarTypeRadio3&quot; name=&quot;MyDetailedModel.YourCarType&quot; value=&quot;3&quot; class=&quot;custom-control-input&quot;&gt;
&lt;label class=&quot;custom-control-label&quot; for=&quot;MyDetailedModel.YourCarTypeRadio3&quot;&gt;Coupe&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyDetailedModel_Day&quot;&gt;Day&lt;/label&gt;
&lt;input type=&quot;date&quot; data-val=&quot;true&quot; data-val-required=&quot;The Day field is required.&quot; id=&quot;MyDetailedModel_Day&quot; name=&quot;MyDetailedModel.Day&quot; value=&quot;2018-12-19&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyDetailedModel.Day&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;label for=&quot;MyDetailedModel_Day&quot;&gt;Day&lt;/label&gt;
&lt;input type=&quot;date&quot; data-val=&quot;true&quot; data-val-required=&quot;The Day field is required.&quot; id=&quot;MyDetailedModel_Day&quot; name=&quot;MyDetailedModel.Day&quot; value=&quot;2018-12-19&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyDetailedModel.Day&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyDetailedModel_Country&quot;&gt;Country&lt;/label&gt;
&lt;select id=&quot;MyDetailedModel_Country&quot; name=&quot;MyDetailedModel.Country&quot; class=&quot;form-control&quot;&gt;
&lt;option value=&quot;CA&quot;&gt;Canada&lt;/option&gt;
&lt;option value=&quot;US&quot;&gt;USA&lt;/option&gt;
&lt;option value=&quot;UK&quot;&gt;United Kingdom&lt;/option&gt;
&lt;option selected=&quot;selected&quot; value=&quot;RU&quot;&gt;Russia&lt;/option&gt;
&lt;/select&gt;
&lt;label for=&quot;MyDetailedModel_Country&quot;&gt;Country&lt;/label&gt;
&lt;select id=&quot;MyDetailedModel_Country&quot; name=&quot;MyDetailedModel.Country&quot; class=&quot;form-control&quot;&gt;
&lt;option value=&quot;CA&quot;&gt;Canada&lt;/option&gt;
&lt;option value=&quot;US&quot;&gt;USA&lt;/option&gt;
&lt;option value=&quot;UK&quot;&gt;United Kingdom&lt;/option&gt;
&lt;option selected=&quot;selected&quot; value=&quot;RU&quot;&gt;Russia&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyDetailedModel_NeighborCountries&quot;&gt;Neighbor Countries&lt;/label&gt;
&lt;select id=&quot;MyDetailedModel_NeighborCountries&quot; multiple=&quot;multiple&quot; name=&quot;MyDetailedModel.NeighborCountries&quot; class=&quot;form-control&quot;&gt;
&lt;option selected=&quot;selected&quot; value=&quot;CA&quot;&gt;Canada&lt;/option&gt;
&lt;option value=&quot;US&quot;&gt;USA&lt;/option&gt;
&lt;option selected=&quot;selected&quot; value=&quot;UK&quot;&gt;United Kingdom&lt;/option&gt;
&lt;option value=&quot;RU&quot;&gt;Russia&lt;/option&gt;
&lt;/select&gt;
&lt;label for=&quot;MyDetailedModel_NeighborCountries&quot;&gt;Neighbor Countries&lt;/label&gt;
&lt;select id=&quot;MyDetailedModel_NeighborCountries&quot; multiple=&quot;multiple&quot; name=&quot;MyDetailedModel.NeighborCountries&quot; class=&quot;form-control&quot;&gt;
&lt;option selected=&quot;selected&quot; value=&quot;CA&quot;&gt;Canada&lt;/option&gt;
&lt;option value=&quot;US&quot;&gt;USA&lt;/option&gt;
&lt;option selected=&quot;selected&quot; value=&quot;UK&quot;&gt;United Kingdom&lt;/option&gt;
&lt;option value=&quot;RU&quot;&gt;Russia&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;input name=&quot;__RequestVerificationToken&quot; type=&quot;hidden&quot; value=&quot;CfDJ8Kbwu8pRBWJCh6KUtTDoAuTDS8evmWgc2dNZYWkzjZ1xFcA9ptyCgQBCTgA9NMoh_FXGRBDVunA7fx0TF1df1_OxaxerJvuWRCwFBhy8KbPcgXrVtmtSp6Z28gpFpO0Z1TSO1pdgdTwEXj43DBWq0Hc&quot;&gt;
&lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Submit&lt;/span&gt;&lt;/button&gt;
@ -253,24 +254,24 @@ public class DynamicFormsModel : PageModel
<pre><code>
&lt;form method=&quot;post&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyOrderExampleModel_City&quot;&gt;City&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyOrderExampleModel_City&quot; name=&quot;MyOrderExampleModel.City&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyOrderExampleModel.City&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;label for=&quot;MyOrderExampleModel_City&quot;&gt;City&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyOrderExampleModel_City&quot; name=&quot;MyOrderExampleModel.City&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyOrderExampleModel.City&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyOrderExampleModel_EmailAddress&quot;&gt;EmailAddress&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyOrderExampleModel_EmailAddress&quot; name=&quot;MyOrderExampleModel.EmailAddress&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyOrderExampleModel.EmailAddress&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;label for=&quot;MyOrderExampleModel_EmailAddress&quot;&gt;EmailAddress&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyOrderExampleModel_EmailAddress&quot; name=&quot;MyOrderExampleModel.EmailAddress&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyOrderExampleModel.EmailAddress&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyOrderExampleModel_Name&quot;&gt;Name&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyOrderExampleModel_Name&quot; name=&quot;MyOrderExampleModel.Name&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyOrderExampleModel.Name&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;label for=&quot;MyOrderExampleModel_Name&quot;&gt;Name&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyOrderExampleModel_Name&quot; name=&quot;MyOrderExampleModel.Name&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyOrderExampleModel.Name&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyOrderExampleModel_Surname&quot;&gt;Surname&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyOrderExampleModel_Surname&quot; name=&quot;MyOrderExampleModel.Surname&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyOrderExampleModel.Surname&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;label for=&quot;MyOrderExampleModel_Surname&quot;&gt;Surname&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyOrderExampleModel_Surname&quot; name=&quot;MyOrderExampleModel.Surname&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyOrderExampleModel.Surname&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;input name=&quot;__RequestVerificationToken&quot; type=&quot;hidden&quot; value=&quot;CfDJ8Kbwu8pRBWJCh6KUtTDoAuQICDXiCEgWpOHc7uIzSQ2dKiezdDkWplt2D8XLsCX39Z8B_GnplHrAfZgZ5GkNZN-tkEgKlMtyjoWv9MADyYb2MmWw-LuW8wfUXI9YSza5lo_8P03Vff4NxmrV3boG0xQ&quot;&gt;
&lt;/form&gt;
@ -336,32 +337,32 @@ public class DynamicFormsModel : PageModel
<pre><code>
&lt;form method=&quot;post&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;input type=&quot;hidden&quot; id=&quot;MyAttributeExamplesModel_HiddenInput&quot; name=&quot;MyAttributeExamplesModel.HiddenInput&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
&lt;input type=&quot;hidden&quot; id=&quot;MyAttributeExamplesModel_HiddenInput&quot; name=&quot;MyAttributeExamplesModel.HiddenInput&quot; value=&quot;&quot; class=&quot;form-control &quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyAttributeExamplesModel_DisabledInput&quot;&gt;DisabledInput&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyAttributeExamplesModel_DisabledInput&quot; name=&quot;MyAttributeExamplesModel.DisabledInput&quot; value=&quot;Disabled Input&quot; disabled=&quot;&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyAttributeExamplesModel.DisabledInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;label for=&quot;MyAttributeExamplesModel_DisabledInput&quot;&gt;DisabledInput&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyAttributeExamplesModel_DisabledInput&quot; name=&quot;MyAttributeExamplesModel.DisabledInput&quot; value=&quot;Disabled Input&quot; disabled=&quot;&quot; class=&quot;form-control &quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyAttributeExamplesModel.DisabledInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyAttributeExamplesModel_ReadonlyInput&quot;&gt;ReadonlyInput&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyAttributeExamplesModel_ReadonlyInput&quot; name=&quot;MyAttributeExamplesModel.ReadonlyInput&quot; value=&quot;Readonly Input&quot; class=&quot;form-control &quot; readonly=&quot;&quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyAttributeExamplesModel.ReadonlyInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;label for=&quot;MyAttributeExamplesModel_ReadonlyInput&quot;&gt;ReadonlyInput&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyAttributeExamplesModel_ReadonlyInput&quot; name=&quot;MyAttributeExamplesModel.ReadonlyInput&quot; value=&quot;Readonly Input&quot; class=&quot;form-control &quot; readonly=&quot;&quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyAttributeExamplesModel.ReadonlyInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyAttributeExamplesModel_ReadonlyPlainTextInput&quot;&gt;ReadonlyPlainTextInput&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyAttributeExamplesModel_ReadonlyPlainTextInput&quot; name=&quot;MyAttributeExamplesModel.ReadonlyPlainTextInput&quot; value=&quot;Readonly Plain Text Input&quot; class=&quot;form-control-plaintext &quot; readonly=&quot;&quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyAttributeExamplesModel.ReadonlyPlainTextInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;label for=&quot;MyAttributeExamplesModel_ReadonlyPlainTextInput&quot;&gt;ReadonlyPlainTextInput&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyAttributeExamplesModel_ReadonlyPlainTextInput&quot; name=&quot;MyAttributeExamplesModel.ReadonlyPlainTextInput&quot; value=&quot;Readonly Plain Text Input&quot; class=&quot;form-control-plaintext &quot; readonly=&quot;&quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyAttributeExamplesModel.ReadonlyPlainTextInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyAttributeExamplesModel_LargeInput&quot;&gt;LargeInput&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyAttributeExamplesModel_LargeInput&quot; name=&quot;MyAttributeExamplesModel.LargeInput&quot; value=&quot;Large Input&quot; class=&quot;form-control form-control-lg&quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyAttributeExamplesModel.LargeInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;label for=&quot;MyAttributeExamplesModel_LargeInput&quot;&gt;LargeInput&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyAttributeExamplesModel_LargeInput&quot; name=&quot;MyAttributeExamplesModel.LargeInput&quot; value=&quot;Large Input&quot; class=&quot;form-control form-control-lg&quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyAttributeExamplesModel.LargeInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;MyAttributeExamplesModel_SmallInput&quot;&gt;SmallInput&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyAttributeExamplesModel_SmallInput&quot; name=&quot;MyAttributeExamplesModel.SmallInput&quot; value=&quot;Small Input&quot; class=&quot;form-control form-control-sm&quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyAttributeExamplesModel.SmallInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;label for=&quot;MyAttributeExamplesModel_SmallInput&quot;&gt;SmallInput&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;MyAttributeExamplesModel_SmallInput&quot; name=&quot;MyAttributeExamplesModel.SmallInput&quot; value=&quot;Small Input&quot; class=&quot;form-control form-control-sm&quot;&gt;
&lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;MyAttributeExamplesModel.SmallInput&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;input name=&quot;__RequestVerificationToken&quot; type=&quot;hidden&quot; value=&quot;CfDJ8Kbwu8pRBWJCh6KUtTDoAuSUKLRRJ2JhujqxKEZfzYxIDYQtg1knqOh9zyG1DjaXRnoavm1876JtbePc4El_6aDqwMUKuXshQhXIunS_hrygXH5v-Tm6Qw_zL-JEJnSmd6Q4EwCtwDBwGX0in4-swG8&quot;&gt;
&lt;/form&gt;

19
framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml.cs
Unescape View File

@ -32,7 +32,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
{
MyDetailedModel = new DetailedModel
{
Name = "John Surname",
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,
@ -46,12 +46,16 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
MyFormContentExampleModel = new FormContentExampleModel();
MyOrderExampleModel = new OrderExampleModel();
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";
MyAttributeExamplesModel = new AttributeExamplesModel
{
DisabledInput = "Disabled Input",
ReadonlyInput = "Readonly Input",
ReadonlyPlainTextInput = "Readonly Plain Text Input",
LargeInput = "Large Input",
SmallInput = "Small Input"
};
}
public class FormContentExampleModel
@ -98,6 +102,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
public class DetailedModel
{
[Required]
[Placeholder("Enter your name...")]
[Display(Name = "Name")]
public string Name { get; set; }

Write Preview
Loading…
Cancel
Save