<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>
<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>
<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>
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>
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>