使用Twitter Bootstrap在@ html.actionlink中显示html

Question

我正在使用Twitter Bootstrap，并尝试使我的链接ASP.Net MVC看起来不错。

但是，下面链接中的＆lt; i class = ...是html编码的，而不是作为html发送到浏览器：

    @Html.ActionLink("<i class='icon-user icon-white'></i> Create New", "Create", "", New With {Key .class="btn btn-primary"} )

有没有办法保持＆lt; i class = ... as html，以便按钮显示正确？

Answer 1

不要使用@Html.ActionLink()，而是自己写出<a>标记。您可以使用@Url.Action()获取HREF属性的操作网址。

@Html助手很不错，但他们并不总能提供您所需的灵活性。

Answer 2

我正在处理同样的问题，但是想继续使用帮助器，因为我正在制作一个Ajax按钮。

我最终得到了这两个辅助方法，每个辅助方法一个：

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()));
}

只需将它们放入项目中的静态类中，编译即可看到它们（您可能需要在页面上添加using语句）。

使用帮助时，您可以使用“icon-plus”或“icon-plus icon-white”作为图标字符串。

Answer 3

3步解决方案：

<强> 1。创建此HtmlExtensions类：

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。使用您的视图

添加此内容

@using Extensions

第3。在需要时进行简单的通话

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

Answer 4

使用TwitterBootstrapMVC。

它适用于intellisense，允许流利的语法，你可以用它写这样的东西：

@(Html.Bootstrap().ActionLinkButton("Create New", "Create")
    .IconPrepend(Icons.user, true)
    .Style(ButtonStyle.Primary))

true中的参数IconPrepend适用于白色图标类型。

此外，它还有更多非常有用的助手。

---

免责声明：我是TwitterBootstrapMVC的作者

将此库用于Bootstrap 3不是免费的。

Answer 5

@Html.ActionLink(" New", "Create", "", new { @class="icon"} )

以css风格：

.icon:before{
    font-family: FontAwesome;
    content: "\f055";
}

Answer 6

<a href="@Url.Action("Index","Employee")" class="btn btn-primary">Index</a>

Answer 7

@ Html.ActionLink（“Link Title”，“ActionName”，“ControllerName”，New With {.id = Model.id}， New With {.class = Html.Raw（“btn btn-primary” BTN-迷你“）} ）

此HTML.AcionLink重载允许您将属性添加到呈现的html中 - 请记住在此重载中为所需参数传递null / nothing。

Answer 8

对于任何ASP.NET用户来说，这就是我的工作方式：

<%: Html.ActionLink("Cancel", "Index", "Catalog_Users", new { @class = "btn btn-primary" })%>

显示的文字将是：取消。 ActionResult将是Index，Catalog_Users是控制器。

Answer 9

虽然这个问题很老，但我仍然提供了一个更简单的解决方案。起初，我认为实现这一点非常困难，但它很简单。

<a href="@Url.Action("ActionMethod", "Controller",)" class="btn btn-primary"><i class="fa fa-fw fa-bar-chart-o"></i> Chart</a>

@ Url.Action（）提供与Html.ActionLink相同的功能。见下图（顶部按钮正是您使用它的方式，而底部按钮是解决问题的方法。

Answer 10

我喜欢G Jeny Remirez的回答。我只是想稍微扩展一下。使用四个argumnent actionlink来包含该类非常重要。所以，如果你只是想重定向到同一个控制器，但是一个不同的动作，那就是：

@Html.ActionLink("cancel", "Index", null, new { @class = "btn" })

或者如果您想使用某些参数重定向到同一个控制器：

@Html.ActionLink("Cancel", "Index", new { param1 = ViewBag.param1, input = "activity" }, new { @class = "btn" })