Display html within @html.actionlink with Twitter Bootstrap

Instead of using @Html.ActionLink(), just write out the <a> tag yourself. You can use @Url.Action() to get the URL of an action for your HREF attribute.

The @Html helpers are nice, but they won't always provide the flexibility you need.

I was dealing with the same issue, but wanted to keep using a helper, because I was making an Ajax button.

I ended up with these two helper methods, one for each helper:

public static MvcHtmlString IconActionLink(this AjaxHelper helper, string icon, string text, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes){    var builder = new TagBuilder("i");    builder.MergeAttribute("class", icon);    var link = helper.ActionLink("[replaceme] " + text, actionName, controllerName, routeValues, ajaxOptions, htmlAttributes).ToHtmlString();    return new MvcHtmlString(link.Replace("[replaceme]", builder.ToString()));}public static MvcHtmlString IconActionLink(this HtmlHelper helper, string icon, string text, string actionName, string controllerName, object routeValues, object htmlAttributes){    var builder = new TagBuilder("i");    builder.MergeAttribute("class", icon);    var link = helper.ActionLink("[replaceme] " + text, actionName, controllerName, routeValues, htmlAttributes).ToHtmlString();    return new MvcHtmlString(link.Replace("[replaceme]", builder.ToString()));}

Just throw them in a static class in your project, compile and you should see them (You may need to add an using statement on your page).

When using the helper you can use "icon-plus" or even "icon-plus icon-white" for the icon string.

3-Step Solution:

1. Create this HtmlExtensions class:

using System.Web.Mvc;public static class HtmlExtensions{    public static MvcHtmlString ActionButton(this HtmlHelper html, string linkText, string action, string controllerName, string iconClass)    {        //<a href="/@lLink.ControllerName/@lLink.ActionName" title="@lLink.LinkText"><i class="@lLink.IconClass"></i><span class="">@lLink.LinkText</span></a>        var lURL = new UrlHelper(html.ViewContext.RequestContext);        // build the <span class="">@lLink.LinkText</span> tag        var lSpanBuilder = new TagBuilder("span");        lSpanBuilder.MergeAttribute("class", "");        lSpanBuilder.SetInnerText(linkText);        string lSpanHtml = lSpanBuilder.ToString(TagRenderMode.Normal);        // build the <i class="@lLink.IconClass"></i> tag        var lIconBuilder = new TagBuilder("i");        lIconBuilder.MergeAttribute("class", iconClass);        string lIconHtml = lIconBuilder.ToString(TagRenderMode.Normal);        // build the <a href="@lLink.ControllerName/@lLink.ActionName" title="@lLink.LinkText">...</a> tag        var lAnchorBuilder = new TagBuilder("a");        lAnchorBuilder.MergeAttribute("href", lURL.Action(action, controllerName));        lAnchorBuilder.InnerHtml = lIconHtml + lSpanHtml; // include the <i> and <span> tags inside        string lAnchorHtml = lAnchorBuilder.ToString(TagRenderMode.Normal);        return MvcHtmlString.Create(lAnchorHtml);    }}

2. Add this using at your View

@using Extensions

3. And simple call when you need

@: <li class="btn btn-mini btn-inverse"> @Html.ActionButton(lLink.LinkText, lLink.ActionName, lLink.ControllerName, lLink.IconClass)</li>