How to set span element inside ActionLink MVC3?

Question

How can I put a span element inside an ActionLink BUT NOT WITH URL.ACTION?

It:

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

generates this:

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

---

But I need something else. How to create your own MVC3 ActionLink method that generates this output:

 <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

How to put span element inside ActionLink but not with URL.ACTION

The simple answer is: you cannot. The ActionLink HTML method encodes the link text, and you can’t help it (you can open a ticket in Microsoft to provide overload, which allows you to do this in ASP.NET MVC vNext).

At the moment, you can write a special html helper that will not be encoded:

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

and then:

 @Ajax.MyActionLink( "<span>LinkText</span>", "ActionName", new AjaxOptions { UpdateTargetId = "div", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", LoadingElementId = "progress" } ) 

Answer 2

I know this is old, but I use this quick and dirty way to add stylized button links in my grids. You can add overloads to include route names / etc. also. Hope this helps someone.

 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

I modified Darins a bit to be able to host 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); } }
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

I know this is an old thread, but you can also do something inline by line:

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

I know to hack it, but you can easily write an extension along these lines

Answer 5

How hard is it to achieve this using jQuery?

We can always use JQuery and add <span></span> after loading the DOM.

This may not be the ideal solution, but for developers using jquery and don't want to write head-helper classes as mentioned above, this can be a problem.