Mvc Bootstrap 3 Form Helper Extensions

Assembly
WebExtras.Mvc.dll
Namespace
WebExtras.Mvc.Bootstrap
Dependancies

Creating special buttons

Special buttons can be created by decorating hyperlinks and basic buttons with the appropriate special button type

Markup


@Html.Hyperlink("Take me to google", "http://www.google.com")
    .AsButton(EBootstrapButton.Default)

@Html.Button(EButton.Regular, "Take me to google", "window.location='http://www.google.com.au'")
    .AsButton(EBootstrapButton.Danger, EBootstrapButton.Large)
  

Output

Take me to google Take me to google Take me to google

All available extensions


// Note that this extension can only be used for hyperlinks and button elements
.AsButton(type)
  

Date time pickers

WebExtras provides helper methods for rendering a date time picker attached to a textbox by using a great little date time picker provided by Sébastien Malot. You can get a copy of the date time picker from here.

Markup


@Html.DateTextBoxFor(f => f.DateTextBox)

// Note that this date time picker uses 'i' for minutes
@Html.TimeTextBoxFor(f => f.TimeTextBox, new { format = "hh:ii" })                     
@Html.DateTimeTextBoxFor(f => f.DateTimeTextBox, new { format = "dd M yyyy hh:ii" })   
  

Output

Date only picker
Time only picker
Date and time picker

A slight gotcha with the time only picker is that the date will always be fixed to 31 December 1899.

Manipulating lists

Unstyled lists can be created by using the AsUnstyled() decorator.

Markup


@Html.List(EList.Unordered, new HtmlListItem[] { 
  new HtmlListItem("list item 1"),
  new HtmlListItem("list item 2"),
  new HtmlListItem("list item 3"),
  new HtmlListItem("list item 4"),
  new HtmlListItem("list item 5")
}).AsUnstyled()
  

Output

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5

Inline lists can be created by using the AsInline() decorator.

Markup


@Html.List(EList.Unordered, new HtmlListItem[] { 
  new HtmlListItem("list item 1"),
  new HtmlListItem("list item 2"),
  new HtmlListItem("list item 3"),
  new HtmlListItem("list item 4"),
  new HtmlListItem("list item 5")
}).AsInline()
  

Output

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5