Using HTML5 "data-" attributes with MVC3 and Html.ActionLink

Question

So it seems that the non-generic overload of Html.ActionLink() works nicely with HTML5 data- attributes by renaming attributes with underscores into attributes with hyphens:

How to use dashes in HTML-5 data-* attributes in ASP.NET MVC

But, this doesn't seem to work for the strongly-typed Html.ActionLink<TController>().

So, the link for JQuery Mobile

@(Html.ActionLink<HomeController>(
     c => c.Index(), 
     "Home",  
      new { data_direction="reverse" } ))

gives an HTML source of

<a data_direction="reverse" href="/" class="ui-link">Home</a>

which is not what I want.

Any ideas? There's no overload that takes a RouteValueDictionary so that route is out.

score 4 · Accepted Answer · answered Nov 23 '11 at 11:46

So it seems that there's a bug (feature?) in the Microsoft.Web.Mvc extension method on HtmlHelper.ActionLink<TController>. My workaround is:

using System;
using System.Linq.Expressions;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Html;
using System.Web.Routing;
using Authentication;

public static class LinkExtensions
{

    // Named thusly to avoid conflict, I anticipate a search-and-replace later!
    public static MvcHtmlString ActionLink5<TController>(this HtmlHelper helper, Expression<Action<TController>> action, string linkText, object htmlAttributes) where TController : Controller
    {
        RouteValueDictionary routeValuesFromExpression = Microsoft.Web.Mvc.Internal.ExpressionHelper.GetRouteValuesFromExpression<TController>(action);
        return helper.RouteLink(linkText, routeValuesFromExpression, HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
    }
}

which when called with

@(Html.ActionLink5<HomeController>(
    c => c.Index(), 
    "Home",  
    new { data_direction="reverse" } ))

appears to work just fine...

Using HTML5 "data-" attributes with MVC3 and Html.ActionLink

1 Answers1