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

【问题标题】：How to put span element inside ActionLink MVC3?如何将 span 元素放入 ActionLink MVC3 中？
【发布时间】：2012-01-21 00:46:04
【问题描述】：

如何将 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>

【问题讨论】：

stackoverflow.com/questions/3470622/…

标签： c# asp.net .net asp.net-mvc-3 razor

【解决方案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"
    }
)

【讨论】：

你能提供这个自定义助手的例子吗？
呃，由于 IT 需求，我不得不将我的 Asp.Net Core 站点更改为 Asp.Net Framework。前段时间有朋友告诉我，ASP 网站的设计很糟糕，但我告诉他最终都会吐出 HTML，所以什么都可以做，等等。好吧，我被标签助手宠坏了。回到Framework，我明白他为什么是正确的：正是这种实现，他们只允许你输入链接文本，这使得asp网站看起来像一座苏联时代的公寓楼。

【解决方案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());
        }

【讨论】：

【解决方案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);
        }

    }

【讨论】：

【解决方案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>

我知道这是一个 hack，但是你可以很容易地按照这些思路编写一个扩展

【讨论】：

【解决方案5】：

使用 JQuery 实现这一点有多难？

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

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

【讨论】：

【解决方案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);
    }

}

【讨论】：