dev.reddin.BootstrapHtmlHelpers 0.0.10

There is a newer version of this package available.
See the version list below for details.
dotnet add package dev.reddin.BootstrapHtmlHelpers --version 0.0.10
                    
NuGet\Install-Package dev.reddin.BootstrapHtmlHelpers -Version 0.0.10
                    
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="dev.reddin.BootstrapHtmlHelpers" Version="0.0.10" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="dev.reddin.BootstrapHtmlHelpers" Version="0.0.10" />
                    
Directory.Packages.props
<PackageReference Include="dev.reddin.BootstrapHtmlHelpers" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add dev.reddin.BootstrapHtmlHelpers --version 0.0.10
                    
#r "nuget: dev.reddin.BootstrapHtmlHelpers, 0.0.10"
                    
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package dev.reddin.BootstrapHtmlHelpers@0.0.10
                    
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=dev.reddin.BootstrapHtmlHelpers&version=0.0.10
                    
Install as a Cake Addin
#tool nuget:?package=dev.reddin.BootstrapHtmlHelpers&version=0.0.10
                    
Install as a Cake Tool

Class retrieved from an extension of 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).
  • Adds the CSS class is-required to form-label if the property for the expression is required.
  • Extensions for Controller and ViewDataDictionary to add Bootstrap alerts, and a RenderAlerts extension for IHtmlHelper to render alerts in the views.
  • Pagination links

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:

@{
    var bootstrap = Html.Bootstrap();
}
@bootstrap.TextBoxFor(m => m.ModelProperty)

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

<div class="mb-3">
    <label class="form-label is-required" 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:

@bootstrap.TextBoxFor(m => m.ModelProperty)

Textarea:

@bootstrap.TextAreaFor(m => m.ModelProperty, 5, 10)

Textbox for passwords:

@bootstrap.PasswordFor(m => m.ModelPropety)

Datepicker:

@bootstrap.DatePickerFor(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. This method supports nullable booleans too. If the value is null, nothing will be selected by default.

@bootstrap.YesNoFor(m => m.BooleanModelProperty)
@bootstrap.YesNoFor(m => m.BooleanModelProperty, RadioButtonLayout.Vertical) @* vertical layout *@

Checkbox for boolean values:

@bootstrap.CheckboxFor(m => m.BooleanModelProperty)

<select> dropdown for any list of strings:

@bootstrap.DropDownListFor(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.

@bootstrap.EnumDropDownListFor(m => m.EnumModelProperty)

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

@bootstrap.NullableEnumDropDownListFor(m => m.NullableEnumModelProperty)

HTML Attributes

All extensions that support the anonymous object for adding additional HTML attributes also support passing HTML attributes of type IDictionary<string,object>. Note that passing IDictionary<string,string> will exhibit untintended behavior.

@bootstrap.YesNoFor(m => m.BooleanModelProperty, new Dictionary<string, object> {
    { "data-attribute", "attribute value" }
})

HTML Label Attributes

HTML attributes can be added to the label:

@bootstrap.TextBoxFor(m => m.Property, labelHtmlAttributes: new { id = "id" })

This is supported for TextBoxFor, PasswordFor, DatePickerFor, YesNoFor, DropDownListFor, EnumDropDownListFor, NullableEnumDropDownListFor, and FormGroupFor.

Required Indicator

Labels for the form groups are automatically given the CSS class is-required if the property of the model is required. To add a required indicator, typically a red asterisk, add this CSS:

.form-label.is-required::after {
  content: '*';
  color: var(--bs-danger);
  padding-left: 0.10rem;
}

Alerts

Alerts can be added to views with the AddAlert extension. This extension is available on the Controller and ViewDataDictionary classes:

# Within MVC Controller
AddAlert(BootstrapColor.Success, "Alert message");

# With view data:
ViewData.AddAlert(BootstrapColor.Success, "Alert message");

Alerts can be added to TempData to save the alert for the next request. Useful when showing an alert after redirecting to another action:

TempData.AddAlert(BootstrapColor.Success, "Alert Message");

Alert types are available for each Bootstrap color classes:

public enum BootstrapColor
{
    Primary,
    Secondary,
    Success,
    Danger,
    Warning,
    Info,
    Light,
    Dark
}

In your views, render your alerts as follows:

@Html.RenderAlerts()

To prevent rendering views from TempData, pass false:

@Html.RenderAlerts(false)

Note: The content of the alerts are not HTML encoded. RAW HTML will be rendered. Encode any user-generated strings you pass to AddAlert.

Pagination

This package features the BsPagination class with methods for rendering Bootstrap pagination links.

@BsPagination.Paginate(5, 10, page => Url.Action("Index", "Home", new { page })!)

The above will render the following:

<nav aria-label="Page navigation">
    <ul class="pagination justify-content-center ">
        <li class="page-item "><a class="page-link" href="/?page=4">Previous</a></li>
        <li class="page-item "><a class="page-link" href="/?page=1">1</a></li>
        <li class="page-item"><span class="page-text">…</span></li>
        <li class="page-item "><a class="page-link" href="/?page=4">4</a></li>
        <li class="page-item active"><a class="page-link" href="/?page=5">5</a></li>
        <li class="page-item "><a class="page-link" href="/?page=6">6</a></li>
        <li class="page-item"><span class="page-text">…</span></li>
        <li class="page-item "><a class="page-link" href="/?page=10">10</a></li>
        <li class="page-item "><a class="page-link" href="/?page=6">Next</a></li>
    </ul>
</nav>

Paginate takes the following parameters:

int currentPage, int totalPages, Func<int, string> buildHref, string ulClasses = "", string nonLinkClass = "page-text"
Parameter Name Description
currentPage The current page. This page will be indicated with the active CSS class.
totalPages Total pages available. If you have the count of total items, the total number of pages can be calculated with BsPagination.TotalPages(totalItems, itemsPerPage)
buildHref A lambda function that takes an integer as a parameter and returns a string. This method is called for each page item. Use this to build the href URL for each page.
ulClasses CSS classes for the <ul> element that is rendered. The <ul> element has pagination justify-content-center. The value of this parameter is added to this class list.
nonLinkClass The class for the <span> element that is rendered for non-link page items. By default the class is page-text.

This pagination method renders a page item with an ellipsis character and no links. This indicates separation between the first page and the previous page as well as separation between the next page and the last page. However, Bootstrap does not have good styling for this type of element, so we recommend adding this to your CSS:

.page-text {
    position: relative;
    display: block;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
    font-size: var(--bs-pagination-font-size);
    background-color: var(--bs-pagination-bg);
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    color: var(--bs-secondary);
}

.page-item:not(:first-child) .page-text {
    margin-left: calc(var(--bs-border-width) * -1);
}
Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 was computed.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 was computed.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
  • net8.0

    • No dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
0.0.22 230 3/11/2025
0.0.21 134 2/26/2025
0.0.20 153 12/3/2024
0.0.19 146 9/25/2024
0.0.18 146 9/20/2024
0.0.17 173 8/16/2024
0.0.16 147 8/16/2024
0.0.15 158 5/10/2024
0.0.14 194 3/4/2024
0.0.13 167 2/22/2024
0.0.12 159 2/22/2024
0.0.11 154 2/19/2024
0.0.10 155 2/18/2024
0.0.9 153 2/15/2024
0.0.8 201 2/10/2024
0.0.7 180 1/21/2024
0.0.6 172 1/21/2024
0.0.5 204 1/6/2024
0.0.4 178 1/5/2024
0.0.3 172 12/28/2023
0.0.2 174 12/24/2023
0.0.1 162 12/24/2023