Actionlink with both routevalues and htmlattributes - what am I doing wrong?

Question

I am trying to both have some route values and html attributes on my ActionLink.

So, I have the following code. The first three parameters is text, action name and controller. Then I add the route values, and then I try to add the HTML attributes.

@Html.ActionLink("What is this", "Pages", "Root", new { @slug = "what-is-this" },new{@class="dropdown-toggle", @data-toggle="dropdown"})

When I run the website I get an error message saying the view with this actionlink, it gives the External component has thrown an exception.

So, I guess my question is: How to add html attributes to this action link? What am I doing wrong?

Answer 1

You cannot use @data-toogle, but rather you need to use an underscore. So you link should be like this:

@Html.ActionLink("What is this", "Pages", "Root", new { slug = "what-is-this" },new{@class="dropdown-toggle", data_toggle="dropdown"})

The rest will be done by MVC and your data_toggle will be converted to data-toggle. Also, there is no need to use @ with every item. You use it only when you use reserved C# keywords like class.

Answer 2

The problem is in @data-toggle.

You cannot have a dash in the name. If you need the "-" rendered on the client, you can use the "_" and MVC will render the "-"

@Html.ActionLink("What is this", "Pages", "Root", new { @slug = "what-is-this" },new{@class="dropdown-toggle", @data_toggle="dropdown"})