Add styling to all @Html.ActionLink from css class

Question

I know I am able to add a class to a @Html.Actionlink by using, which acts on a single Actionlink at a time:

@Html.ActionLink("Add", 
                 "UpdateNote", 
                 "Notes", 
                 new { id = 0, type = (int)THOS.Utilities.Enumerations.Enumerations.Note.RelatedApplicationType.Law, appid = ((ObjectModelLibrary.Law)ViewData["currentLaw"]).LawID, baseappid = ((ObjectModelLibrary.Law)ViewData["currentLaw"]).LawID }
                 new { @class = "btn btn-primary icon-edit"},
                 null)

However,

Is there a way of defining a class (much like adding a style to all divs in the css file like:

div{
color: red;
}

^ ^
| |
this way will act on *all* divs

instead of going

 <div class="myClass"></div>

I can just write:

<div></div>

which will automatically have color:red included

would there be a way of defining a class for an ActionLink without going to each actionlink and typing @Class="myClass"

For Example

for adding styling for all button instances:

input[type="button"]{

background-color:red;
}

Can i do this with something like:

input[type="actionlink"]{

//styles for all actionlinks in project
}

and so all actionlinks can be written as:

@Html.ActionLink("Action","Controller")

and automatically include the styling stated in my css file?

I would do this the first way, but i've already ~100 made without defining a class, and don't fancy copy and pasting:

class="myClass"

Have you tried it? It should work just fine. A `tagname` is a valid `CSS` selector. — emerson.marini, Oct 10 '14 at 13:26
@MelanciaUK, sorry for my bad explanation. Yes, the first option works. However, it means i have to go through *every* actionlink within my project and adding the styling to *each* one seperately. — , Oct 10 '14 at 13:31
Why? If all of them are an `a` tag, `a { color: red; }` would match them all. You don't need to do a single thing in the `Razor` template. — emerson.marini, Oct 10 '14 at 13:33
I think I got your point now. You want `Razor` to add some kind of _attribute_ to the `anchors` generated by `@Html.ActionLink` to make them _different_ from regular `anchors`. — emerson.marini, Oct 10 '14 at 13:37
You got your answer here: [How do you override Html.ActionLink?](http://stackoverflow.com/questions/15952240/how-do-you-override-html-actionlink) — emerson.marini, Oct 10 '14 at 13:38
@MelanciaUK i don't really see the connection? could you clarify? Is that not about getting a 'null/error' value returned from the action, not about **styling** it? — , Oct 10 '14 at 13:43
The connection is that you need to override `Html.ActionLink` to add the extra attribute automatically. The override is there to achieve many other things, not just styles, etc. — emerson.marini, Oct 10 '14 at 13:44

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

ActionLink generates just normal anchors, so you can write:

a{
   color:red;
}

But to get just ActionLinks you will need to call them by a class or a container.

Also may be a better way to do it is to create a custom ActionLink and put a default class inside and using this class you can do your selector, like this you will use this new Custom ActionLink and no need to copy paste classes.

public static class LinkExtensions
{
    public static MvcHtmlString MyActionLink(
        this HtmlHelper htmlHelper, 
        string linkText, 
        string action, 
        string controller
    )
    {
        var currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
        var currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
        if (action == currentAction && controller == currentController)
        {
            var anchor = new TagBuilder("a");
            anchor.Attributes["href"] = "#";
            anchor.AddCssClass("currentPageCSS");
            anchor.SetInnerText(linkText);
            return MvcHtmlString.Create(anchor.ToString());
        }
        return htmlHelper.ActionLink(linkText, action, controller);
    }
}

%= Html.MyActionLink("hello foo", "Index", "Home") %>
<%= Html.MyActionLink("hello bar", "About", "Home") %>

Code copied from https://stackoverflow.com/a/5084672/20126

edited May 23 '17 at 10:33

Community

1
1

answered Oct 10 '14 at 13:26

Amr Elgarhy

66,568
69
184
301

To expand on this though - that would work if you want to color ALL links, but there's no way to distinguish links which were generated by ActionLink versus those which weren't. Once the HTML gets to the browser, nothing is known about how it was generated. – Sam Hanley Oct 10 '14 at 13:28
@sphanley yes you are correct, he can get links he just want by a class, a container or any other selector. – Amr Elgarhy Oct 10 '14 at 13:30
@AmrElGarhy thanks for your suggestion - it's 90% there- but as sphanley has suggested, it causes *all* a tags to be given the styling, not just the Actionlinks – Oct 10 '14 at 13:40
have edited the question for clarification, but are you suggesting to place `anchor.AddCssClass("myClass");` somewhere in my project? – Oct 10 '14 at 13:53
My suggestion is to create a custom ActionLink like html helper and you can set its class to be have a certain value by default, like this you can use this custom helper and then no need to put the class on each ActionLink in html. – Amr Elgarhy Oct 10 '14 at 14:02

Add styling to all @Html.ActionLink from css class

However,

For Example

1 Answers1