fredrik0277 / blazorformlayout Goto Github PK

View Code? Open in Web Editor NEW

Helper components for rendering form content in Blazor using Bootstrap v4

License: GNU General Public License v3.0

C# 60.21% HTML 37.09% CSS 2.65% Batchfile 0.05%

blazorformlayout's Introduction

BlazorFormLayout

Helper components for rendering form content in Blazor using Bootstrap v4

Todo

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 and BsValidatedGroup examples
[ ]

Overview

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:

Example

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>