How to put span element inside ActionLink MVC3?

Question

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

This:

 <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 can I create a custom 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

Simple answer: you can't. The ActionLink method HTML encodes the link text and there's not much you could do about it (you could open a ticket at Microsoft so that they provide an overload that allows you to do this in ASP.NET MVC vNext).

At the moment you could write a custom html helper that won't encode:

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 for adding styled button links in my grids. You could add overloads to include route names/etc. as well. 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 answer just a bit to be able to accomodate 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

I know this is an old thread, but you can also do something inline along the lines of:

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

Its a hack I know, but you could easily write an extension along these lines