4

I've heard from a couple of different sources that when using HTML helpers in ASP.NET MVC2, one can create custom attributes with dashes in them (e.g. <a data-rowId="5">) by using an underscore in place of the dash, and when the HTML is written to the page the underscores will be replaced by dashes.

So, something like this:

<%= HtmlActionLink(Model.Name, "MyView", null, new {data_rowId = Model.id}) %>

should render as

<a data-rowId="0" href="myURL">Row Name</a>

But... it's not. I think that maybe this feature is only enabled in the MVC3 Beta preview (as it's mentioned in the MVC3 preview release notes), but this thread is about the same thing, and it's regarding MVC2.

I know I can use the other solution presented in that thread, but I'd rather not have to resort to using the dictionary if a more elegant solution exists.

Anyone know if there's something simple I can do to get this particular thing working?

Community
  • 1
  • 1
Isochronous
  • 1,076
  • 10
  • 25

3 Answers3

4

Not exactly the most elegant solution but probably acceptable:

<%= Html.ActionLink(
    Model.Name, 
    "MyView", 
    null, 
    new Dictionary<string, string> { { "data-rowId",  Model.id } }
) %>

On a side note: data-rowId is a totally invalid attribute in HTML according to standard doctypes so maybe the most elegant solution would be to get rid of it :-)

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • 2
    The Data- attribute is valid for HTML 5. http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible-data – Erik Philips Nov 20 '10 at 20:33
  • @Erik Philips, HTML5 is still a draft and not supported by all browsers, but good point. – Darin Dimitrov Nov 20 '10 at 20:35
  • I wish this wasn't the answer, but can't find a better approach. I thought I saw somewhere that underscores were promoted to dashes... oh well! – Jafin Jul 27 '11 at 06:32
4

System.Web.Mvc.HtmlHelper provides a static method that does what you're looking for:

<%= Html.ActionLink(
    Model.Name, 
    "MyView", 
    null, 
    HtmlHelper.AnonymousObjectToHtmlAttributes(new { data_row_id: Model.id })
) %>

This method will will substitute underscores with hyphens - as somebody pointed out though, be sure to use all-lowercase attribute names, which are HTML5-compliant.

mindplay.dk
  • 7,085
  • 3
  • 44
  • 54
0

Consider what ASP.NET MVC is designed to do. It is designed to give you tight control over the HTML that you produce. If something is not accessible, you won't have to jump through hoops to fix it. What you are trying to do is create invalid HTML, or XHTML. Instead of trying to make HTML that is invalid simplify to just using an ID. #1 on the accessibility guidelines is that the HTML is valid for the declared type.

As long as the ID is unique within the document you will have satisfied HTML conformance--and it will make it much easier to manipulate with jQuery.

If I may, why are you trying to create invalid HTML? Or is this a proprietary XML format?

BTW, MVC 3 RC came out today.

Edit:

Playing with HTML5 features, while "shiny" and kool, are unstable. Many parts of the specification are changing as often as weekly. What is considered good now may not be good when the final spec is released. MVC 3 does have some things that will make your job more friendly, for now you have to use a dictionary.

Berin Loritsch
  • 11,400
  • 4
  • 30
  • 57
  • We're using the new HTML5 doctype, which permits custom data attributes on any html element, as long as the format is "data-whatever." It's totally valid HTML. http://html5doctor.com/html5-custom-data-attributes/ – Isochronous Nov 10 '10 at 15:29
  • Two things to consider: "id" is more appropriate than data-rowId, and the attribute is still invalid (no capital letters according to the spec). Instead, it should be "data-row-id". The dictionary method is the only available method in MVC 2 to do what you want. – Berin Loritsch Nov 10 '10 at 15:39
  • I can't use "id" because there may be two different lists on the page, each with different sets of data, and there may be a row in one list that has the same id as a row in the second list. I'm aware the HTML5 specification is hardly finalized, but the custom data attributes seem to be a pretty stable part of the spec. Also, the decision to use HTML5 came from my department head, so I'm not going to tell him he's trying to be "shiny" and "kool." I'd prefer answers with a little less condescension, but thanks anyway. – Isochronous Nov 10 '10 at 16:00
  • The words "Shiny" and "Kool" actually came from a Microsoft Firestarter event I just attended. You can blame them for the words. Nevertheless, make sure you are implementing the spec correctly (i.e. using "data-row-id"). While you are at it, you may want to look at the jQuery plugin to get proper dataset support: http://plugins.jquery.com/project/html5-dataset – Berin Loritsch Nov 10 '10 at 17:37
  • RE: id management. You can scope Ids so they are unique to the page. For example using the pattern "scope_id" would yield "product_2" and "category_2" for similarly identified objects. – Berin Loritsch Nov 10 '10 at 17:40
  • HTML 5 "Final Specification" release date is curently in the year 2022. Consider most browers are mostly HTMl5 ready (http://test.w3.org/html/tests/reporting/report.htm) I don't see a reason not to use the feature OTHER than supporting very old browsers. But that is of course requirements and not an opinion. – Erik Philips Nov 20 '10 at 20:37
  • Using arbitrary attributes may not be standard, but it's supported by all browsers in even remotely common usage, and is guaranteed part of the next standard. It's not going anywhere. – Mud Mar 27 '11 at 06:13
  • Do consider the age of the answer. 2010 was a bit early for that. – Berin Loritsch Aug 16 '14 at 11:54