From 0eb355e2e61d3a69e547b56821b1f7764fe73d5b Mon Sep 17 00:00:00 2001 From: Yunus Emre Kalkan Date: Wed, 19 Dec 2018 17:49:15 +0300 Subject: [PATCH] dynamic form tag helper docs --- .../Pages/Components/DynamicForms.cshtml | 526 +++++++++++++----- .../Pages/Components/DynamicForms.cshtml.cs | 133 +++-- 2 files changed, 496 insertions(+), 163 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 b259d071ca..026c8c4339 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 @@ -12,166 +12,444 @@ } +@section scripts { + + @* + *@ + +} + + + + +

Dynamic Forms

-

# Dynamic Form Example

+

Dynamic Form Example

- -
-
Posted Values:
-
- Name: @Model.PersonInput.Name
- 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"/>
-
-
-
+ + + 

+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>
+
+ + + + \ No newline at end of file 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 27075bf09a..6bfbfe2d0b 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 @@ -12,9 +12,15 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components public class DynamicFormsModel : PageModel { [BindProperty] - public PersonModel PersonInput { get; set; } + public DetailedModel MyDetailedModel { get; set; } - public List Countries { get; set; } = new List + public OrderExampleModel MyOrderExampleModel { get; set; } + + public AttributeExamplesModel MyAttributeExamplesModel { get; set; } + + public FormContentExampleModel MyFormContentExampleModel { get; set; } + + public List CountryList { get; set; } = new List { new SelectListItem { Value = "CA", Text = "Canada"}, new SelectListItem { Value = "US", Text = "USA"}, @@ -24,72 +30,121 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components public void OnGet() { - if (PersonInput == null) - { - PersonInput = new PersonModel + MyDetailedModel = new DetailedModel { - Name = "John", + 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, - Country = "CA", Day = DateTime.Now, - City = Cities.NewJersey, - Phone = new PhoneModel { Number = "326346231", Name = "MyPhone" } + MyCarType = CarType.Coupe, + YourCarType = CarType.Sedan, + Country = "RU", + NeighborCountries = new List() { "UK", "CA" } }; - } + + 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"; } - public void OnPost() + public class FormContentExampleModel { + public string SampleInput { get; set; } + } + + 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; } + } + + 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; } } - public class PersonModel + public class DetailedModel { [Required] + [Display(Name = "Name")] public string Name { get; set; } [TextArea(Rows = 4)] - public string Surname { get; set; } + [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] - [Range(1, 100)] + [Display(Name = "Age")] public int Age { get; set; } [Required] - public Cities City { get; set; } + [Display(Name = "My Car Type")] + public CarType MyCarType { get; set; } - public PhoneModel Phone { get; set; } + [Required] + [AbpRadioButton(Inline = true)] + [Display(Name = "Your Car Type")] + public CarType YourCarType { get; set; } [DataType(DataType.Date)] - [DisplayOrder(10003)] + [Display(Name = "Day")] public DateTime Day { get; set; } - public bool IsActive { get; set; } - - [AbpRadioButton(Inline = true)] - [SelectItems(nameof(Countries))] + [SelectItems(nameof(CountryList))] + [Display(Name = "Country")] public string Country { get; set; } + + [SelectItems(nameof(CountryList))] + [Display(Name = "Neighbor Countries")] + public List NeighborCountries { get; set; } } - public class PhoneModel - { - [Required] - [DisplayOrder(10002)] - public string Number { get; set; } - - [Required] - [DisplayOrder(10001)] - [DisplayName("PhoneName")] - public string Name { get; set; } - } - - public enum Cities + public enum CarType { - NewJersey, - Moscow, - Istanbul, - London, - Beijing + Sedan, + Hatchback, + StationWagon, + Coupe } } } \ No newline at end of file