Adding a hyphen to the html attribute name using MVC3 WebGrid helper

Question

I'm having a problem trying to add a custom HTML5 data attribute to the table that is rendered using the WebGrid helper. I want the table tag look as follows:

<table data-test="testdata"><!-- Table Content --></table> 

Here is a sample view using the Razor view engine:

@{     var myUser = new     {         Id = 1,         Name = "Test User"     };      var users = new[] { myUser };      var grid = new WebGrid(users); } @grid.GetHtml(htmlAttributes: new { data-test = "testdata"}) 

The last line will produce a "Invalid anonymous type member declarator." error, because of the hyphen in data-test.

With some of the other input HtmlHelpers, you can use an underscore in place of the hyphen and it will be automatically changed to a hyphen when rendered. This does not happen with the WebGrid.

If I pass in a dictionary for htmlAttributes:

@grid.GetHtml(htmlAttributes: new Dictionary<string, object> {{ "data-test", "testdata"}}) 

the table gets rendered as such:

<table Comparer="System.Collections.Generic.GenericEqualityComparer`1[System.String]" Count="1" Keys="System.Collections.Generic.Dictionary`2+KeyCollection[System.String,System.Object]" Values="System.Collections.Generic.Dictionary`2+ValueCollection[System.String,System.Object]"><!-- Table Content --></table> 

What am I doing wrong and what should I do render the attribute as desired?

Answer 1

I am afraid that this is not possible. Unfortunately the WebGrid it doesn't support the same syntax as standard HTML helper such as TextBoxFor where you could:

@Html.TextBoxFor(x => x.SomeProp, new { data_test = "testdata" }) 

and the underscore would be automatically converted to dash.