How to add an HTML5 data-something attribute in Razor

Question

I am trying to generate a table like this

@foreach (var item in @Model.Where(o => o.Status == "Submitted")){
    <tr class="row" data_orderid="@item.Id">
     <td class="description">
        @item.Customer
     </td>
     <td class="description">
        @item.OrderDescription
     </td>
     ...etc...etc

so that I can handle the click event of each tr, and display some info based on the data-orderid attribute value of the tr that was clicked.

In Visual Studio I get a validation message saying "data_orderid is not a valid attribute of tr" and when it renders the HTML tr has no attributes, Not event the class.

How should I be adding attributes like this?

To make VS 2010 validate the HTML as HTML5 Tools > Options > Text Editor > HTML > Validation and change Target to HTML5. — Jive Boogie
– Jive Boogie, Commented Jul 23, 2012 at 14:31

Shyju · Accepted Answer · 2012-07-23 14:01:02Z

3

The format of HTML 5 data attribute is like this

data-AttributeName=AttributeValue

Example :

data-name="John Resig"

Change underscore to a hiphen and it will be rendered correctly.

 <tr class="row" data-orderid="@item.Id">

edited Jul 23, 2012 at 14:01

answered Jul 23, 2012 at 13:54

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shane Courtrille Over a year ago

Actually in ASP.Net MVC Razor 3+ you have to use _ to get a - out at the end. So that should be data_orderid="@item.Id" but when he gets it later he should be using a - instead. devcurry.com/2011/04/…

Shyju Over a year ago

@ShaneCourtrille : HTML Helper methods does so. He is writing pure HTML by hand.

Jive Boogie Over a year ago

Thanks for the clarification as to when I can use data- and when I need to use data_. I was stupidly editing the wrong file so there is no real answer to my question except "don't be stupid". Should I delete the question or leave it here as I think the comments provide some value?

ITmeze · Accepted Answer · 2012-07-23 14:06:13Z

0

First of all it is more likely that you should be using "data-xxx" (rather than "data_xxx") attributes.

Secondly, It is unlikely (if not imposible) for visual studio to omit class and your "data_orderid" attributes.

Make sure that for loop gets any elements from your condition @Model.Where(o => o.Status == "Submitted"

Additionally, as a note, Razor is smart enough to interpret 'html attributes' passed to elements, like here:

@Html.TextBoxFor(m => m.Name, new { @data_orderid = item.id, @class="input-xxlarge" }))

edited Jul 23, 2012 at 14:06

answered Jul 23, 2012 at 13:58

ITmeze

1,9222 gold badges22 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to add an HTML5 data-something attribute in Razor

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related