TwitterBootstrapMVC

Development for ASP.NET MVC with Bootstrap made simple.

Plug-ins

The plug-ins below do not come with the core TwitterBootstrapMVC installation. They are installed separately via Nuget Packages.

TextBox now have extension method .DatePicker().

In order to make datepicker work, you need to follow these steps:

  • Download .js and .css files from eyecon datepicker website.
  • Reference these scripts on your pages. Best if you add them to your main js and css bundles.
  • Install one of the following Nuget Package Ids depending on your MVC version:
    • TwitterBootstrapMVC.Eyecon.Datepicker.MVC5
    • TwitterBootstrapMVC.Eyecon.Datepicker.MVC4
    • TwitterBootstrapMVC.Eyecon.Datepicker.MVC3
  • Use the following javascript code to initialize datepicker on the page load: $('.datepicker').datepicker()
Basic Usage
@Html.Bootstrap().TextBoxFor(x => x.Date).DatePicker()
// or to customize datepicker use following overload:
@Html.Bootstrap().TextBoxFor(x => x.Date).DatePicker(new DatePicker().Format("yy-mm-dd"))
Html output
<input class="datepicker form-control" id="Date" name="Date" type="text" value="">
End result
Extension Methods of class DatePicker
.Format("yy-mm-dd")
the date format, combination of d, dd, m, mm, yy, yyy.
.WeekStart(0)
day of the week start. 0 for Sunday - 6 for Saturday
.ViewMode("days")
set the start view mode. Accepts: 'days', 'months', 'years'
.MinViewMode("days")
set a limit for view mode. Accepts: 'days', 'months', 'years'

Flaty is another css/js framework that is built on top of Bootstrap. BMVC steps in to support some of its unique controls.

In order to enable Flaty's extension methods, Install one of the following Nuget Package Ids depending on your MVC version:

  • TwitterBootstrapMVC.Flaty.MVC5
  • TwitterBootstrapMVC.Flaty.MVC4
  • TwitterBootstrapMVC.Flaty.MVC3

You'll need to download and reference Flaty's css/js files in order for Flaty's controls to display properly.

Box

Basic Usage
@using (var b = Html.Bootstrap().Begin(new FlatyBox()))
{
    @b.Header("Flaty header")
    using (b.BeginBody())
    {
        <p>Contents of Box</p>
    }
}
Html output
<input class="datepicker form-control" id="Date" name="Date" type="text" value="">
End result See Flaty's docs for examples of Box control.
Extension Methods of class FlatyBox
.Closeable()
Renders close button in the header of the Box
.Collapsable()
Renders collapse button in the header of the Box
.MinViewMode("days")
set a limit for view mode. Accepts: 'days', 'months', 'years'
Common Extension Methods: .Id(), .Class(), .HtmlAttributes(), .Data()

There is also a quick way to put a table inside a box with the use of extension method .Boxed()

@using (var t = Html.Bootstrap().Begin(new Table().Boxed("Flaty Header")))
{
    ...
}

Method .Boxed() also accepts two optional parameters to specify whether "close" and/or "collapse" button should be rendered in the header of the Box.