Mettre du HTML dans Html.ActionLink (), plus aucun texte de lien?

J'ai deux questions:

1. Je me demande comment je peux afficher aucun texte de lien lors de l'utilisation Html.ActionLink()dans une vue MVC (en fait, c'est le cas Site.Master).

Il n'y a pas de version surchargée qui n'autorise pas le texte de lien, et lorsque j'essaie de ne passer qu'un vide string, le compilateur me dit qu'il a besoin d'une chaîne non vide.

Comment puis-je réparer cela?

2. J'ai besoin de mettre des <span>balises dans la balise d'ancrage, mais cela ne fonctionne pas avec Html.ActionLink();. J'aimerais voir la sortie suivante:

   Texte de portée

Comment puis-je placer des balises à l'intérieur de la balise d'ancrage dans ASP.NET MVC?

Au lieu d'utiliser Html.ActionLink, vous pouvez afficher une URL via Url.Action

<a href="<%= Url.Action("Index", "Home") %>"><span>Text</span></a>
<a href="@Url.Action("Index", "Home")"><span>Text</span></a>

Et pour faire une URL vide, vous pourriez avoir

<a href="<%= Url.Action("Index", "Home") %>"></a>
<a href="@Url.Action("Index", "Home")"></a>

Une extension HtmlHelper personnalisée est une autre option. Remarque : ParameterDictionary est mon propre type. Vous pouvez remplacer un RouteValueDictionary mais vous devrez le construire différemment.

public static string ActionLinkSpan( this HtmlHelper helper, string linkText, string actionName, string controllerName, object htmlAttributes )
{
    TagBuilder spanBuilder = new TagBuilder( "span" );
    spanBuilder.InnerHtml = linkText;

    return BuildNestedAnchor( spanBuilder.ToString(), string.Format( "/{0}/{1}", controllerName, actionName ), htmlAttributes );
}

private static string BuildNestedAnchor( string innerHtml, string url, object htmlAttributes )
{
    TagBuilder anchorBuilder = new TagBuilder( "a" );
    anchorBuilder.Attributes.Add( "href", url );
    anchorBuilder.MergeAttributes( new ParameterDictionary( htmlAttributes ) );
    anchorBuilder.InnerHtml = innerHtml;

    return anchorBuilder.ToString();
}

Voici une solution de contournement (faible et sale) au cas où vous auriez besoin d'utiliser ajax ou une fonctionnalité que vous ne pouvez pas utiliser lorsque vous créez un lien manuellement (en utilisant une balise):

<%= Html.ActionLink("LinkTextToken", "ActionName", "ControllerName").ToHtmlString().Replace("LinkTextToken", "Refresh <span class='large sprite refresh'></span>")%>

Vous pouvez utiliser n'importe quel texte au lieu de 'LinkTextToken', il n'est là que pour être remplacé, il est seulement important qu'il ne se produise nulle part ailleurs dans actionlink.

Utilisez simplement à la Url.Actionplace de Html.ActionLink:

<li id="home_nav"><a href="<%= Url.Action("ActionName") %>"><span>Span text</span></a></li>

Cela a toujours bien fonctionné pour moi. Ce n'est pas salissant et très propre.

<a href="@Url.Action("Index", "Home")"><span>Text</span></a>

Je me suis retrouvé avec une méthode d'extension personnalisée. Il est intéressant de noter que lorsque vous essayez de placer du HTML à l'intérieur d'un objet Anchor, le texte du lien peut être soit à gauche, soit à droite du HTML interne. Pour cette raison, j'ai choisi de fournir des paramètres pour le HTML interne gauche et droit - le texte du lien est au milieu. Le HTML interne gauche et droit est facultatif.

