Как разместить элемент span внутри ActionLink MVC3? - PullRequest
Новая
       10

Как разместить элемент span внутри ActionLink MVC3?

7 голосов
/ 15 декабря 2011

Как поместить элемент span внутри ActionLink, НО НЕ С URL.ACTION?

This: 

 <li><span>
     @Ajax.ActionLink("LinkText", "ControllerName", new AjaxOptions
                 {
                     UpdateTargetId = "div",
                     InsertionMode = InsertionMode.Replace,
                     HttpMethod = "GET",
                     LoadingElementId = "progress"

                 })
 </span></li>

создает это: 

<li>
<span>
<a href="/Home/ControllerName" data-ajax-update="#scroll" 
 data-ajax-mode="replace" data-ajax-method="GET" 
 data-ajax-loading="#progress" data-ajax="true">LinkText</a>
</span>
</li>

Но мне нужно что-то еще.Как я могу создать собственный метод MVC3 ActionLink, который генерирует этот вывод: 

<li>
    <a href="/Home/ControllerName" data-ajax-update="#scroll" 
     data-ajax-mode="replace" data-ajax-method="GET" 
     data-ajax-loading="#progress" data-ajax="true">

     <span>LinkText</span> // this span generated inside <a>

    </a>
</li>

Ответы [ 6 ]

8 голосов
/ 15 декабря 2011

Как поместить элемент span внутри ActionLink, НО НЕ С URL.ACTION

Простой ответ: вы не можете.Метод ActionLink HTML кодирует текст ссылки, и вы ничего не можете с этим поделать (вы можете открыть заявку в Microsoft, чтобы они обеспечивали перегрузку, которая позволяет вам делать это в ASP.NET MVC vNext).

На данный момент вы можете написать собственный помощник HTML, который не будет кодировать: 

public static class AjaxExtensions
{
    public static IHtmlString MyActionLink(
        this AjaxHelper ajaxHelper,
        string linkText,
        string actionName,
        AjaxOptions ajaxOptions
    )
    {
        var targetUrl = UrlHelper.GenerateUrl(null, actionName, null, null, ajaxHelper.RouteCollection, ajaxHelper.ViewContext.RequestContext, true);
        return MvcHtmlString.Create(ajaxHelper.GenerateLink(linkText, targetUrl, ajaxOptions ?? new AjaxOptions(), null));
    }

    private static string GenerateLink(
        this AjaxHelper ajaxHelper, 
        string linkText, 
        string targetUrl, 
        AjaxOptions ajaxOptions, 
        IDictionary<string, object> htmlAttributes
    )
    {
        var a = new TagBuilder("a")
        {
            InnerHtml = linkText
        };
        a.MergeAttributes<string, object>(htmlAttributes);
        a.MergeAttribute("href", targetUrl);
        a.MergeAttributes<string, object>(ajaxOptions.ToUnobtrusiveHtmlAttributes());
        return a.ToString(TagRenderMode.Normal);
    }
}

, а затем: 

@Ajax.MyActionLink(
    "<span>LinkText</span>", 
    "ActionName", 
    new AjaxOptions {
        UpdateTargetId = "div",
        InsertionMode = InsertionMode.Replace,
        HttpMethod = "GET",
        LoadingElementId = "progress"
    }
)
2 голосов
/ 21 мая 2014

Я немного изменил ответ Дарина, чтобы учесть значения RouteValues. 


    public static class AjaxExtensions
    {
        public static IHtmlString MyActionLink(
            this AjaxHelper ajaxHelper,
            string linkText,
            string actionName,
            AjaxOptions ajaxOptions
        )
        {
            var targetUrl = UrlHelper.GenerateUrl(null, actionName, null, null, ajaxHelper.RouteCollection, ajaxHelper.ViewContext.RequestContext, true);
            return MvcHtmlString.Create(ajaxHelper.GenerateLink(linkText, targetUrl, ajaxOptions ?? new AjaxOptions(), null));
        }

        public static IHtmlString MyActionLink(
            this AjaxHelper ajaxHelper,
            string linkText,
            string actionName,
            object routeValues,
            AjaxOptions ajaxOptions
        )
        {
            System.Web.Routing.RouteValueDictionary routeVals = new System.Web.Routing.RouteValueDictionary(routeValues);

            var targetUrl = UrlHelper.GenerateUrl(null, actionName, null, routeVals, ajaxHelper.RouteCollection, ajaxHelper.ViewContext.RequestContext, true);
            return MvcHtmlString.Create(ajaxHelper.GenerateLink(linkText, targetUrl, ajaxOptions ?? new AjaxOptions(), null));
        }


        private static string GenerateLink(
            this AjaxHelper ajaxHelper,
            string linkText,
            string targetUrl,
            AjaxOptions ajaxOptions,
            IDictionary htmlAttributes
        )
        {
            var a = new TagBuilder("a")
            {
                InnerHtml = linkText
            };
            a.MergeAttributes(htmlAttributes);
            a.MergeAttribute("href", targetUrl);
            a.MergeAttributes(ajaxOptions.ToUnobtrusiveHtmlAttributes());
            return a.ToString(TagRenderMode.Normal);
        }

    }
