如何把span元素在ActionLink MVC3

本文关键字:ActionLink MVC3 元素 span | 更新日期: 2023-09-27 18:18:00

我怎么能把一个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>

如何把span元素在ActionLink MVC3

如何在ActionLink中放置span元素而不是URL。行动

简单的回答:你不能。ActionLink方法HTML对链接文本进行编码,对此你无能为力(你可以在微软开一个罚单,让他们提供一个重载,让你在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"
    }
)

我知道这是旧的,但我使用这种快速和肮脏的方式来添加样式按钮链接在我的网格。你可以添加重载来包含路由名等。也希望对大家有所帮助。

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

我稍微修改了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); } }

我知道这是一个旧线程,但你也可以做一些内联的行:

<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,但是你可以很容易地沿着这些行写一个扩展

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

我们总是可以使用JQuery和附加<span></span>一旦DOM加载。

可能不是完美的解决方案,但对于开发人员使用jquery和不想写html的帮助类如上答案,这可能是周围的工作

我使用Jetbrain的Annotation包修改了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);
    }
}