Helper components for rendering form content in Blazor using Bootstrap v4
- check binding
- re-enable other types
- fix date binding for unset dates
- create a group which has no validation?
- fix
BsDropDown
on Cost region - clean up test code
- update docs
- add more example pages for the different components
- page showing
BsGroup
andBsValidatedGroup
examples - [ ]
When creating forms in web apps, I find all the boiler-plate HTML required in Bootstrap 4
to be largely repetitive and tedious. With the Razor component model in Blazor we can
create components to hide away all that tedious nested HTML div
tags and focus on the fields:
This code creates a Bootstrap form with several bound fields.
<EditForm Model="model">
<BsLayout Orientation="Orientation.Horizontal">
<BsText @bind-Value="model.Name" Label="Customer name" >
<BsText @bind-Value="model.Contact" Label="Contact" >
<BsCheckbox @bind-Value="model.IsPriorityCustomer" Label="Priority" />
<BsNumber @bind-Value="model.Units" Label="Units to Order" />
<BsNumber @bind-Value="model.Price" Label="Unit Price" />
<BsGroup Label="Select colour">
<input type='color' @bind="model.FavouriteColour" />
</BsGroup>
<BsDropdownEnum @bind-Value="model.CustomerType" @options="CustomerTypeList" Label="Business Type" />
<BsStaticText Value="@model.Total.ToString("c")" Label="Total" />
<BsDate @bind-Value="model.DeliveryDate" Label="Delivery date" />
</BsLayout>
</EditForm>
The rendered form looks like this:
See the Getting Started section of the documentation