Czy mogę dodać klasę do HTML.ActionLink w MVC3

83

Mam ten kod i chciałbym dodać klasę do linku. Czy można to zrobić w MVC3?

Html.ActionLink("Create New", "Create")
Sango
źródło
klasa jak w „public class MyClass {...}” czy klasa jak w „<a class='form-control' href='/MyController/MyAction'> Utwórz nowy </a>”?
LongChalk

Odpowiedzi:

150

Tak, możesz po prostu dodać kolejny parametr z obiektem reprezentującym klasę css:

Html.ActionLink("Create New", "Create", CONTROLLERNAME, null, new { @class= "yourCSSclass"} )

Można to przetłumaczyć na:

Html.ActionLink(link text, action name, controller name, route values object, html attributes object)

Edytować:

Aby dodać własne style, użyj tego:

Html.ActionLink(
"Create New",
"Create",
CONTROLLERNAME,
null,
new { @class= "yourCSSclass", @style= "width:100px; color: red;" }
)
Damb
źródło
Dzięki za świetne odpowiedzi. Ale teraz jestem zdezorientowany, ponieważ widzę trzy różne sposoby na zrobienie tego, z których każdy ma różne parametry. Czy ktoś może mi dać jakiś pomysł, który może być najlepszy. Dziękuję bardzo.
Sango
1
@Sango: Pierwszy parametr to rzeczywisty tekst linku, który zostanie wyświetlony. Drugi parametr to nazwa akcji. Trzecia to nazwa kontrolera. Czwarty to obiekt zawierający wartości trasy (tj. Obiekt, który musisz przekazać do trasy / akcji) - w tym przypadku nie potrzebujesz tego, więc po prostu ustaw go na 'null'. Ostatnim z nich jest obiekt htmlAttributes, który ma właściwości takie jak „class”, który dodaje podany ciąg / y jako klasę css do twojego linku. Więcej można zobaczyć we wspomnianej już dokumentacji . Zwróć uwagę, że odpowiedź od Rhapsody nie działa z powodu ...
Damb
1
Nie ma „najlepszych”. Wszystkie są przeciążeniami wskazującymi na ten sam kod bazowy do renderowania znacznika achor. Wybór przeciążenia zależy od tego, czego potrzebujesz w adresie URL.
RPM1984
1
Bardzo dziękuję wszystkim. Mam teraz kod działający i wygląda świetnie.
Sango
18
@Html.ActionLink("ClickMe",  // link text
                 "Index", // action name
                 "Home",  // controller 
                 new { id = 2131 }, // (optional) route values
                 new { @class = "someClass" }) // html attributes
RPM1984
źródło
@RPM - szybkie pytanie. Czy mogę określić inną szerokość tego łącza? Tekst mojego przycisku jest szerszy niż zwykle i chciałbym mieć możliwość zmodyfikowania szerokości.
Sango
@Sango: Sprawdź moją odpowiedź, aby zobaczyć, jak dodać niestandardowe style do linku.
Damb
Próbowałem, ale to nie działa. Po prostu określa parametr o nazwie szerokość z wartością 100 pikseli w trasie adresowej :-(
Sango
@Sango: Wygląda na to, że moja odpowiedź jest dla Ciebie nie do podzielenia. Nieważne więc. To tyle, jeśli chodzi o próbę pomocy przy odpowiedzi od początku :)
Damb
btw używanie @stylejest złą praktyką. IMO jest tak samo złe jak używanie <div style="color:red;">. Użyj klasy CSS.
RPM1984
7
Html.ActionLink("Create New", "Create", null, htmlAttributes: new { @class = "className" })
archil
źródło
5

Możesz użyć przeciążenia ActionLink, które pobiera parametr htmlAttributes, aby dodać klasę do wygenerowanego elementu:

Html.ActionLink("Create New", "Create", new {}, new { @class = cssClass });
verdesmarald
źródło
5

Zgodnie z dokumentacją powinno to załatwić sprawę:

Html.ActionLink("LinkText", "Action", "Controller", new { }, new {@class="css class"})

Edycja: Dzięki za zauważenie Dampe zaktualizowałem przykładowy kod.

Rapsodia
źródło
3
-1, to nie działa . Otrzymałeś przełączoną kolejność parametru nazwy kontrolera i parametru nazwy akcji. W mojej odpowiedzi widać poprawną kolejność.
Damb