How to include multiple Css Class in ActionLink?

Question

Let's say I have two Css class like below:

     .btn
     {
          border:1px solid yellow;
     }

     .btn-info
     {
          background-color: blue;
     }

and an ActionLink:

     <li>@Html.ActionLink("Home", "Index", "Home", new { @class = "btn btn-info" })</li>

As you can see I included those css class in ActionLink classes but it takes only first one. How should I add second one to ActionLink Css classes.

Generated Html:

     <a class="btn btn-info" href="/"></a>

What version of MVC are you using. I tested this with MVC4 and it works just fine. — Konstantin Dinev
– Konstantin Dinev, Commented Mar 23, 2013 at 15:12
I tried this: @Html.ActionLink("Home", "Index", "Home", new { @class = "one one-two" }) and inspecting the anchor element shows me both classes applied. — Konstantin Dinev
– Konstantin Dinev, Commented Mar 23, 2013 at 15:14
I tried this too,those classes applied but It doesn't show second one styles.I thought something went wrong with my browser then tested in other such as chrome opera IE,but in the end nothing.I can't see the second one styles applied to my anchor. — Saber Amani
– Saber Amani, Commented Mar 23, 2013 at 15:18
Your styles are colliding in some way then. Check that they are not defined for a particular media query only, or that they are overridden with an inline style. — Konstantin Dinev
– Konstantin Dinev, Commented Mar 23, 2013 at 15:29
How it's possible when it's working with Html tags like <input type="button" class="btn btn-info" value="Click This"/>. — Saber Amani
– Saber Amani, Commented Mar 23, 2013 at 16:07

Mike Perrenoud · Accepted Answer · 2013-03-23 15:30:32Z

3

<li>@Html.ActionLink("Home", "Index", "Home", null, new { @class = "btn btn-info" })</li>

The fourth parameter is for the routeValues and the fifth parameter is for htmlAttributes.

edited Mar 23, 2013 at 15:30

answered Mar 23, 2013 at 15:04

Mike Perrenoud

68.1k32 gold badges167 silver badges238 bronze badges

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

8 Comments

Dave Alperovich Over a year ago

isn't this the same as OP?

Mr. Alien Over a year ago

@DaveA No, I see null parameter value here

Mike Perrenoud Over a year ago

@DaveA, not at all, notice I have five parameters.

Mike Perrenoud Over a year ago

@SaberAmani, look at the generated HTML - this is the correct overload.

Saber Amani Over a year ago

It's same as what I Post with different overloading.

|

Matija Grcic · Accepted Answer · 2013-03-23 16:29:45Z

0

The answer by Michael is valid.

I suggest that you

Check the documentation LinkExtensions.ActionLink Method (HtmlHelper, String, String, String, Object, Object)

Browse the source code: LinkExtensions

It's really great to learn from it.

answered Mar 23, 2013 at 16:29

Matija Grcic

13.5k8 gold badges65 silver badges91 bronze badges

Collectives™ on Stack Overflow

How to include multiple Css Class in ActionLink?

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related