Méthode d'extension ActionLinkInnerHtml:

    public static MvcHtmlString ActionLinkInnerHtml(this HtmlHelper helper, string linkText, string actionName, string controllerName, RouteValueDictionary routeValues = null, IDictionary<string, object> htmlAttributes = null, string leftInnerHtml = null, string rightInnerHtml = null)
    {
        // CONSTRUCT THE URL
        var urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
        var url = urlHelper.Action(actionName: actionName, controllerName: controllerName, routeValues: routeValues);

        // CREATE AN ANCHOR TAG BUILDER
        var builder = new TagBuilder("a");
        builder.InnerHtml = string.Format("{0}{1}{2}", leftInnerHtml, linkText, rightInnerHtml);
        builder.MergeAttribute(key: "href", value: url);

        // ADD HTML ATTRIBUTES
        builder.MergeAttributes(htmlAttributes, replaceExisting: true);

        // BUILD THE STRING AND RETURN IT
        var mvcHtmlString = MvcHtmlString.Create(builder.ToString());
        return mvcHtmlString;
    }

Exemple d'utilisation:

Voici un exemple d'utilisation. Pour cet exemple, je voulais uniquement le html interne sur le côté droit du texte du lien ...

@Html.ActionLinkInnerHtml(
    linkText: "Hello World"
        , actionName: "SomethingOtherThanIndex"
        , controllerName: "SomethingOtherThanHome"
        , rightInnerHtml: "<span class=\"caret\" />"
        )

Résultats:

cela donne le HTML suivant ...

<a href="/SomethingOtherThanHome/SomethingOtherThanIndex">Hello World<span class="caret" /></a>

J'ai pensé que cela pourrait être utile lors de l'utilisation de bootstrap et de certains glypicons:

<a class="btn btn-primary" 
    href="<%: Url.Action("Download File", "Download", 
    new { id = msg.Id, distributorId = msg.DistributorId }) %>">
    Download
    <span class="glyphicon glyphicon-paperclip"></span>
</a>

Cela affichera une balise A, avec un lien vers un contrôleur, avec une belle icône en forme de trombone pour représenter un lien de téléchargement, et la sortie html est maintenue propre

Voici une super extension de la réponse de @ tvanfosson. Je m'en suis inspiré et j'ai décidé de le rendre plus générique.

    public static MvcHtmlString NestedActionLink(this HtmlHelper htmlHelper, string linkText, string actionName,
        string controllerName, object routeValues = null, object htmlAttributes = null,
        RouteValueDictionary childElements = null)
    {
        var htmlAttributesDictionary = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);

        if (childElements != null)
        {
            var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);

            var anchorTag = new TagBuilder("a");
            anchorTag.MergeAttribute("href",
                routeValues == null
                    ? urlHelper.Action(actionName, controllerName)
                    : urlHelper.Action(actionName, controllerName, routeValues));
            anchorTag.MergeAttributes(htmlAttributesDictionary);
            TagBuilder childTag = null;

            if (childElements != null)
            {
                foreach (var childElement in childElements)
                {
                    childTag = new TagBuilder(childElement.Key.Split('|')[0]);
                    object elementAttributes;
                    childElements.TryGetValue(childElement.Key, out elementAttributes);

                    var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(elementAttributes);

                    foreach (var attribute in attributes)
                    {
                        switch (attribute.Key)
                        {
                            case "@class":
                                childTag.AddCssClass(attribute.Value.ToString());
                                break;
                            case "InnerText":
                                childTag.SetInnerText(attribute.Value.ToString());
                                break;
                            default:
                                childTag.MergeAttribute(attribute.Key, attribute.Value.ToString());
                                break;
                        }
                    }
                    childTag.ToString(TagRenderMode.SelfClosing);
                    if (childTag != null) anchorTag.InnerHtml += childTag.ToString();
                }                    
            }
            return MvcHtmlString.Create(anchorTag.ToString(TagRenderMode.Normal));
        }
        else
        {
            return htmlHelper.ActionLink(linkText, actionName, controllerName, routeValues, htmlAttributesDictionary);
        }
    }

C'est très simple.

Si vous voulez avoir quelque chose comme une icône de glyphicon, puis "Liste de souhaits",

<span class="glyphicon-heart"></span> @Html.ActionLink("Wish List (0)", "Index", "Home")

Ma solution utilisant des composants bootstrap:

<a class="btn btn-primary" href="@Url.Action("resetpassword", "Account")">
    <span class="glyphicon glyphicon-user"></span> Reset Password
</a>

Veuillez essayer ci-dessous le code qui peut vous aider.

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