From 20fb9b52c6a9c6fbc0f06040792091450482de61 Mon Sep 17 00:00:00 2001 From: Yunus Emre Kalkan Date: Thu, 20 Dec 2018 09:49:10 +0300 Subject: [PATCH] dynamic-form docs improvements --- .../Pages/Components/DynamicForms.cshtml | 153 +++++++++--------- .../Pages/Components/DynamicForms.cshtml.cs | 19 ++- 2 files changed, 89 insertions(+), 83 deletions(-) diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml index 026c8c4339..8fd08e3a94 100644 --- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml +++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml @@ -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-dynamic-form abp-model="@Model.MyDetailedModel" submit-button="true" />
+<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>
+        <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="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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
@@ -253,24 +254,24 @@ public class DynamicFormsModel : PageModel
                 

 <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>
+        <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>
+        <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>
+        <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>
+        <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>
@@ -336,32 +337,32 @@ public class DynamicFormsModel : PageModel
                 

 <form method="post">
     <div class="form-group">
-<input type="hidden" id="MyAttributeExamplesModel_HiddenInput" name="MyAttributeExamplesModel.HiddenInput" value="" class="form-control ">
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml.cs b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml.cs
index 6bfbfe2d0b..753a76d3be 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml.cs
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml.cs
@@ -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; }