带有字形图标和不同字体文本的 ASP.NET Actionlink答案

【问题标题】：ASP.NET Actionlink with glyphicon and text with different font带有字形图标和不同字体文本的 ASP.NET Actionlink
【发布时间】：2014-11-28 05:17:54
【问题描述】：

我想展示一个带有@Html.ActionLink 的按钮，但我需要在文本中包含我的应用程序字体。

使用此代码：

<span>
    @Html.ActionLink("  Create New", "Create", null, new { @class = "btn btn-warning glyphicon glyphicon-plus-sign" })
</span>

我得到了我的按钮，但 Create New 文本与 glyphicon font-family 一起出现。

将 glyphicon 类放在 span 中不会改变任何东西

【问题讨论】：

标签： asp.net-mvc twitter-bootstrap razor glyphicons

【解决方案1】：

您不应将 glyphicon 类添加到 a-tag 中。

来自 Bootstrap 网站：

不要与其他成分混合 图标类不能直接与其他组件组合。它们不应与同一元素上的其他类一起使用。相反，添加一个嵌套的<span> 并将图标类应用于<span>。

仅用于空元素 图标类只能用于不包含文本内容且没有子元素的元素。

换句话说，按照您想要的方式工作的正确 HTML 是：<a href="#" class="btn btn-warning">test <span class="glyphicon glyphicon-plus-sign"></span></a>

这使得Html.ActionLink 助手不适合。相反，你可以使用类似的东西：

<a href="@Url.Action("Action", "Controller")" class="btn btn-warning">
    link text 
    <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
</a>

【讨论】：

很好的解决方案，一个小注释可以避免浏览器显示问题：使用和像这样的结束标记而不是
不要忘记aria-hidden="true" 上的span 元素。
这救了我的命。谢谢！
可爱的答案。我也在寻找@Url.Action 功能，但不知道如何“搜索”.... :)
事实上确实如此，Url.Action("Action", "Controller", new { MyRoute="data"})

【解决方案2】：

这在 MVC 5 中适用于我：

@Html.ActionLink(" ", "EditResources", "NicheSites", new { ViewBag.dbc, item.locale, ViewBag.domainId, domainName = ViewBag.domaiName }, new {@class= "glyphicon glyphicon-edit" })

第一个参数不能为空或null，否则会爆。

【讨论】：

谢谢。为我工作。
这适用于没有文本的 ActionLink，即关闭按钮、添加按钮、减去按钮等。这正是我想要的。如果您的按钮有文本，“接受”的答案是最好的方法。谢谢
即使这样可行，它也不遵循 Bootstrap 文档，该文档指出 glyphicon 类不应与其他包含文本的类或元素组合。

【解决方案3】：

最好只写出 HTML，而不是尝试使其与 HtmlHelper.ActionLink 一起使用...

<span>
    <a href="@Url.Action("Create")" class="btn btn-warning">
        <span class="glyphicon glyphicon-plus-sign"></span>
        Create New
    </a>
</span>

【讨论】：

【解决方案4】：

这是我的。灵感来自 Andrey Burykin

public static class BensHtmlHelpers
{
    public static MvcHtmlString IconLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues, String iconName, object htmlAttributes = null)
    {
        var linkMarkup = htmlHelper.ActionLink(linkText, actionName, routeValues, htmlAttributes).ToHtmlString();
        var iconMarkup = String.Format("<span class=\"{0}\" aria-hidden=\"true\"></span>", iconName);
        return new MvcHtmlString(linkMarkup.Insert(linkMarkup.IndexOf(@"</a>"), iconMarkup));
    }
}

【讨论】：

【解决方案5】：

我应该使用@Url.Action而不是@Html.ActionLink的方法，示例代码如下：

<span>
<a href="@Url.Action("Create", new { @class = "btn btn-warning" })"><span class="glyphicon glyphicon-plus-sign"></span> Create New</a>
</span>

【讨论】：

【解决方案6】：

你可以使用简单的扩展：

private static readonly String SPAN_FORMAT = "<span class=\"{0}\" aria-hidden=\"true\"></span>";
private static readonly String A_END = "</a>";
public static MvcHtmlString ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues, String iconName, object htmlAttributes = null)
{
    var linkMarkup = htmlHelper.ActionLink(linkText, actionName, routeValues, htmlAttributes).ToHtmlString();
    if (!linkMarkup.EndsWith(A_END))
        throw new ArgumentException();

    var iconMarkup = String.Format(SPAN_FORMAT, iconName);
    return new MvcHtmlString(linkMarkup.Insert(linkMarkup.Length - A_END.Length, iconMarkup));
}

用法：

Html.ActionLink(" ", "DeleteChart", new { Id = _.Id }, "glyphicon glyphicon-trash")

【讨论】：

【解决方案7】：

试试吧！

@Html.ActionLink(" Cerr sesión", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" , @class= "glyphicon glyphicon-log-in" })

【讨论】：

【解决方案8】：

让我们试试这个。让我知道它是否有效。谢谢

<style>
   span.super a
  {
      font: (your application font) !important;
  }

</style>

<span class="super">
    @Html.ActionLink("  Create New", "Create", null, new { @class = "btn btn-warning glyphicon glyphicon-plus-sign" })
</span>

【讨论】：

【解决方案9】：

如何将 Html.BeginForm 与 FormMethod.Get / FormMethod.Post 一起使用

@using (Html.BeginForm("Action", "Controller", new { Area = "" },
FormMethod.Get, htmlAttributes: new { title = "SomeTitle" }))
{   
   <button type="submit" class="btn-link" role="menuitem">
   <i class="glyphicon glyphicon-plus-sign"></i>Create New</button>
}

【讨论】：

【解决方案10】：

试试这个。为我工作。

<button class="btn btn-primary"><i class ="fa fa-plus">@Html.ActionLink(" ", "Create", "Home")</i></button>

【讨论】：