web-dev-qa-db-fra.com

Lien d’action ASP.NET avec glyphicon et texte avec une police différente

Je veux présenter un bouton avec @Html.ActionLink mais je dois avoir la police de l'application dans le texte.

Avec ce code:

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

Je reçois mon bouton mais le message Create New texte apparaît avec la famille de polices glyphicon.

Mettre les classes de glyphicon dans la durée ne change rien

asp.net-mvctwitter-bootstraprazorglyphicons
56
e4rthdog

Vous ne devez pas ajouter la classe glyphicon à la balise a.

Sur le site web Bootstrap: 

Ne pas mélanger avec d'autres composants Les classes d'icônes ne peuvent pas être combinées directement avec d'autres composants. Ils ne doivent pas être utilisés avec d'autres classes sur le même élément. Ajoutez plutôt un <span> imbriqué et appliquez les classes d'icônes au <span>.

À utiliser uniquement sur des éléments vides Les classes d'icônes ne doivent être utilisées que sur des éléments ne contenant pas de contenu texte et n'ayant pas d'éléments enfants.

En d'autres termes, le code HTML correct pour que cela fonctionne comme vous le souhaitez serait: <a href="#" class="btn btn-warning">test <span class="glyphicon glyphicon-plus-sign"></span></a>

Cela rend le helper Html.ActionLink inadapté. Au lieu de cela, vous pouvez utiliser quelque chose comme:

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

Cela fonctionne pour moi dans MVC 5:

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

Le premier paramètre ne peut pas être vide ou nul ou il va sauter.

20
Norbert Norbertson

Il serait peut-être préférable d'écrire le code HTML plutôt que d'essayer de le faire fonctionner avec HtmlHelper.ActionLink...

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

Voilà le mien. Inspiré par 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
Ben Hale

Vous pouvez utiliser une 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")
2
Andrey Burykin

Je devrais utiliser l'approche de @Url.Action au lieu de @Html.ActionLink, exemple de code ci-dessous:

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

Essayez le!

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

Essayons cela. Faites-moi savoir si cela fonctionne. Merci

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

Essaye ça. Travaillé pour moi.

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

Que diriez-vous d'utiliser Html.BeginForm avec un 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>
}
0
HostMyBus