• Home
  • Tag Helpers
  • About
  • Accordion
  • Badge
  • Borders
  • Breadcrumb
  • Buttons
  • Cards
  • Carousel
  • Collapse
  • Dropdown
  • Figures
  • Form
  • Grid
  • Hints
  • List group
  • Menu
  • Modal
  • Navigation view
  • Pagination
  • Popover
  • Progress
  • Side navigation
  • Tabs
<form border="LRTB" border-style="Solid" class="p-1 cell-6">     <metro-input asp-for="@Model.Form.Name" id="Name1"/>     <metro-input asp-for="@Model.Form.Age" id="Age1"/>     <metro-input asp-for="@Model.Form.Password" id="Password1"/> </form> <form border="LRTB" border-style="Solid" class="p-1 cell-6">     <metro-form-content horizontal="true" cols="1">         <metro-input asp-for="@Model.Form.Name" id="Name2"/>         <metro-input asp-for="@Model.Form.Age" id="Age2"/>         <metro-input asp-for="@Model.Form.Password" id="Password2"/>     </metro-form-content> </form>

Columns

<form border="LRTB" border-style="Solid" class="m-1">     <metro-form-content horizontal="true" cols="2">         <metro-input asp-for="@Model.Form.Name" id="Name3" />         <metro-input asp-for="@Model.Form.Age" id="Age3" />         <metro-input asp-for="@Model.Form.Password" id="Password3" />         <metro-input asp-for="@Model.Form.PhoneNumber" id="PhoneNumber3 />     </metro-form-content> </form> <form border="LRTB" border-style="Solid" class="m-1">     <metro-form-content horizontal="true" cols="3">         <metro-input asp-for="@Model.Form.Name" id="Name4" />         <metro-input asp-for="@Model.Form.Age" id="Age4" />         <metro-input asp-for="@Model.Form.Password" id="Password4" />         <metro-input asp-for="@Model.Form.PhoneNumber" id="PhoneNumber4" />     </metro-form-content> </form> <form border="LRTB" border-style="Solid" class="m-1">     <metro-form-content horizontal="true" cols="4">         <metro-input asp-for="@Model.Form.Name" id="Name5" />         <metro-input asp-for="@Model.Form.Age" id="Age5" />         <metro-input asp-for="@Model.Form.Password" id="Password5" />         <metro-input asp-for="@Model.Form.PhoneNumber" id="PhoneNumber5" />     </metro-form-content> </form>

Size

<form border="LRTB" border-style="Solid" class="m-1 cell-3">     <metro-form-content horizontal="true" cols="1" size="Small">         <metro-input asp-for="@Model.Form.Name" id="Name6" />     </metro-form-content> </form> <form border="LRTB" border-style="Solid" class="m-1 cell-3">     <metro-form-content horizontal="true" cols="1">         <metro-input asp-for="@Model.Form.Name" id="Name7" />     </metro-form-content> </form> <form border="LRTB" border-style="Solid" class="m-1 cell-3">     <metro-form-content horizontal="true" cols="1" size="Large">         <metro-input asp-for="@Model.Form.Name" id="Name8" />     </metro-form-content> </form>

Prepend and append

<form border="LRTB" border-style="Solid" class="m-1 p-1 cell-3">     <metro-input asp-for="@Model.Form.Name" no-label="true" prepend="Name" append="%" id="Name9" /> </form>

Dynamic


            
        public class FormViewModel
        {
            [HiddenInput] public Guid Id { get; set; }

            [Required]
            [StringLength(128, MinimumLength = 4)]
            public string Name { get; set; }

            [DataType(DataType.Password)] public string Password { get; set; }
            public string PhoneNumber { get; set; }

            [Required] public int Age { get; set; }
            [DisplayOrder(20000)] public bool Confirm { get; set; }

            [Display(Name = "BirthDay")]
            [DataType(DataType.Date)]
            public DateTime BirthDateTime { get; set; }

            public DateTime UpdateDateTime { get; set; }
            public CarType CarType { get; set; }
            [RadioGroup(4)] public CarType CarType2 { get; set; }
            [CheckboxGroup(2)] public List<CarType> CarType3 { get; set; }
            [SelectItems(nameof(CountryList))] public string Country { get; set; }

            [SelectItems(nameof(CityList))] public List<string> City { get; set; }

            [SelectItems(nameof(CityList))]
            [CheckboxGroup(4)]
            public List<string> City1 { get; set; }

            [TagInput(5)] public List<string> Tags { get; set; }
            public string[] Tags2 { get; set; }

            [TextArea] public string Remarks { get; set; }
            public Address Address { get; set; }
        }

        public class Address
        {
            public string Street { get; set; }
            public string City { get; set; }
            public string Postcode { get; set; }
            public string Country { get; set; }
        }

        
<form border="LRTB" border-style="Solid" class="p-1" data-role="validator">     <metro-form-content metro-model="Form" label-width="150">          <metro-input asp-for="@Model.Form.Name" />         <metro-tag-input asp-for="@Model.Form.Tags2" max-tags="5" />     </metro-form-content>     <button class="button success">Submit</button> </form>

Group

  • Base
  • Address

        
        public class FormViewModel
        {
            ...

            [FormContentGroup("base")]
            [DataType(DataType.Password)] 
            public string Password { get; set; }

            ...
        }

        public class Address
        {
            [FormContentGroup("address")] public string Street { get; set; }
            [FormContentGroup("address")] public string City { get; set; }
            [FormContentGroup("address")] public string Postcode { get; set; }
            [FormContentGroup("address")] public string Country { get; set; }
        }

        
<form border="LRTB" border-style="Solid" class="p-1" data-role="validator">     <metro-tabs>         <metro-tab title="Base" target="base" />         <metro-tab title="Address" target="address" />     </metro-tabs>     <div class="border bd-default no-border-top p-2 w-100">         <div id="base">             <metro-form-content metro-model="Form" label-width="150" group-name="base">                 <metro-input asp-for="@Model.Form.Name" />             </metro-form-content>         </div>         <div id="address">             <metro-form-content metro-model="Form" label-width="150" group-name="address">             </metro-form-content>         </div>     </div>     <button class="button success">Submit</button> </form>

2020 - 2025 © ExtJs.Tech

Open source license with MIT

粤ICP备2022031812号

GitHub
About Us
Documents
Desktop client
Mobile client
Tag Helpers