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

【问题标题】：Display html within @html.actionlink with Twitter Bootstrap使用 Twitter Bootstrap 在 @html.actionlink 中显示 html
【发布时间】：2012-05-12 20:35:09
【问题描述】：

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

但是，下面链接中的

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

有什么方法可以将

【问题讨论】：

标签： asp.net asp.net-mvc asp.net-mvc-3 twitter-bootstrap

【解决方案1】：

不要使用@Html.ActionLink()，只需自己写出<a> 标签。您可以使用 @Url.Action() 获取 HREF 属性的操作 URL。

@Html 助手很不错，但它们并不总是提供您需要的灵活性。

【讨论】：

【解决方案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”作为图标字符串。

【讨论】：

这个答案肯定应该被标记为最佳答案。

【解决方案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>

【讨论】：

这太过分了。

【解决方案4】：

使用TwitterBootstrapMVC。

它适用于智能感知，允许流畅的语法，你可以用它编写类似的东西：

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

IconPrepend中的参数true为白色图标类型。

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

免责声明：我是 TwitterBootstrapMVC 的作者

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

【讨论】：

仅供参考，TwitterBootstrapMVC 不再对使用 Bootstrap 3 的开发人员免费，因为如果您是个人或组织开发人员，他们现在会收取许可费。
我只能建议不要使用 Html Helpers，只使用原始 Jquery，这意味着 100% 的灵活性......

【解决方案5】：

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

在 css 样式中：

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

【讨论】：

我必须添加以下内容才能完成这项工作。 @font-face { 字体家族：FontAwesome; src: url(../fonts/fontawesome-webfont.woff2); }

【解决方案6】：

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

【讨论】：

你能扩展并证明你的答案吗？为什么这是一个好答案？

【解决方案7】：

@Html.ActionLink("Link Title", "ActionName", "ControllerName", New With {.id = Model.id }, New With {.class= Html.Raw("btn btn-primary btn-mini")})

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

【讨论】：

这不会影响为链接显示的文本，这就是问题所在。

【解决方案8】：

对于任何 ASP.NET 用户来说，这对我来说都是如此：

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

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

【讨论】：

【解决方案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 相同的功能。见下图（顶部按钮正是您使用它的方式，而底部按钮是问题的解决方案。

【讨论】：

【解决方案10】：

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

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

或者如果你想通过一些参数重定向到同一个控制器：

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

【讨论】：