'ASP.NET MVC3 Razor - Html.ActionLink style

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?

cssasp.net-mvc-3razor


Solution 1:[1]

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;" });

Solution 2:[2]

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

Solution 3:[3]

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.

  1. 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>
  1. 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 */
  }
  1. 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;
  }
  1. 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.

Solution 4:[4]

In my case I used it with h tag :

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Ed DeGagne
Solution 3 Trevor
Solution 4 Abdullah

Related Questions