2011-12-15 75 views
7

如何将一个span元素放在ActionLink中而不是使用URL.ACTION?如何将span元素放入ActionLink MVC3中?

此:

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

http://stackoverflow.com/questions/3470622/wrapping-an-element-with-html-actionlink – Ali 2016-04-07 09:20:57

回答

8

如何把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" 
    } 
) 
+1

你能提供这个自定义助手的例子吗? – 2011-12-15 10:04:29

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

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

    } 
 
0

通过使用JQuery来实现这个有多困难?

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

可能不是完美的解决方案,但对于使用jquery的开发人员而言,并不想像上面那样编写html helpers类,可以回答这个问题。

1

我知道这是一个古老的线程,但你也可以做一些在线沿着线:

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

它,我知道一个黑客,但你可以很容易地编写沿着这些线路的延伸