Помещение HTML в Html.ActionLink (), плюс текст без ссылки?

169

У меня есть два вопроса:

  1. Мне интересно, как я не могу отобразить текст ссылки при использовании Html.ActionLink()в представлении MVC (на самом деле, это так Site.Master).

Не существует перегруженной версии, которая не допускает текст ссылки, и когда я пытаюсь передать только пробел string, компилятор говорит мне, что ему нужна непустая строка.

Как я могу это исправить?

  1. Мне нужно поместить <span>теги в тег привязки, но он не работает Html.ActionLink();. Я хотел бы увидеть следующий вывод:

    Span текст

Как поместить теги в тег привязки в ASP.NET MVC?

MegaMatt
источник
Какова будет цель / использование наличия пустой ссылки действия?
Дэвид
1
Я использую спрайт изображения для панели навигации, и <li>вы видите конкретную кнопку навигации (размер, фоновое положение и т. Д. Указаны в таблице стилей CSS). Но он должен ссылаться на что-то, поэтому я не хочу отображать текст. Я хочу, чтобы спрайт сделал это для меня.
MegaMatt

Ответы:

322

Вместо использования Html.ActionLink вы можете отобразить URL через Url.Action

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

И сделать пустой URL-адрес, вы могли бы иметь

<a href="<%= Url.Action("Index", "Home") %>"></a>
<a href="@Url.Action("Index", "Home")"></a>
Дэвид
источник
3
Мне пришлось использовать <a href="@Url.Action("Index", "Home")"> <span> Text </ span> </a>, моего разработчика нет рядом, чтобы спросить, почему я должен был это сделать это может быть полезно для любого, кто попытается использовать приведенный выше ответ и обнаружит, что он не работает.
Дэйв Хей
2
@ Url. Действие при использовании шаблона бритвы. Я обновил ответ, чтобы вы могли видеть оба.
Дэвид
<a href=@Url.Action("Create", "Product")><span>Create</span></a>тоже работает. Цитаты не обязательны.
Дэвид
1
Для статического контента, почему бы не напечатать html напрямую? Это кажется менее многословным и более простым
SkeetJon
Если вы хотите использовать Ajax, то больше не подходит для Asp.Net Core 2.
Зоркинд,
17

Пользовательское расширение HtmlHelper является еще одним вариантом. Примечание : ParameterDictionary - мой собственный тип. Вы можете заменить RouteValueDictionary, но вам придется создать его по-другому.

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();
}
tvanfosson
источник
14

Вот (низкий и грязный) обходной путь, если вам нужно использовать ajax или какую-либо функцию, которую вы не можете использовать при создании ссылки вручную (используя тег):

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

Вы можете использовать любой текст вместо LinkTextToken, он только для замены, важно только, чтобы он не встречался где-либо еще внутри actionlink.

Горан Обрадович
источник
6
+1 Отличная идея. В Razor вам придется все это Html.Raw()
читать
Спасибо :) Теперь, когда я вижу то, что мы использовали, я почти смущаюсь, делая эти вещи на сервере, это такая трата серверных ресурсов ...
Горан Обрадович
1
Поскольку я использую @ Ajax.ActionLink и не хотел вручную устанавливать все date-атрибуты, это лучшее решение для меня. +1
асонту
Спасибо, работал как шарм, когда я также использовал Ajax.ActionLink. Похоже, это ничего не замедлило, и я должен был сохранить прежний дизайн и стиль.
Blacky Wolf
Просто хочу сказать, что это не работает в .Net Core, ToHtmlString () был удален в v2, не уверен насчет v1
Zorkind
12

Просто используйте Url.Actionвместо Html.ActionLink:

<li id="home_nav"><a href="<%= Url.Action("ActionName") %>"><span>Span text</span></a></li>
Крейг Штунц
источник
@CraigStunz, почему мы должны использовать Url.Action вместо Html.ActionLink?
Roxy'Pro
6

Это всегда работало хорошо для меня. Это не грязно и очень чисто.

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

dbarth
источник
Url.Action не имеет конструктора, который будет принимать атрибуты htmlAttributes. Не то же самое, что ActionLink.
barrypicker
2

Я закончил с пользовательским методом расширения. Стоит отметить, что при попытке разместить HTML внутри объекта Anchor текст ссылки может располагаться либо слева, либо справа от внутреннего HTML. По этой причине я решил предоставить параметры для левого и правого внутреннего HTML - текст ссылки находится посередине. И левый, и правый внутренний HTML не обязательны.

Метод расширения 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;
    }

Пример использования:

Вот пример использования. Для этого примера я хотел только внутренний html справа от текста ссылки ...

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

Полученные результаты:

это приводит к следующему HTML ...

<a href="/SomethingOtherThanHome/SomethingOtherThanIndex">Hello World<span class="caret" /></a>
barrypicker
источник
1

Я подумал, что это может быть полезно при использовании начальной загрузки и некоторых глипиконов:

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

Это покажет тег A со ссылкой на контроллер, с красивым значком скрепки для обозначения ссылки на скачивание, а вывод html будет чистым

Терри Кернан
источник
1

Вот супер-расширение ответа @ tvanfosson. Я был вдохновлен этим и решил сделать его более общим.

    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);
        }
    }
уилльям-ребенок
источник
1
Это здорово, что вы были вдохновлены и имеете возможность сделать это. Тем не менее, я смотрю на вложенные операторы foreach и хочу запустить. Это просто не поддерживается большинством разработчиков. Если он установлен в методе расширения типа «черный ящик», то, возможно, все в порядке, но он имеет запах кода. Нелегко на глаза для чего-то, что довольно просто. Спасибо за ваши усилия, хотя.
Том Стиккель
Я очень согласен с вложенными для циклов. Ради краткости это там. С точки зрения оптимизации да, вложенный цикл должен быть в своем собственном закрытом методе, и параметры должны быть утверждены, код должен быть намного более защитным и т. Д.
Уильям-кид
0

Это очень просто.

Если вы хотите, чтобы что-то вроде значка глифика, а затем «Список пожеланий»,

<span class="glyphicon-heart"></span> @Html.ActionLink("Wish List (0)", "Index", "Home")
DanKodi
источник
0

Мое решение с использованием компонентов начальной загрузки:

<a class="btn btn-primary" href="@Url.Action("resetpassword", "Account")">
    <span class="glyphicon glyphicon-user"></span> Reset Password
</a>
Карлос Толедо
источник
0

Пожалуйста, попробуйте ниже кодекс, который может вам помочь.

 @Html.ActionLink(" SignIn", "Login", "Account", routeValues: null, htmlAttributes: new {  id = "loginLink" ,**@class="glyphicon glyphicon-log-in"** }) 
Ahsanul
источник
просто добавьте, @ class, а затем фактический класс css, помогите мне решить мою проблему
Ahsanul