web-dev-qa-db-fra.com

Afficher le code HTML dans @ html.actionlink avec Twitter Bootstrap

J'utilise Twitter Bootstrap et j'essaye de donner à mes liens ASP.Net MVC une apparence agréable.

Cependant, <i class = ... dans le lien ci-dessous, est codé en HTML, plutôt que d'être envoyé en HTML au navigateur:

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

How button appers

Existe-t-il un moyen de conserver <i class = ... au format HTML afin que le bouton s'affiche correctement?

asp.netasp.net-mvcasp.net-mvc-3twitter-bootstrap
41
Mark

Au lieu d'utiliser @Html.ActionLink(), écrivez simplement la balise <a> vous-même. Vous pouvez utiliser @Url.Action() pour obtenir l'URL d'une action pour votre attribut HREF.

Les aides @Html sont agréables, mais elles ne vous apporteront pas toujours la flexibilité dont vous avez besoin.

51
Jonathan Wood

Je traitais le même problème, mais je voulais continuer à utiliser une aide, car je fabriquais un bouton Ajax.

J'ai fini avec deux méthodes d'assistance, une pour chaque aide:

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

Il suffit de les placer dans une classe statique de votre projet, de les compiler et de les voir (vous devrez peut-être ajouter une instruction using sur votre page).

Lorsque vous utilisez l'assistant, vous pouvez utiliser "icon-plus" ou même "icon-plus icon-white" pour la chaîne d'icônes.

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

En style css:

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

Utilisez TwitterBootstrapMVC .

Cela fonctionne avec intellisense, permet une syntaxe fluide et vous pouvez écrire quelque chose comme ça avec:

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

Le paramètre true dans la IconPrepend est pour le type d'icône blanche.

En plus, il a beaucoup plus d’aides très utiles.

Disclaimer: Je suis l'auteur de TwitterBootstrapMVC

L'utilisation de cette bibliothèque pour Bootstrap 3 n'est pas gratuite.

4
Dmitry

Solution en 3 étapes:

1. Créez cette classe 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. Ajoutez ceci en utilisant à votre vue  

@using Extensions

3. Et un simple appel quand vous avez besoin 

@: <li class="btn btn-mini btn-inverse"> @Html.ActionButton(lLink.LinkText, lLink.ActionName, lLink.ControllerName, lLink.IconClass)</li>
4
Rodolpho Brock
<a href="@Url.Action("Index","Employee")" class="btn btn-primary">Index</a>
3
Sraban75

@ Html.ActionLink ("Titre du lien", "NomAction", "Nom du contrôleur", Nouveau avec {.id = Model.id}, Nouveau avec {.class = Html.Raw ("btn btn-primaire btn-mini" )} )

Cette surcharge HTML.AcionLink vous permet d'ajouter un attribut au code HTML rendu. N'oubliez pas de transmettre null/rien pour les paramètres nécessaires dans cette surcharge.

2
Rob Pemberton

Pour tout utilisateur ASP.Net, voici comment cela a fonctionné pour moi:

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

Le texte affiché sera: Cancel . ActionResult sera Index et Catalog_Users sera le contrôleur.

1
G Jeny Ramirez

Bien que cette question soit ancienne, mais je pensais toujours proposer une solution plus simple. Au début, je pensais que c’était si difficile à réaliser, mais c’est si simple.

<a href="@Url.Action("ActionMethod", "Controller",)" class="btn btn-primary"><i class="fa fa-fw fa-bar-chart-o"></i> Chart</a>

@ Url.Action () donne le même pouvoir que celui de Html.ActionLink. Voir l'image ci-dessous (le bouton du haut correspond exactement à votre utilisation, tandis que le bouton du bas est la solution au problème.

 using html code in MVC Html.Action function

1
Gabriel Ojomu

J'aime la réponse de G Jeny Remirez. Je veux juste développer un peu ce sujet. Il est important que vous utilisiez un lien action à quatre arguments pour inclure la classe. Donc, si vous voulez juste rediriger vers le même contrôleur, mais avec une action différente, c'est: 

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

Ou si vous souhaitez rediriger vers le même contrôleur avec certains paramètres:

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