dev.reddin.BootstrapHtmlHelpers 0.0.1

Bootstrap HTML Helpers

Extensions for IHtmlHelper<TModel> that makes building Bootstrap forms mapped to MVC models super easy. Features:

• Each component is placed in a form group Div with Bootstrap class mb-3
• Support for validation and error messages
• Support for DisplayAttribute, including Name, Prompt, and Description (which is rendered below in a div element with the CSS class form-text).

Example

Given the following model:

public class ExampleViewModel
{
    [Display(Prompt = "Placeholder", Description = "Property description")]
    [Required(ErrorMessage = "Invalid message")]
    public string ModelProperty { get; set; }
}

To build a simple text box:

@Html.BsTextBoxFor(m => m.ModelProperty)

With the model state calculated to be invalid, the above renders out to:

<div class="mb-3">
    <label class="form-label" for="Name">Name</label>
    <input class="form-control is-invalid " data-val="true" data-val-required="Invalid message" id="Name" name="Name" placeholder="Placeholder" type="text" value="">
    <div class="invalid-feedback field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true">
        Invalid messge
    </div>
    <div class="form-text">
        Property description
    </div>
</div>

All components

Basic textbox:

@Html.BsTextBoxFor(m => m.ModelProperty)

Textbox for passwords:

@Html.BsPasswordFor(m => m.ModelPropety)

Datepicker:

@Html.BsDatePickerFor(m => m.ModelProperty)

Yes/No Radio button group. This renders a group of radio buttons for boolean values. By default the layout is horizontal, but if you'd rather have a vertical layout for this control, add RadioButtonLayout.Vertical

@Html.BsYesNoFor(m => m.BooleanModelProperty)
@Html.BsYesNoFor(m => m.BooleanModelProperty, RadioButtonLayout.Vertical) @* vertical layout *@

Checkbox for boolean values:

@Html.BsCheckboxFor(m => m.BooleanModelProperty)

<select> dropdown for any list of strings:

@Html.BsDropDownListFor(m => m.Name, new List<SelectListItem> {
    new SelectListItem { Value = "value1", Text = "Display Value 1" },
    new SelectListItem { Value = "value2", Text = "Display Value 2" }, 
    new SelectListItem { Value = "value3", Text = "Display Value 3" } 
})

<select> dropdown for enums. This uses the built in IHtmlHelper<TModel>.GetEnumSelectList<TEnum>() method so this supports DisplayAttribute.Name right out of the box.

@Html.BsEnumDropDownListFor(m => m.EnumModelProperty)

If the enum property is nullable and a blank option is required, use:

@Html.BsNullableEnumDropDownListFor(m => m.NullableEnumModelProperty)