Kann ich einem HTML.ActionLink in MVC3 eine Klasse hinzufügen?

83

Ich habe diesen Code und möchte dem Link eine Klasse hinzufügen. Ist dies in MVC3 möglich?

Html.ActionLink("Create New", "Create")
asp.net-mvc Sango
quelle
Klasse wie in "public class MyClass {...}" oder Klasse wie in "<a class='form-control' href='/MyController/MyAction'> Create New </a>"?
LongChalk

Antworten:

150

Ja, Sie können einfach einen weiteren Parameter mit einem Objekt hinzufügen, das die CSS-Klasse darstellt:

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

Es kann übersetzt werden in:

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

Bearbeiten:

Verwenden Sie Folgendes, um benutzerdefinierte Stile hinzuzufügen:

Html.ActionLink(
"Create New",
"Create",
CONTROLLERNAME,
null,
new { @class= "yourCSSclass", @style= "width:100px; color: red;" }
)
Damb
quelle
Danke für die tollen Antworten. Aber jetzt bin ich verwirrt, weil ich drei verschiedene Möglichkeiten sehe, die alle unterschiedliche Parameter haben. Kann mir jemand eine Idee geben, die am besten sein könnte. Ich danke dir sehr.
Sango
1
@ Sango: Der erste Parameter ist der tatsächliche Linktext, der angezeigt wird. Der zweite Parameter ist der Name der Aktion. Drittens ist der Name eines Controllers. Viertens handelt es sich um ein Objekt, das Routenwerte enthält (dh ein Objekt, das Sie an die Route / Aktion übergeben müssen). In diesem Fall benötigen Sie dieses Objekt nicht. Machen Sie es also einfach auf "Null". Und das letzte ist das htmlAttributes-Objekt, das Eigenschaften wie 'class' hat, die Ihrem Link bereitgestellte Zeichenfolgen als CSS-Klasse hinzufügen. Weitere Informationen finden Sie in der bereits erwähnten Dokumentation . Beachten Sie nur, dass die Antwort von Rhapsody wegen ... nicht funktioniert.
Damb
1
Es gibt kein "Bestes". Dies sind alles Überladungen, die auf denselben zugrunde liegenden Code zum Rendern eines Achor-Tags verweisen. Welche Überladung Sie auswählen müssen, hängt davon ab, was Sie in der URL benötigen.
RPM1984
1
Vielen Dank an alle. Ich habe jetzt den Code funktioniert und es sieht gut aus.
Sango
18 
@Html.ActionLink("ClickMe",  // link text
                 "Index", // action name
                 "Home",  // controller 
                 new { id = 2131 }, // (optional) route values
                 new { @class = "someClass" }) // html attributes
RPM1984
quelle
@RPM - kurze Frage. Kann ich für diesen Link eine andere Breite angeben? Mein Schaltflächentext ist breiter als normal und ich möchte die Breite ändern können.
Sango
@ Sango: Überprüfen Sie meine Antwort, um zu sehen, wie Sie Ihrem Link benutzerdefinierte Stile hinzufügen können.
Damb
Ich habe das versucht, aber es funktioniert nicht. Es gibt nur einen Parameter namens width mit einem Wert von 100px in der Adressroute an :-(
Sango
@ Sango: Scheint, als wäre meine Antwort für dich unantastbar. Egal Dann. Soviel zu dem Versuch, von Anfang an bei der Arbeit zu helfen :)
Damb
Übrigens ist die Verwendung @styleeine schlechte Praxis. IMO ist es genauso schlimm wie zu benutzen <div style="color:red;">. Verwenden Sie eine CSS-Klasse.
RPM1984
7 
Html.ActionLink("Create New", "Create", null, htmlAttributes: new { @class = "className" })
Archil
quelle
5

Laut Dokumentation sollte dies den Trick tun:

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

Edit: Danke, dass du Dampe bemerkt hast, ich habe das Codebeispiel aktualisiert.

Rhapsodie
quelle
3
-1, das funktioniert nicht . Sie haben die Reihenfolge von Controller-Name-Parameter und Aktionsname-Parameter geändert. Sie können die richtige Reihenfolge in meiner Antwort sehen.
Damb
4

Sie können die ActionLink-Überladung verwenden, die einen htmlAttributes-Parameter verwendet, um dem generierten Element eine Klasse hinzuzufügen:

Html.ActionLink("Create New", "Create", new {}, new { @class = cssClass });
verdesmarald
quelle