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

Question

J'ai deux questions:

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

Il n'y a pas de version surchargée qui n'autorise pas le texte du lien, et quand j'essaie de passer juste un blanc 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 <span> Tags dans la balise d'ancrage, mais cela ne fonctionne pas avec Html.ActionLink();. Je voudrais voir la sortie suivante:

   SPANS Text

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

Answer 1

Au lieu d'utiliser html.actionLink, vous pouvez rendre 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 que vous pourriez avoir

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

Answer 2

Une extension HTMLHelper personnalisée est une autre option. Noter: ParamètreDictionary est mon propre type. Vous pouvez remplacer un routard de route, 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();
}

Answer 3

Voici (faible et sale) solution de contournement au cas où vous auriez besoin d'utiliser AJAX ou une fonctionnalité que vous ne pouvez pas utiliser lors de la création manuelle du lien (à l'aide de la 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 ne doit être remplacé que, il est important qu'il ne se produise nulle part ailleurs dans ActionLink.

Answer 4

Utiliser juste Url.Action à la place de Html.ActionLink:

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

Answer 5

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

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

Answer 6

Je me suis retrouvé avec une méthode d'extension personnalisée. Il vaut la peine de noter, lorsque vous essayez de placer HTML à l'intérieur d'un objet d'ancrage, le texte de liaison peut être soit à gauche, soit à droite du HTML intérieur. Pour cette raison, j'ai choisi de fournir des paramètres pour le HTML intérieur gauche et droit - le texte de liaison est au milieu. Les HTML intérieurs gauche et droit sont facultatifs.

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 seulement le HTML intérieur sur le côté droit du texte du lien ...

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

Résultats:

Il en résulte le HTML suivant ...

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

Answer 7

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 montrera une balise A, avec un lien vers un contrôleur, avec une belle icône de trombone dessus pour représenter un lien de téléchargement, et la sortie HTML est maintenue propre

Answer 8

Voici une expansion Uber de la réponse de @ tvanfosson. J'en ai été 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);
        }
    }

Answer 9

C'est très simple.

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

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

Answer 10

Ma solution à l'aide de composants bootstrap:

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

Answer 11

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

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