Question

如何将span元素放在ActionLink中但不包含URL.ACTION？

此：

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

Answer 1

如何将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"
    }
)

Answer 2

我知道这已经过时了，但我使用这种快速而肮脏的方式在我的网格中添加样式化的按钮链接。您可以添加重载以包含路由名称/等。同样。希望这有助于某人。

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

Answer 3

我修改了Darins的答案，以便能够容纳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);
        }

    }

Answer 4

我知道这是一个旧线程，但你也可以按照以下方式进行内联：

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

我知道这是一个黑客行为，但你可以轻松地沿着这些行编写扩展

Answer 5

使用JQuery实现这一目标有多难？

我们总是可以使用JQuery并在加载DOM后附加<span></span>。

可能不是完美的解决方案，但对于使用jquery并且不想编写html帮助程序类的开发人员，如上所述，这可能是解决方法。

Answer 6

我使用Jetbrain's Annotation package修改了markdotnet的答案，以在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);
    }

}

如何将span元素放入ActionLink MVC3中？

6 个答案: