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

Question

J'utilise Twitter Bootstrap et j'essaie de rendre mes liens ASP.Net MVC agréables.

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

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

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

Answer 1

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 collaborateurs @Html sont gentils, mais ils ne vous apporteront pas toujours la flexibilité dont vous avez besoin.

Answer 2

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.

Answer 3

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="http://stackoverflow.com/@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 en avez besoin

 @: <li class="btn btn-mini btn-inverse"> @Html.ActionButton(lLink.LinkText, lLink.ActionName, lLink.ControllerName, lLink.IconClass)</li>
 

Answer 4

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 du IconPrepend correspond au 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.

Answer 5

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