From edb70e054be79fbc4665033418d8ffb2ed3e3703 Mon Sep 17 00:00:00 2001 From: Yunus Emre Kalkan Date: Wed, 19 Dec 2018 16:25:58 +0300 Subject: [PATCH] added fom element tag helper docs --- .../Pages/Components/FormElements.cshtml | 465 ++++++++++++++++++ .../Pages/Components/FormElements.cshtml.cs | 81 +++ 2 files changed, 546 insertions(+) create mode 100644 framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml create mode 100644 framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml.cs diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml new file mode 100644 index 0000000000..82b9bee992 --- /dev/null +++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml @@ -0,0 +1,465 @@ +@page +@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components +@model FormElementsModel + +@{ + ViewData["Title"] = "Form Elements"; +} + +@section styles { + + + +} + +@section scripts { + + @* + *@ + +} + + + + + + + +

Form Elements

+ +

Example

+ +
+
+ + + +
+
+ + + 

+ public class FormElementsModel : PageModel
+    {
+        public SampleModel MyModel { get; set; }
+
+        public void OnGet()
+        {
+            MyModel = new SampleModel();
+        }
+
+        public class SampleModel
+        {
+            [Required]
+            public string Name { get; set; }
+
+            [Required]
+            [DataType(DataType.Password)]
+            public string Password { get; set; }
+
+            public bool CheckMeOut { get; set; }
+        }
+    }
+
+ + + 

+<abp-input asp-for="@@Model.MyModel.Name" label="Name"/>
+<abp-input asp-for="@@Model.MyModel.Password" label="Password" />
+<abp-input asp-for="@@Model.MyModel.CheckMeOut" label="Check Me Out" />
+
+ + + 

+<div class="form-group">
+<label for="MyModel_Name">Name</label>
+<input type="text" data-val="true" data-val-required="The Name field is required." id="MyModel_Name" name="MyModel.Name" value="" class="form-control ">
+<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.Name" data-valmsg-replace="true"></span>
+</div>
+<div class="form-group">
+<label for="MyModel_Password">Password</label>
+<input type="password" data-val="true" data-val-required="The Password field is required." id="MyModel_Password" name="MyModel.Password" class="form-control ">
+<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.Password" data-valmsg-replace="true"></span>
+</div>
+<div class="form-check">
+<input type="checkbox" data-val="true" data-val-required="The CheckMeOut field is required." id="MyModel_CheckMeOut" name="MyModel.CheckMeOut" value="true" class="form-check-input "><input name="MyModel.CheckMeOut" type="hidden" value="false">
+<label class="form-check-label" for="MyModel_CheckMeOut">Check Me Out</label>
+</div>
+
+ + +
+
+ +

Form controls

+ +
+
+ + + + +
+
+ + + 

+ public class FormElementsModel : PageModel
+    {
+        public SampleModel MyModel { get; set; }
+                    
+        public List<SelectListItem> CityList { get; set; } = new List<SelectListItem>
+        {
+            new SelectListItem { Value = "NY", Text = "New York"},
+            new SelectListItem { Value = "LDN", Text = "London"},
+            new SelectListItem { Value = "IST", Text = "Istanbul"},
+            new SelectListItem { Value = "MOS", Text = "Moscow"}
+        };
+
+        public void OnGet()
+        {
+            MyModel = new SampleModel();
+        }
+
+        public class SampleModel
+        {
+            [Required]
+            public string EmailAddress { get; set; }
+
+            public string City { get; set; }
+
+            public List<string> Cities { get; set; }
+
+            [TextArea]
+            public string Description { get; set; }
+        }
+    }
+
+ + + 

+<abp-input asp-for="@@Model.MyModel.EmailAddress" label="Email Address" placeholder="name@example.com" />
+<abp-select asp-for="@@Model.MyModel.City" asp-items="@@Model.CityList" label="City" />
+<abp-select asp-for="@@Model.MyModel.Cities" asp-items="@@Model.CityList" label="Cities" />
+<abp-input asp-for="@@Model.MyModel.Description" label="Description" />
+
+ + + 

+<div class="form-group">
+<label for="MyModel_EmailAddress">Email Address</label>
+<input placeholder="name@example.com" type="text" data-val="true" data-val-required="The EmailAddress field is required." id="MyModel_EmailAddress" name="MyModel.EmailAddress" value="" class="form-control ">
+<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.EmailAddress" data-valmsg-replace="true"></span>
+</div>
+<div class="form-group">
+<label for="MyModel_City">City</label>
+<select id="MyModel_City" name="MyModel.City" class="form-control">
+<option value="NY">New York</option>
+<option value="LDN">London</option>
+<option value="IST">Istanbul</option>
+<option value="MOS">Moscow</option>
+</select>
+</div>
+<div class="form-group">
+<label for="MyModel_Cities">Cities</label>
+<select id="MyModel_Cities" multiple="multiple" name="MyModel.Cities" class="form-control">
+<option value="NY">New York</option>
+<option value="LDN">London</option>
+<option value="IST">Istanbul</option>
+<option value="MOS">Moscow</option>
+</select>
+</div>
+<div class="form-group">
+<label for="MyModel_Description">Description</label>
+<textarea id="MyModel_Description" name="MyModel.Description" class="form-control "></textarea>
+<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.Description" data-valmsg-replace="true"></span>
+</div>
+
+ + +
+
+ +

