ActionLink htmlAttributes with hyphens

Question

This works

<a href="@Url.Action("edit", "markets", new { id = 1 })" 
            data-rel="dialog" data-transition="pop" data-icon="gear" class="ui-btn-right">Edit</a>

But this doesn't. Why?

@Html.ActionLink("Edit", "edit", "markets", new { id = 1 }, new {@class="ui-btn-right", data-icon="gear"})

It seems you can't pass something like data-icon="gear" into htmlAttributes?

Suggestions?

score 207 · Accepted Answer · answered Nov 05 '10 at 22:35

207

The problem is that your anonymous object property data-icon has an invalid name. C# properties cannot have dashes in their names. There are two ways you can get around that:

Use an underscore instead of dash (MVC will automatically replace the underscore with a dash in the emitted HTML):

@Html.ActionLink("Edit", "edit", "markets",
      new { id = 1 },
      new {@class="ui-btn-right", data_icon="gear"})

Use the overload that takes in a dictionary:

@Html.ActionLink("Edit", "edit", "markets",
      new { id = 1 },
      new Dictionary<string, object> { { "class", "ui-btn-right" }, { "data-icon", "gear" } });

answered Nov 05 '10 at 22:35

marcind

52,944
13
125
111

2

The underscore does not seem to work with `Ajax.ActionLink` helpers – Dmitry Efimenko Nov 16 '12 at 23:22
1

The underscore trick sounds really strange, what if you want an underscore in your html attribute? – Michiel Oct 16 '13 at 20:51
1

@MichielReyers you could use the overload that takes in the Dictionary – marcind Oct 16 '13 at 22:33
1

.net Core Tag Helpers destroy all these problems - hi from the future. – niico Jun 15 '17 at 01:01

score 27 · Answer 2 · answered Dec 22 '11 at 06:50

Replace the desired hyphen with an underscore; it will automatically be rendered as a hyphen:

@Html.ActionLink("Edit", "edit", "markets",
    new { id = 1 },
    new {@class="ui-btn-right", data_icon="gear"})

becomes:

<form action="markets/Edit/1" class="ui-btn-right" data-icon="gear" .../>

score -6 · Answer 3 · edited Aug 18 '16 at 07:39

-6

@Html.ActionLink("display name", "action", "Contorller"
    new { id = 1 },Html Attribute=new {Attribute1="value"})

edited Aug 18 '16 at 07:39

teo van kot

12,350
10
38
70

answered Aug 18 '16 at 07:12

amirhossein fallahmanesh

1

ActionLink htmlAttributes with hyphens

3 Answers3

Linked