MVC Helpers

Custom HTML Helpers that you can use within your MVC views.

This page demonstrate how you can use IOUI custom HTML Helpers that you can use within your MVC views. By taking advantage of HTML Helpers, you can reduce the amount of tedious typing of HTML tags that you must perform to create a standard HTML page.

Configuration

Included in IOUI are currently two custom HTML helpers, to simplify the use of the Datepicker and Timepicker extras.

Start by including the namespace to the IOUI.CDN.Helpers.Bootstrap.Extras in your Razor web.config, located in your /Views directory, so you can use them globally. 

<system.web.webPages.razor>
  <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
  <pages pageBaseType="System.Web.Mvc.WebViewPage">
    <namespaces>
      ...
      <add namespace="IOUI.CDN.Helpers.Bootstrap.Extras" />
    </namespaces>
  </pages>
</system.web.webPages.razor>

Close any of your opened views where you wish to use the helpers, otherwise Razor won't pick it up initially.

Learn more about custom helpers here.

Bootstrap Datepicker

You can use the Datepicker both by using the name of your property, or using a strongly-typed version. 

@Html.DatePicker("Date", DateTime.Now, new { id = "dp1", @class = "span2" }) 
        
@* strongly-typed *@
@Html.DatePickerFor(m => m.MyDate, new { id = "dp2", @class = "span2" })

Note that you also must initialize them in JavaScript, but you do not need to specify any options for formatting or culture, as this will be se by IOUI automatically depending on the current UICulture. 

$('#dp1').datepicker();
$('#dp2').datepicker();

Bootstrap Timepicker

You can use the Timepicker both by using the name of your property, or using a strongly-typed version. 

@Html.TimePicker("Time", DateTime.Now, new { id = "tp1", @class = "span2" }) 
        
@* strongly-typed *@
@Html.TimePickerFor(m => m.MyDate, new { id = "tp2", @class = "span2" })

Note that you also must initialize them in JavaScript, but you do not need to specify any options for formatting or culture, as this will be se by IOUI automatically depending on the current UICulture. 

$('#tp1').timepicker();
$('#tp2').timepicker();