dev.reddin.BootstrapHtmlHelpers
0.0.10
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
<PackageReference Include="dev.reddin.BootstrapHtmlHelpers" Version="0.0.10" />
<PackageVersion Include="dev.reddin.BootstrapHtmlHelpers" Version="0.0.10" />
<PackageReference Include="dev.reddin.BootstrapHtmlHelpers" />
paket add dev.reddin.BootstrapHtmlHelpers --version 0.0.10
#r "nuget: dev.reddin.BootstrapHtmlHelpers, 0.0.10"
#:package dev.reddin.BootstrapHtmlHelpers@0.0.10
#addin nuget:?package=dev.reddin.BootstrapHtmlHelpers&version=0.0.10
#tool nuget:?package=dev.reddin.BootstrapHtmlHelpers&version=0.0.10
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
, includingName
,Prompt
, andDescription
(which is rendered below in a div element with the CSS classform-text
). - Adds the CSS class
is-required
toform-label
if the property for the expression is required. - Extensions for
Controller
andViewDataDictionary
to add Bootstrap alerts, and aRenderAlerts
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 . |
Non-link Page Items
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 | Versions 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. |
-
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 |