How do I add a class to an @Html.ActionLink?

Question

I have two @Html.ActionLink's that I want to make look like buttons. I'm able to make this happen with CSS but only if I use the #ID of the actionlink to apply the CSS. I want to assign a class to the action links but when I do using the code below I get an error saying I have a missing "}".

 @Html.ActionLink("Print PO", "PoReport", new { id = 51970}, 
                 new { id = "PoPrint"} , new { class = "PoClass"})

Here is the Style I am applying:

<style>
 #PoPrint 
{
 border: 4px outset;
 padding: 2px;
 text-decoration: none;
 background-color:lightskyblue;
}
</style>

This works and I suppose I could just add the other #ID to tthe style but would like to apply the style to the Class.

Possible duplicate http://stackoverflow.com/questions/5608622/asp-net-mvc-add-css-class-to-actionlink AND http://stackoverflow.com/questions/1444495/how-do-i-apply-a-css-class-to-html-actionlink-in-asp-net-mvc — Charaf JRA, Sep 05 '13 at 18:32
@FaceOfJock, I looked at both of those posts and tried applying the solutions but was not successful. — Alan Fisher, Sep 05 '13 at 18:45
if all proposed solution haven't work,you can use javascript as solution,you select your element by id and then add your class — Charaf JRA, Sep 05 '13 at 18:47

score 79 · Accepted Answer · edited Oct 15 '14 at 09:04

79

You have to use the @ character, since class is a keyword in C#. Here's a link to the MSDN documentation: http://msdn.microsoft.com/en-us/library/dd492124(v=vs.108).aspx

@Html.ActionLink("Link Text", "ActionName", 
         new { controller = "MyController", id = 1 }, 
         new { @class = "my-class" })

edited Oct 15 '14 at 09:04

Liam

27,717
28
128
190

answered Sep 05 '13 at 18:34

Jarrett Meyer

19,333
6
58
52

what if i want a class and an id? because the id in your answer is probably a parameter right? – Djeroen Oct 27 '15 at 20:01
1

okay i allready found the answer: `new { @class = "my-class", id=4 }` – Djeroen Oct 27 '15 at 20:04
This worked for me, but I hate having to do this. It's so much more work than just using good ole `click`. – Callat Nov 02 '17 at 19:37

chris.house.00 · Answer 2 · 2013-09-05T18:52:50.110

7

The problem is that class is a reserved word in C#. You can specify that you want to use the name 'class' as your attribute name by escaping it with the @ symbol like so:

 @Html.ActionLink("Print PO", "PoReport", new { id = 51970}, new { id = "PoPrint", @class = "PoClass"})

edited Sep 05 '13 at 18:52

answered Sep 05 '13 at 18:32

chris.house.00

3,273
1
27
36

1

Isn't that one too many arguments to Html.ActionLink? Shouldn't the `@class` be combined with `id` in the previous object? – jmoerdyk Sep 05 '13 at 18:43
@chris.house, I had tried that solution (from the possible duplicate posts mentioned above) but got this error: CS1928: 'System.Web.Mvc.HtmlHelper' does not contain a definition for 'ActionLink' and the best extension method overload 'System.Web.Mvc.Html.LinkExtensions.ActionLink(System.Web.Mvc.HtmlHelper, string, string, string, object, object)' has some invalid arguments – Alan Fisher Sep 05 '13 at 18:47
@AlanFisher - try `@Html.ActionLink("Print PO", "PoReport", new { id = 51970}, new { id = "PoPrint", @class = "PoClass"})` – jmoerdyk Sep 05 '13 at 18:48
As jmoerdyk pointed out, I believe your arguments are incorrect. I'm not sure what you're trying to pass in the first and second anonymous types (id = 51970 and id = PoPrint). If you're trying to set the id of your link to PoPrint then you should just have one anonymous at the end like this: new {id = "PoPrint", @class = "PoClass"} – chris.house.00 Sep 05 '13 at 18:52

score 4 · Answer 3 · answered Feb 12 '19 at 16:29

4

You have to indicate the action name, controller and url parameters (null in this example)

@Html.ActionLink("Link Name", 
"ActionName",
"ControllerName",
null,
new { @class = "your css class" }
)

answered Feb 12 '19 at 16:29

Badr Bellaj

11,560
2
43
44

score 1 · Answer 4 · answered Sep 05 '13 at 18:32

1

Do this new { @class = "PoClass"} You need the @ for keywords like class

answered Sep 05 '13 at 18:32

TGH

38,769
12
102
135

score 0 · Answer 5 · answered Apr 16 '20 at 05:38

0

It worked when i use null

@Html.ActionLink("Add User", "Create",null, new { @class = "btn btn-primary" })

"Add User" is Button Text

"Create" is actionName

null

new { @class = "btn btn-primary" } CSS used bootstrap class

answered Apr 16 '20 at 05:38

subramanya46

451
6
9

How do I add a class to an @Html.ActionLink?

5 Answers5

Linked

Related