asp.net-mvc 带有字形和不同字体的文本的 ASP.NET Actionlink

ASP.NET Actionlink with glyphicon and text with different font

提问by e4rthdog

I want to present a button with @Html.ActionLinkbut i need to have my application font in the text.

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

With this code:

使用此代码：

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

I get my button but the Create Newtext appears with the glyphicon font-family.

我得到了我的按钮，但Create New文本与 glyphicon 字体系列一起出现。

Putting the glyphicon classes in the span doesn't change anything

将字形类放在跨度中不会改变任何东西

回答by Robban

You should not add the glyphicon class to the a-tag.

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

From the Bootstrap website:

从 Bootstrap 网站：

Don't mix with other componentsIcon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span>and apply the icon classes to the <span>.

Only for use on empty elementsIcon classes should only be used on elements that contain no text content and have no child elements.

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

仅用于空元素Icon 类应仅用于不包含文本内容且没有子元素的元素。

In other words the correct HTML for this to work the way you want would be: <a href="#" class="btn btn-warning">test <span class="glyphicon glyphicon-plus-sign"></span></a>

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

This makes the Html.ActionLinkhelper unsuitable. Instead you could use something like:

这使得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>

回答by Norbert Norbertson

This works for me in MVC 5:

这在 MVC 5 中对我有用：

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

The first parameter cannot be empty or null or it will blow.

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

回答by Anthony Chu

It might be better to just write out the HTML rather than try to make it work with HtmlHelper.ActionLink...

最好只写出 HTML 而不是尝试让它与HtmlHelper.ActionLink......

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

回答by Ben Hale

Here's mine. Inspired by 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));
    }
}

回答by Webking

I should go with the approach of @Url.Actioninstead of @Html.ActionLink, se example code below:

我应该使用@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>

回答by Andrey Burykin

You can use simple extension:

您可以使用简单的扩展名：

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

Usage:

用法：

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

回答by Charlie

Try it!

尝试一下！

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

回答by Aayush Rajopadhyaya

Try this. Worked for me.

尝试这个。对我来说有效。

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

回答by Hatjhie

Let's have a try on this. Let me know if it is working .Thanks

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

<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>

回答by HostMyBus

How about using Html.BeginForm with a FormMethod.Get / FormMethod.Post

如何将 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>
}