Sizing

+ +
+
+ + +
+
+ + + 

+ public class FormElementsModel : PageModel
+    {
+        public SampleModel MyModel { get; set; }
+
+        public void OnGet()
+        {
+            MyModel = new SampleModel();
+        }
+
+        public class SampleModel
+        {
+            public string LargeInput { get; set; }
+
+            public string SmallInput { get; set; }
+        }
+    }
+
+ + + 

+<abp-input asp-for="@@Model.MyModel.LargeInput" size="Large" />
+<abp-input asp-for="@@Model.MyModel.SmallInput" size="Small" />
+
+ + + 

+<div class="form-group">
+<label for="MyModel_LargeInput">LargeInput</label>
+<input type="text" id="MyModel_LargeInput" name="MyModel.LargeInput" value="" class="form-control form-control-lg">
+<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.LargeInput" data-valmsg-replace="true"></span>
+</div>
+<div class="form-group">
+<label for="MyModel_SmallInput">SmallInput</label>
+<input type="text" id="MyModel_SmallInput" name="MyModel.SmallInput" value="" class="form-control form-control-sm">
+<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.SmallInput" data-valmsg-replace="true"></span>
+</div>
+
+ + +
+
+ +

Disabled And ReadOnly

+ +
+
+ + + +
+
+ + + 

+ public class FormElementsModel : PageModel
+    {
+        public SampleModel MyModel { get; set; }
+
+        public void OnGet()
+        {
+            MyModel = new SampleModel();
+            MyModel.SampleInput0 = "This is a disabled input.";
+            MyModel.SampleInput0 = "This is a disabled input.";
+            MyModel.SampleInput1 = "This is a readonly input.";
+            MyModel.SampleInput2 = "This is a readonly plain-text.";
+        }
+
+        public class SampleModel
+        {
+            public string SampleInput0 { get; set; }
+                    
+            public string SampleInput1 { get; set; }
+
+            public string SampleInput2 { get; set; }
+        }
+    }
+
+ + + 

+<abp-input asp-for="@@Model.MyModel.SampleInput0" disabled="true" />
+<abp-input asp-for="@@Model.MyModel.SampleInput1" readonly="True" />
+<abp-input asp-for="@@Model.MyModel.SampleInput2" readonly="True_PlainText"/>
+
+ + + 

+<div class="form-group">
+    <label for="MyModel_SampleInput0">SampleInput0</label>
+    <input type="text" id="MyModel_SampleInput0" name="MyModel.SampleInput0" value="This is a disabled input." disabled="" class="form-control ">
+    <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.SampleInput0" data-valmsg-replace="true"></span>
+</div>
+<div class="form-group">
+    <label for="MyModel_SampleInput1">SampleInput1</label>
+    <input type="text" id="MyModel_SampleInput1" name="MyModel.SampleInput1" value="This is a readonly input." class="form-control " readonly="">
+    <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.SampleInput1" data-valmsg-replace="true"></span>
+</div>
+<div class="form-group">
+    <label for="MyModel_SampleInput2">SampleInput2</label>
+    <input type="text" id="MyModel_SampleInput2" name="MyModel.SampleInput2" value="This is a readonly plain-text." class="form-control-plaintext " readonly="">
+    <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.SampleInput2" data-valmsg-replace="true"></span>
+</div>
+
+ + +
+
+ +

Checkboxes and radios

+ +
+
+ + +
+
+ + + 

+ public class FormElementsModel : PageModel
+    {
+        public SampleModel MyModel { get; set; }
+
+        public void OnGet()
+        {
+            MyModel = new SampleModel();
+        }
+
+        public class SampleModel
+        {
+            public bool DefaultCheckbox { get; set; }
+
+            public bool DisabledCheckbox { get; set; }
+        }
+    }
+
+ + + 

+<abp-input asp-for="@@Model.MyModel.DefaultCheckbox"/>
+<abp-input asp-for="@@Model.MyModel.DisabledCheckbox" disabled="true"/>
+
+ + + 

+<div class="form-check">
+    <input type="checkbox" data-val="true" data-val-required="The DefaultCheckbox field is required." id="MyModel_DefaultCheckbox" name="MyModel.DefaultCheckbox" value="true" class="form-check-input "><input name="MyModel.DefaultCheckbox" type="hidden" value="false">
+    <label class="form-check-label" for="MyModel_DefaultCheckbox">DefaultCheckbox</label>
+</div>
+<div class="form-check">
+    <input type="checkbox" data-val="true" data-val-required="The DisabledCheckbox field is required." id="MyModel_DisabledCheckbox" name="MyModel.DisabledCheckbox" value="true" disabled="" class="form-check-input "><input name="MyModel.DisabledCheckbox" type="hidden" value="false">
+    <label class="form-check-label" for="MyModel_DisabledCheckbox">DisabledCheckbox</label>
+</div>
+
+ + +
+
+ +
+
+ +
+
+ + + 

