Your action failed

Mvc Bootstrap Html Helper Extensions

Assembly
WebExtras.Mvc.dll
Namespace
WebExtras.Mvc.Bootstrap
Dependancies
  • Bootstrap 2.3.x
  • Font Awesome 3.11 and below
  • webextras.bootstrap.css

Icon

Markup


@Html.Icon(EBootstrapIcon.Ok)
@Html.Icon(EFontAwesomeIcon.Ok)
@Html.Icon(EFontAwesomeIcon.Ok, EFontAwesomeIconSize.Large)
  

Output

Default Bootstrap Icons
Font Awesome Icons
Sized Font Awesome Icons

Adding icons to existing elements

Markup


@Html.Hyperlink("Take me to google", "http://www.google.com").AddIcon(EBootstrapIcon.Ok)
  

Output

All available extensions


// Note that the 'icon' can be a default Bootstrap icon or a Font Awesome icon
.AddIcon(bootstrap-icon)                
.AddIcon(fontawesome-icon)
.AddIcon(fontawesome-icon, fontawesome-icon-size)
.AddWhiteIcon(bootstrap-icon)
.AddWhiteIcon(fontawesome-icon) 
.AddWhiteIcon(fontawesome-icon, fontawesome-icon-size)
  

Button styled hyperlinks

Markup


@Html.Hyperlink("Take me to google", "http://www.google.com")
  .AddWhiteIcon(EBootstrapIcon.Ok)
  .AsButton(EBootstrapButton.Info) 
  

Output

All available extensions


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

Navbar

Markup


@{
  // You can use Hyperlink elements or a HtmlList element to render a navbar
  Hyperlink link1 = new Hyperlink("Link 1", "#");
  Hyperlink link2 = new Hyperlink("Link 2", "#");
  Hyperlink link3 = new Hyperlink("Link 3", "#");
  Hyperlink link4 = new Hyperlink("Brand", "#", new { @class = "brand" });
        
  HtmlListItem item3 = new HtmlListItem(string.Empty);
  item3.Append(link3);        

  HtmlList list = new HtmlList(EList.Unordered, new HtmlListItem[] { item3 });    
}      

@Html.Navbar(EBootstrapNavbar.Normal, list)

// Use appropriate navbar type to get all bootstrap effects
@Html.Navbar(EBootstrapNavbar.Normal, link1, link2, link3, link4).AsInverse()  // Creates an inverse styled navbar
  

Output

Progress Bars

Markup


@Html.ProgressBar(EBootstrapProgressBar.Default, 10)
@Html.ProgressBar(EBootstrapProgressBar.Success, 25)
@Html.ProgressBar(EBootstrapProgressBar.Warning, 50).AsStriped()
@Html.ProgressBar(EBootstrapProgressBar.Danger, 75).AsAnimated()
  

Output

Striped and Animated progress bar CSS effects are not supported in Internet Explorer 9 and below and on Opera 12

Tooltips

Markup


@Html.TooltipFor(f => f.SomeProperty, "This is a tooltip")
@Html.TooltipFor(f => f.SomeProperty2)
  

Output

First call result
Second call result

All available extensions


// Tooltip text retrieved from the System.ComponentModel.DescriptionAttribute added to the view model property
@Html.TooltipFor(propertySelector)
@Html.TooltipFor(propertySelector, placement, trigger)

// Tooltip text retrieved from the function parameter passed in
@Html.TooltipFor(propertySelector, tooltipText)
@Html.TooltipFor(propertySelector, tooltipText, placement, trigger)
  

Action messages

WebExtras provides a way to add action messages to denote status of action to notify a user. For e.g. you may want to add a message to the user when he is moved to a different page on a form submit or on a particular action

Usage


// In the controller
using WebExtras.MVC.Bootstrap.Core

public class HomeController : ControllerBase
{
  public ActionResult SomeAction()
  {
    SomeModel model = new SomeModel();
    return this.View("myview", model, "Your action was successful");
  }

  public ActionResult SomeOtherAction()
  {
    SomeModel model = new SomeModel();
    return this.RedirectToAction(myActionResult, "Your action failed", EActionMessage.Error);
  }
}

// In the view
@Html.GetLastActionMessage()
  

Output

// Click the link below to see an action message demo.
// Action messages by default appear on the top right corner of the screen.
// It's position can be controlled via CSS though. See the accompanying webextras.css file.

Action Successful Message Demo      Action Error Message Demo