it-swarm.com.de

ASP.NET Actionlink mit Glyphicon und Text mit anderer Schriftart

Ich möchte einen Button mit @Html.ActionLink präsentieren, aber ich muss meine Anwendungsschriftart im Text haben.

Mit diesem Code:

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

Ich bekomme meine Schaltfläche, aber der Text Create New / erscheint mit der Glyphicon-Schriftfamilie.

Das Einfügen der Glyphicon-Klassen in den Bereich ändert nichts

56
e4rthdog

Sie sollten die Glyphicon-Klasse nicht zum a-Tag hinzufügen.

Von der Bootstrap-Website: 

Nicht mit anderen Komponenten mischen Symbolklassen können nicht direkt mit anderen Komponenten kombiniert werden. Sie sollten nicht zusammen mit anderen Klassen in demselben Element verwendet werden. Fügen Sie stattdessen einen verschachtelten <span> hinzu und wenden Sie die Symbolklassen auf den <span> an.

Nur für leere Elemente Symbolklassen sollten nur für Elemente verwendet werden, die keinen Textinhalt enthalten und keine untergeordneten Elemente enthalten.

Mit anderen Worten: Der korrekte HTML-Code für diesen Vorgang lautet: <a href="#" class="btn btn-warning">test <span class="glyphicon glyphicon-plus-sign"></span></a>

Dies macht den Html.ActionLink-Helfer ungeeignet. Stattdessen könnten Sie so etwas verwenden:

<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

Das funktioniert für mich in MVC 5:

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

Der erste Parameter darf nicht leer oder null sein, sonst wird er durchgebrannt.

20

Es ist vielleicht besser, einfach den HTML-Code zu schreiben, anstatt ihn mit HtmlHelper.ActionLink... zu arbeiten.

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

Hier ist meins. Inspiriert von 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

Sie können eine einfache Erweiterung verwenden:

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

Verwendungszweck:

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

Ich sollte mit dem Ansatz von @Url.Action anstelle von @Html.ActionLink gehen.

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

Versuch es!

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

Lass uns das mal ausprobieren. Lassen Sie mich wissen, ob es funktioniert. Danke

<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

Versuche dies. Arbeitete für mich.

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

Wie wäre es mit Html.BeginForm mit 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