+ public class FormElementsModel : PageModel
+    {
+        public SampleModel MyModel { get; set; }
+
+        public void OnGet()
+        {
+            MyModel = new SampleModel();
+            MyModel.CityRadio = "IST";
+        }
+
+        public class SampleModel
+        {
+            [Display(Name="City")]
+            public string CityRadio { get; set; }
+        }
+    }
+
+ + + 

+<abp-radio asp-for="@@Model.MyModel.CityRadio" asp-items="@@Model.CityList" inline="true"/>
+
+ + + 

+<div>
+    <div class="custom-control custom-radio custom-control-inline">
+        <input type="radio" id="MyModel.CityRadioRadioNY" name="MyModel.CityRadio" value="NY" class="custom-control-input">
+        <label class="custom-control-label" for="MyModel.CityRadioRadioNY">New York</label>
+    </div>
+    <div class="custom-control custom-radio custom-control-inline">
+        <input type="radio" id="MyModel.CityRadioRadioLDN" name="MyModel.CityRadio" value="LDN" class="custom-control-input">
+        <label class="custom-control-label" for="MyModel.CityRadioRadioLDN">London</label>
+    </div>
+    <div class="custom-control custom-radio custom-control-inline">
+        <input type="radio" id="MyModel.CityRadioRadioIST" name="MyModel.CityRadio" value="IST" checked="checked" class="custom-control-input">
+        <label class="custom-control-label" for="MyModel.CityRadioRadioIST">Istanbul</label>
+    </div>
+    <div class="custom-control custom-radio custom-control-inline">
+        <input type="radio" id="MyModel.CityRadioRadioMOS" name="MyModel.CityRadio" value="MOS" class="custom-control-input">
+        <label class="custom-control-label" for="MyModel.CityRadioRadioMOS">Moscow</label>
+    </div>
+</div>
+
+ + +
+
+ +

Enum

+ +
+
+ +
+
+ + + 

+ public class FormElementsModel : PageModel
+    {
+        public SampleModel MyModel { get; set; }
+
+        public void OnGet()
+        {
+            MyModel = new SampleModel();
+        }
+
+        public class SampleModel
+        {
+            public CarType CarType { get; set; }
+        }
+
+        public enum CarType
+        {
+            Sedan,
+            Hatchback,
+            StationWagon,
+            Coupe
+        }
+    }
+
+ + + 

+<abp-select asp-for="@Model.MyModel.CarType"/>
+
+ + + 

+ <div class="form-group">
+     <label for="MyModel_CarType">CarType</label>
+     <select data-val="true" data-val-required="The CarType field is required." id="MyModel_CarType" name="MyModel.CarType" class="form-control">
+         <option selected="selected" value="0">Sedan</option>
+         <option value="1">Hatchback</option>
+         <option value="2">StationWagon</option>
+         <option value="3">Coupe</option>
+     </select>
+ </div>
+
+ + +
+
\ No newline at end of file diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml.cs b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml.cs new file mode 100644 index 0000000000..6a3f432220 --- /dev/null +++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml.cs @@ -0,0 +1,81 @@ +using System; +using System.Collections.Generic; +using System.ComponentModel; +using System.ComponentModel.DataAnnotations; +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Mvc.RazorPages; +using Microsoft.AspNetCore.Mvc.Rendering; +using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form; + +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components +{ + public class FormElementsModel : PageModel + { + [BindProperty] + public SampleModel MyModel { get; set; } + + public List CityList { get; set; } = new List + { + new SelectListItem { Value = "NY", Text = "New York"}, + new SelectListItem { Value = "LDN", Text = "London"}, + new SelectListItem { Value = "IST", Text = "Istanbul"}, + new SelectListItem { Value = "MOS", Text = "Moscow"} + }; + + public void OnGet() + { + MyModel = new SampleModel(); + MyModel.SampleInput0 = "This is a disabled input."; + MyModel.SampleInput1 = "This is a readonly input."; + MyModel.SampleInput2 = "This is a readonly plain-text."; + MyModel.CityRadio = "IST"; + } + + public class SampleModel + { + public string Name { get; set; } + + public string SampleInput0 { get; set; } + + public string SampleInput1 { get; set; } + + public string SampleInput2 { get; set; } + + public string LargeInput { get; set; } + + public string SmallInput { get; set; } + + [TextArea] + public string Description { get; set; } + + public string EmailAddress { get; set; } + + [Required] + [DataType(DataType.Password)] + public string Password { get; set; } + + public bool CheckMeOut { get; set; } + + public bool DefaultCheckbox { get; set; } + + public bool DisabledCheckbox { get; set; } + + public CarType CarType { get; set; } + + public string City { get; set; } + + [Display(Name="City")] + public string CityRadio { get; set; } + + public List Cities { get; set; } + } + + public enum CarType + { + Sedan, + Hatchback, + StationWagon, + Coupe + } + } +} \ No newline at end of file