2 голосов
/ 08 марта 2013

Я знаю, что это старый, но я использую этот быстрый и грязный способ для добавления стилизованных ссылок кнопок в мои сетки. Вы можете добавить перегрузки, чтобы включить имена маршрутов / и т.д. также. Надеюсь, это кому-нибудь поможет. 

public static MvcHtmlString GridAnchor(this HtmlHelper html, string linkText, string actionName, string controllerName, 
            object routeValues, object htmlAttributes)
        {
            var result = new TagBuilder("a");
            var url = UrlHelper.GenerateUrl(null, actionName, controllerName, new RouteValueDictionary(routeValues), html.RouteCollection,
                                            html.ViewContext.RequestContext, true);
            result.Attributes.Add("href", url);
            result.MergeAttributes(new RouteValueDictionary(htmlAttributes));
            result.InnerHtml = "<span>" + linkText + "</span>";

            return MvcHtmlString.Create(result.ToString());
        }
1 голос
/ 23 февраля 2015

Я знаю, что это старая ветка, но вы также можете сделать что-то встроенное в соответствии с: 

<li><span>
@{
    var lnk = Ajax.ActionLink("LinkText", "ControllerName", new AjaxOptions {
                 UpdateTargetId = "div",
                 InsertionMode = InsertionMode.Replace,
                 HttpMethod = "GET",
                 LoadingElementId = "progress"
             });
@Html.Raw(lnk.ToString().Replace(">LinkText<", "><span>LinkText</span><")); 
// Remember to include the open and closing >< !
}
</span></li>

Это хак, я знаю, но вы можете легко написать расширение по этим направлениям

0 голосов
/ 30 июля 2018

Я изменил ответ markdotnet, используя Пакет аннотаций Jetbrain , чтобы обеспечить intellisense для параметра actionName. Я также изменил параметр linkText, чтобы улучшить визуализацию кода; VS будет воспринимать это как HTML-код, а не просто как строку.

Пример: 

@Ajax.MyActionLink(
@<div>
    <span>Click me</span>
</div>,
"MyAction",
new { Id = 1 },
new AjaxOptions
{
    UpdateTargetId = "targed-id",
    OnComplete = "oncomplete();"
})

Дополнительный класс: 

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
using System.Web.WebPages;
using JetBrains.Annotations;

public static class AjaxExtensions
{
    public static IHtmlString MyActionLink(
        this AjaxHelper ajaxHelper,
        Func<dynamic, HelperResult> linkHtml,
        [AspMvcAction] string actionName,
        AjaxOptions ajaxOptions
    )
    {
        var targetUrl = UrlHelper.GenerateUrl(null, actionName, null, null, ajaxHelper.RouteCollection, ajaxHelper.ViewContext.RequestContext, true);
        return MvcHtmlString.Create(ajaxHelper.GenerateLink(linkHtml, targetUrl, ajaxOptions ?? new AjaxOptions(), null));
    }

    public static IHtmlString MyActionLink(
        this AjaxHelper ajaxHelper,
        Func<dynamic, HelperResult> linkHtml,
        [AspMvcAction] string actionName,
        object routeValues,
        AjaxOptions ajaxOptions
    )
    {
        System.Web.Routing.RouteValueDictionary routeVals = new System.Web.Routing.RouteValueDictionary(routeValues);

        var targetUrl = UrlHelper.GenerateUrl(null, actionName, null, routeVals, ajaxHelper.RouteCollection, ajaxHelper.ViewContext.RequestContext, true);
        return MvcHtmlString.Create(ajaxHelper.GenerateLink(linkHtml, targetUrl, ajaxOptions ?? new AjaxOptions(), null));
    }


    private static string GenerateLink(
        this AjaxHelper ajaxHelper,
        Func<dynamic, HelperResult> linkHtml,
        string targetUrl,
        AjaxOptions ajaxOptions,
        IDictionary<string, object> htmlAttributes
    )
    {
        var a = new TagBuilder("a")
        {
            InnerHtml = linkHtml(null).ToString()
        };
        a.MergeAttributes(htmlAttributes);
        a.MergeAttribute("href", targetUrl);
        a.MergeAttributes(ajaxOptions.ToUnobtrusiveHtmlAttributes());
        return a.ToString(TagRenderMode.Normal);
    }

}
0 голосов
/ 25 сентября 2014

Насколько сложно добиться этого с помощью JQuery?

Мы всегда можем использовать JQuery и добавлять <span></span> после загрузки DOM.

Может быть не идеальным решением, но для разработчиков, использующих jquery, и не желающих писать классы помощников HTML, как указано выше, ответ может быть обходным

...