Icon

Markup

  @Html.Icon(EGumbyIcon.Chart_Pie)
  

Output

Adding icons to existing elements

Markup

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

Output

All available extensions

  .AddIcon(gumby-icon)                
  .AddIcon(gumby-icon, icon-on-left-flag)
  

Button styled hyperlinks

Markup

  @Html.Hyperlink("Take me to google", "http://www.google.com")
    .AddIcon(EGumbyIcon.Check)
    .AsButton(EGumbyButton.Info) 
  

Output

All available extensions

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

Navbar

Markup

  @{
      // You can use Hyperlink elements or a HtmlList element to render a navbar
      Hyperlink logo = new Hyperlink("Metro Logo", "/").AddCssClass("two columns logo");
      Hyperlink link = new Hyperlink("Link", "#");
      IExtendedHtmlString list = new HtmlList(EList.Unordered, new HtmlListItem[]
      {
        HtmlListItem.From(link),
        HtmlListItem.From(link),
        HtmlListItem.From(link),
        HtmlListItem.From(link),
        HtmlListItem.From(link),
        HtmlListItem.From(link),
        HtmlListItem.From(link),
      }).AddCssClass("ten columns");
    }
  @Html.Navbar(logo, list)
  @Html.Navbar(logo, link, link, link)
  

Output

All available extensions

  .AsMetro()
  .AsPretty()
  .FixAt(location)
  .FixAt(location, offset)
  .PinAt(location)
  .PinAt(location, offset)
  

Tooltips

Markup

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

Output

All available extensions

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

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

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