ASP.NET MVC3 Razor - Html.ActionLink style

Question

I'm trying to set the style of an action link like so:

  <text><p>Signed in as @Html.ActionLink(Context.User.Identity.Name,"Index",new { Controller="Account", @style="text-transform:capitalize;" })</p>

I'd expect this to be rendered as

<p>Signed in as <a href="Index" style="text-transform:capitalize;">MyName</a></p>

However, what's generated is

<p>Signed in as <a href="/Account?style=text-transform%3Acapitalize%3B">MyName</a></p>

with the style appended to the url instead. What am I doing wrong?

Daniel A. White · Accepted Answer · 2011-01-03 20:37:11Z

102

Here's the signature.

public static string ActionLink(this HtmlHelper htmlHelper, 
                                string linkText,
                                string actionName,
                                string controllerName,
                                object values, 
                                object htmlAttributes)

What you are doing is mixing the values and the htmlAttributes together. values are for URL routing.

You might want to do this.

@Html.ActionLink(Context.User.Identity.Name, "Index", "Account", null, 
     new { @style="text-transform:capitalize;" });

edited Jan 3, 2011 at 20:37

answered Jan 3, 2011 at 20:31

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

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

4 Comments

gidmanma Over a year ago

I'm glad you didn't.. I found this answer useful.

Lauri Over a year ago

I must note, that this solution works even if i omit the Context.User.Identity.Name How would you explain the reason for this working to someone who has Java background?

Daniel A. White Over a year ago

@Lauri its just a function call but with a C# concept called an extension method.

niico Over a year ago

note - style doesn't require the @ - that just escapes reserved words like class in C#

Ed DeGagne · Accepted Answer · 2011-02-25 06:56:52Z

8

VB sample:

 @Html.ActionLink("Home", "Index", Nothing, New With {.style = "font-weight:bold;", .class = "someClass"})

Sample Css:

.someClass
{
    color: Green !important;
}

In my case, I found that I need the !important attribute to over ride the site.css a:link css class

answered Feb 25, 2011 at 6:56

Ed DeGagne

3,2691 gold badge32 silver badges46 bronze badges

2 Comments

Dan VanWinkle Over a year ago

You probably wouldn't nee the !important attribute if you just move the .someClass line below your a:link line in your site.css. You could also add it to your style attribute to override it. Generally, the browser applies the lowest item in the CSS file, then applies the style attribute. The least important stuff in the CSS file should be at the top, the most important should be at the bottom.

Ed DeGagne Over a year ago

In this case, not true. There is a default css file, and then a site specific css file (not my architecture). In this specific case, the !important attribute is necessary. I agree with your assessment though.

Trevor · Accepted Answer · 2016-12-04 22:22:14Z

4

Reviving an old question because it seems to appear at the top of search results.

I wanted to retain transition effects while still being able to style the actionlink so I came up with this solution.

I wrapped the action link with a div that would contain the parent style:

<div class="parent-style-one">
      @Html.ActionLink("Homepage", "Home", "Home")
</div>

Next I create the CSS for the div, this will be the parent css and will be inherited by the child elements such as the action link.

  .parent-style-one {
     /* your styles here */
  }

Because all an action link is, is an element when broken down as html so you just need to target that element in your css selection:

  .parent-style-one a {
     text-decoration: none;
  }

For transition effects I did this:

  .parent-style-one a:hover {
        text-decoration: underline;
        -webkit-transition-duration: 1.1s; /* Safari */
        transition-duration: 1.1s;         
  }

This way I only target the child elements of the div in this case the action link and still be able to apply transition effects.

answered Dec 4, 2016 at 22:22

Trevor

1,6141 gold badge21 silver badges29 bronze badges

1 Comment

Patrick Over a year ago

Step 3: "Because all an action link is, is an element when broken down as html so you just need to target that element in your css selection" BINGO.... that was what I needed to read to make my life infinitely better. Thank you.

Abdullah · Accepted Answer · 2022-03-20 08:40:20Z

0

In my case I used it with h tag :

<h1 style="color:red;text-align:center">
    @Html.ActionLink("Create New", "Create")
</h1>

answered Mar 20, 2022 at 8:40

Abdullah

1,12316 silver badges31 bronze badges

Comments

Ragab Mohamad · Accepted Answer · 2022-10-17 14:54:46Z

0

Parameters

 @Html.ActionLink("Update","CreateOrUpdate",new {Id=category.Id},new { @class = "btn btn-primary" })

without Parameters

@Html.ActionLink("Back","Index",new {},new {@class="btn btn-danger"});

edited Oct 17, 2022 at 14:54

answered Oct 17, 2022 at 14:40

Ragab Mohamad

7375 silver badges6 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC3 Razor - Html.ActionLink style

5 Answers 5

4 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related