Umieszczasz HTML wewnątrz Html.ActionLink (), plus brak tekstu linku?

Mam dwa pytania:

1. Zastanawiam się, jak mogę wyświetlać brak tekstu łącza podczas używania Html.ActionLink()w widoku MVC (w rzeczywistości jest to Site.Master).

Nie ma przeciążonej wersji, która nie zezwala na tekst linku, a kiedy próbuję przekazać tylko puste miejsce string, kompilator mówi mi, że potrzebuje niepustego ciągu.

Jak mogę to naprawić?

2. Muszę umieścić <span>tagi w tagu kotwicy, ale to nie działa Html.ActionLink();. Chciałbym zobaczyć następujące dane wyjściowe:

   Tekst obejmujący

Jak mogę umieścić tagi wewnątrz tagu kotwicy w ASP.NET MVC?

Zamiast używać Html.ActionLink, możesz wyrenderować adres URL za pomocą Url.Action

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

I zrobić pusty adres URL, który możesz mieć

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

Inną opcją jest niestandardowe rozszerzenie HtmlHelper. Uwaga : ParameterDictionary to mój własny typ. Możesz zastąpić RouteValueDictionary, ale musisz to skonstruować inaczej.

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

Oto (słabe i brudne) obejście na wypadek, gdybyś musiał użyć Ajax lub jakiejś funkcji, której nie możesz użyć podczas tworzenia linku ręcznie (przy użyciu tagu):

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

Możesz użyć dowolnego tekstu zamiast „LinkTextToken”, jest on tylko do zastąpienia, ważne jest tylko, aby nie pojawiał się nigdzie indziej wewnątrz actionlink.

Po prostu użyj Url.Actionzamiast Html.ActionLink:

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

To zawsze działało dobrze dla mnie. Nie jest brudny i bardzo czysty.

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

Skończyło się na niestandardowej metodzie rozszerzenia. Warto zauważyć, że podczas próby umieszczenia kodu HTML wewnątrz obiektu Anchor tekst linku może znajdować się po lewej lub po prawej stronie wewnętrznego kodu HTML. Z tego powodu zdecydowałem się podać parametry dla lewego i prawego wewnętrznego kodu HTML - tekst linku znajduje się pośrodku. Zarówno lewy, jak i prawy wewnętrzny kod HTML są opcjonalne.

Metoda rozszerzenia 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;
    }

Przykład użycia:

Oto przykład użycia. W tym przykładzie chciałem, aby wewnętrzny kod HTML znajdował się po prawej stronie tekstu linku ...

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

Wyniki:

skutkuje to następującym kodem HTML ...

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

Pomyślałem, że może to być przydatne podczas korzystania z bootstrapa i niektórych glypiconów:

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

Spowoduje to wyświetlenie tagu A z linkiem do kontrolera, z ładną ikoną spinacza, która reprezentuje łącze pobierania, a wyjście html jest utrzymywane w czystości

Oto dodatkowe rozszerzenie odpowiedzi @ tvanfosson. Zainspirował mnie to i postanowiłem uczynić go bardziej ogólnym.

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

To jest bardzo proste.

Jeśli chcesz mieć coś w rodzaju ikony glifu, a następnie „Lista życzeń”,

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

Moje rozwiązanie wykorzystujące komponenty bootstrap:

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

Wypróbuj poniższy kod, który może ci pomóc.

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