Html.ActionLink als Schaltfläche oder Bild, nicht als Link

326

Wie kann ich in der neuesten Version (RC1) von ASP.NET MVC Html.ActionLink als Schaltfläche oder Bild anstelle eines Links rendern lassen?

Ryan Lundy
quelle
13
Mit MVC 3.0 können Sie dies auf <a href="@Url.Action("Index","Home")"> <img src = "@ Url.Content (" ~ / Themes / Gold / images / try-onit) versuchen .png ")" alt = "Home" /> </a> Weitere Informationen, Versuchen Sie dies mycodingerrors.blogspot.com/2012/08/…
lasantha
Nachdem ich gerade ein paar Stunden damit verbracht hatte, dies "richtig" zu machen (z. B. durch Erweitern AjaxHelpermit einem ActionButton), dachte ich, ich würde es unten teilen.
Gone Coding
5
Es ist komisch für mich, dass diese Frage sieben Jahre später immer noch positiv bewertet wird. Anscheinend gibt es 2016 noch keinen einfachen, intuitiven Weg, dies zu tun.
Ryan Lundy

Antworten:

330

Verspätete Antwort, aber Sie können es einfach halten und eine CSS-Klasse auf das htmlAttributes-Objekt anwenden.

<%= Html.ActionLink("Button Name", "Index", null, new { @class="classname" }) %>

und erstellen Sie dann eine Klasse in Ihrem Stylesheet

a.classname
{
    background: url(../Images/image.gif) no-repeat top left;
     display: block;
     width: 150px;
     height: 150px;
     text-indent: -9999px; /* hides the link text */
}
Kennzeichen
quelle
2
Dies funktioniert perfekt für mich, obwohl Sie möglicherweise null durch ein routeValues-Objekt ersetzen müssen, je nachdem, wo Sie eine Verknüpfung herstellen.
David Conlisk
1
Wie gehen Sie mit der Schaltflächen-Namenszeichenfolge um, die Sie dann im Aktionslink-Parameter zuweisen? Das hat bei mir nicht funktioniert.
ZVenue
1
Das gleiche Problem, auch für mich, kann der linkText-Parameter nicht null oder eine leere Zeichenfolge sein, ich suche jedoch nach einem Ersatz für die Bildschaltfläche.
Ant Swift
5
Das ist in vielerlei Hinsicht schlecht, es funktioniert nicht in allen Browsern und Sie verwenden einen Nebeneffekt als Funktionalität. Hexe macht es zu einer sehr schlechten Praxis, benutze es nicht. Nur weil es funktioniert, ist es keine gute Lösung.
Pedro.The.Kid
4
@ Mark - jslatts-Lösung ist die richtige und nein, sie funktioniert nicht in IE11. Nur weil sie in den aktuellen Browsern funktioniert, ist es eine sehr schlechte Praxis, da Sie einen Nebeneffekt als Funktionalität verwenden und wenn sich die Implementierung ändert, wird der Nebeneffekt aufhören Arbeiten.
Pedro.The.Kid
350

Ich benutze Url.Action () und Url.Content () gerne so:

<a href='@Url.Action("MyAction", "MyController")'>
    <img src='@Url.Content("~/Content/Images/MyLinkImage.png")' />
</a>

Genau genommen ist der Url.Content nur für das Pathing erforderlich und nicht wirklich Teil der Antwort auf Ihre Frage.

Vielen Dank an @BrianLegg für den Hinweis, dass hierfür die neue Syntax der Razor-Ansicht verwendet werden sollte. Beispiel wurde entsprechend aktualisiert.

jslatts
quelle
Wenn Sie einen HTML-Helfer dafür wollen: fsmpi.uni-bayreuth.de/~dun3/archives/…
Tobias Hertkorn
6
Das funktioniert perfekt. Beachten Sie nur, dass sich in MVC5 die Syntax geändert hat und <a href='@Url.Action("MyAction", "MyController")'> und <img src = '@ Url.Content ("~ / Content / Images /" lauten sollte. MyLinkImage.png ") '/>. Vielen Dank
BrianLegg
es hat es mit NAN-Text produziert? was zu tun ist
Basheer AL-MOMANI
94

Aus Patricks Antwort entlehnt, stellte ich fest, dass ich dies tun musste:

<button onclick="location.href='@Url.Action("Index", "Users")';return false;">Cancel</button>

um zu vermeiden, dass die Post-Methode des Formulars aufgerufen wird.

DevDave
quelle
51

Nennen Sie mich simpel, aber ich mache es einfach:

<a href="<%: Url.Action("ActionName", "ControllerName") %>">
    <button>Button Text</button>
</a>

Und Sie kümmern sich nur um das Hyperlink-Highlight. Unsere Benutzer lieben es :)

agAus
quelle
1
@ Ben ein Grund, warum dies nicht viele Stimmen hat, ist, dass es so viel später als andere Antworten beantwortet wurde. Ich wollte gerade abstimmen, habe aber getestet, was @ Slider345 gesagt hat, und kann bestätigen, dass dies in IE 7 oder 8 nicht wie gewünscht funktioniert. Vergessen Sie auf keinen Fall, das CSS von einzustellen, wenn Sie es verwenden möchten der Link (schweben und aktiv) text-decoration:none, um diese dumme Unterstreichung loszuwerden. Dies ist für einige Browser erforderlich (Firefox 11.0 sicher).
Yetti
23
Aber Sie sollten keine Knöpfe in einem Element verschachteln, umgekehrt. Zumindest ist es keine gültige Methode in HTML 5
Patrick Magee
1
Ja, das funktioniert nicht einmal in IE10, aus den Gründen, die Patrick erklärt.
Ciaran Gallagher
Keine Verschachtelung von Schaltflächen innerhalb des Aktionselements. stackoverflow.com/questions/6393827/…
Papa Burgund
18

Mit Bootstrap ist dies der kürzeste und sauberste Ansatz, um eine Verknüpfung zu einer Controller-Aktion zu erstellen, die als dynamische Schaltfläche angezeigt wird:

<a href='@Url.Action("Action", "Controller")' class="btn btn-primary">Click Me</a>

Oder um HTML-Helfer zu verwenden:

@Html.ActionLink("Click Me", "Action", "Controller", new { @class = "btn btn-primary" })
Cameron vorwärts
quelle
Ich muss der Sauberkeit zustimmen. 100.
Chris Catignani
15

Einfach einfach :

<button onclick="@Url.Action("index", "Family", new {familyid = Model.FamilyID })">Cancel</button>
Patrick Kan
quelle
dies ruft für mich immer noch die Post-Methode der Ansicht auf, eine Idee warum?
DevDave
Dies ist keine gültige Syntax. IE10 löst einen kritischen JavaScript-Fehler mit der Zeile "SCRIPT5017: Syntaxfehler im regulären Ausdruck" aus.
Ciaran Gallagher
Gute Antwort, aber ohne den onclickInhalt mit location.href(so onclick="location.href='@Url.Action(....)'") zu umgeben, konnte ich ihn nicht zum Laufen bringen.
SharpC
15

Eine späte Antwort, aber so mache ich meinen ActionLink zu einer Schaltfläche. Wir verwenden Bootstrap in unserem Projekt, da dies praktisch ist. Das @T spielt keine Rolle, da es nur ein Übersetzer ist, den wir verwenden.

@Html.Actionlink("Some_button_text", "ActionMethod", "Controller", "Optional parameter", "html_code_you_want_to_apply_to_the_actionlink");

Das obige gibt einen Link wie diesen und es sieht aus wie das Bild unten:

localhost:XXXXX/Firms/AddAffiliation/F0500

Bild zeigt Knopf mit Bootstrap

Aus meiner Sicht:

@using (Html.BeginForm())
{
<div class="section-header">
    <div class="title">
        @T("Admin.Users.Users")
    </div>
    <div class="addAffiliation">
        <p />
        @Html.ActionLink("" + @T("Admin.Users.AddAffiliation"), "AddAffiliation", "Firms", new { id = (string)@WorkContext.CurrentFirm.ExternalId }, new { @class="btn btn-primary" })
    </div>
</div>

}

Hoffe das hilft jemandem

Kaiser 2052
quelle
1
Funktioniert cool! nett und einfach, das htmlAttribute new { @class="btn btn-primary" })+ eins
Irf
15

Wenn Sie keinen Link verwenden möchten, verwenden Sie die Schaltfläche. Sie können der Schaltfläche auch ein Bild hinzufügen:

<button type="button" onclick="location.href='@Url.Action("Create", "Company")'" >
   Create New
   <img alt="New" title="New" src="~/Images/Button/plus.png">
</button>

type = "button" führt Ihre Aktion aus, anstatt ein Formular zu senden.

Amir Chatrbahr
quelle
12

Das kann man nicht machen Html.ActionLink. Sie sollten Url.RouteUrldie URL verwenden und verwenden, um das gewünschte Element zu erstellen.

Mehrdad Afshari
quelle
Hallo, tut mir leid, ich bin sehr neu bei MVC. Wie würde ich die Url.RouteURL verwenden, um das Bild zu erhalten?
UriDium
Was ich damit gemeint habe ist, dass Sie mit einem einfachen Aufruf von ActionLink kein verschachteltes img-Tag (oder Button-Tag) generieren können. Natürlich ist das CSS-Styling des a-Tags selbst eine Möglichkeit, dies zu umgehen, aber Sie können trotzdem kein img-Tag erhalten.
Mehrdad Afshari
9

<button onclick="location.href='@Url.Action("NewCustomer", "Customers")'">Checkout >></button>

Jiri HWeb Horalek
quelle
Dies funktionierte bei mir auf IE10. Dies ist eine gute Lösung, wenn Sie einfach eine Schaltfläche anstelle eines Bildes verwenden möchten, obwohl die Verwendung von Inline-JavaScript für einen einfachen Link wahrscheinlich nicht ideal ist.
Ciaran Gallagher
1
(und nur um sicher zu gehen, ich habe es auf Opera, Safari, Chrome und Firefox getestet und es hat funktioniert)
Ciaran Gallagher
9

Eine einfache Möglichkeit, Ihren Html.ActionLink in eine Schaltfläche zu verwandeln (solange Sie BootStrap angeschlossen haben - was Sie wahrscheinlich haben), ist wie folgt:

@Html.ActionLink("Button text", "ActionName", "ControllerName", new { @class = "btn btn-primary" })
Haugan
quelle
8

Noch spätere Antwort, aber ich bin gerade auf ein ähnliches Problem gestoßen und habe am Ende meine eigene Image Link HtmlHelper-Erweiterung geschrieben .

Eine Implementierung finden Sie in meinem Blog unter dem obigen Link.

Nur hinzugefügt, falls jemand eine Implementierung sucht.

Mirko
quelle
3
Link scheint jetzt inaktiv zu sein
d219
5
<li><a href="@Url.Action(  "View", "Controller" )"><i class='fa fa-user'></i><span>Users View</span></a></li>

Anzeigen eines Symbols mit dem Link

Andrew Day
quelle
4

Tun Sie, was Mehrdad sagt - oder verwenden Sie den URL-Helfer einer HtmlHelperErweiterungsmethode wie Stephen Walther, die hier beschrieben wird , und erstellen Sie Ihre eigene Erweiterungsmethode, mit der Sie alle Ihre Links rendern können.

Dann ist es einfach, alle Links als Schaltflächen / Anker oder nach Belieben zu rendern - und vor allem können Sie Ihre Meinung später ändern, wenn Sie feststellen, dass Sie tatsächlich eine andere Art der Erstellung Ihrer Links bevorzugen.

mookid8000
quelle
3

Sie können Ihre eigene Erweiterungsmethode erstellen.
Schauen Sie sich meine Implementierung an

public static class HtmlHelperExtensions
{
    public static MvcHtmlString ActionImage(this HtmlHelper html, string action, object routeValues, string imagePath, string alt, object htmlAttributesForAnchor, object htmlAttributesForImage)
    {
        var url = new UrlHelper(html.ViewContext.RequestContext);

        // build the <img> tag
        var imgBuilder = new TagBuilder("img");
        imgBuilder.MergeAttribute("src", url.Content(imagePath));
        imgBuilder.MergeAttribute("alt", alt);
        imgBuilder.MergeAttributes(new RouteValueDictionary(htmlAttributesForImage));
        string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);

        // build the <a> tag
        var anchorBuilder = new TagBuilder("a");
        anchorBuilder.MergeAttribute("href", action != null ? url.Action(action, routeValues) : "#");
        anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside
        anchorBuilder.MergeAttributes(new RouteValueDictionary(htmlAttributesForAnchor));

        string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);
        return MvcHtmlString.Create(anchorHtml);
    }
}

dann benutze es aus deiner Sicht, schau dir meinen Anruf an

 @Html.ActionImage(null, null, "../../Content/img/Button-Delete-icon.png", Resource_en.Delete,
               new{//htmlAttributesForAnchor
                   href = "#",
                   data_toggle = "modal",
                   data_target = "#confirm-delete",
                   data_id = user.ID,
                   data_name = user.Name,
                   data_usertype = user.UserTypeID
               }, new{ style = "margin-top: 24px"}//htmlAttributesForImage
                    )
Basheer AL-MOMANI
quelle
2

Für Material Design Lite und MVC:

<a class="mdl-navigation__link" href='@Url.Action("MyAction", "MyController")'>Link Name</a>
Rody Davis
quelle
1
@using (Html.BeginForm("DeleteMember", "Member", new { id = Model.MemberID }))
    {
        <input type="submit" value="Delete Member" onclick = "return confirm('Are you sure you want to delete the member?');" />
    }
user477864
quelle
1

Es scheint viele Lösungen zu geben, wie ein Link erstellt werden kann, der als Bild angezeigt wird, aber keine, die ihn als Schaltfläche erscheinen lässt.

Es gibt nur einen guten Weg, den ich gefunden habe, um dies zu tun. Es ist ein bisschen hacky, aber es funktioniert.

Sie müssen lediglich eine Schaltfläche und einen separaten Aktionslink erstellen. Machen Sie den Aktionslink mit CSS unsichtbar. Wenn Sie auf die Schaltfläche klicken, kann das Klickereignis des Aktionslinks ausgelöst werden.

<input type="button" value="Search" onclick="Search()" />
 @Ajax.ActionLink("Search", "ActionName", null, new AjaxOptions {}, new { id = "SearchLink", style="display:none;" })

function Search(){
    $("#SearchLink").click();
 }

Es kann schwierig sein, dies jedes Mal zu tun, wenn Sie einen Link hinzufügen, der wie eine Schaltfläche aussehen muss, aber das gewünschte Ergebnis erzielt.

bsayegh
quelle
1

benutze FORMACTION

<input type="submit" value="Delete" formaction="@Url.Action("Delete", new { id = Model.Id })" />
Serge
quelle
0

Ich habe gerade diese Erweiterung gefunden , um es zu tun - einfach und effektiv.

Shaul Behr
quelle
Link ist unterbrochen.
Chris Catignani
0

Ich habe es so gemacht, dass der actionLink und das Bild getrennt sind. Setzen Sie das Actionlink-Image als ausgeblendet und fügen Sie dann einen jQuery-Trigger-Aufruf hinzu. Dies ist eher eine Problemumgehung.

'<%= Html.ActionLink("Button Name", "Index", null, new { @class="yourclassname" }) %>'
<img id="yourImage" src="myImage.jpg" />

Auslösebeispiel:

$("#yourImage").click(function () {
  $('.yourclassname').trigger('click');
});
Hatsrumandcode
quelle
0

Url.Action()Sie erhalten die nackte URL für die meisten Überladungen von Html.ActionLink, aber ich denke, dass die URL-from-lambdaFunktionalität nur bis Html.ActionLinkjetzt verfügbar ist. Hoffentlich werden sie Url.Actionirgendwann eine ähnliche Überlastung hinzufügen .

Dhanasekar
quelle
0

So habe ich es ohne Scripting gemacht:

@using (Html.BeginForm("Action", "Controller", FormMethod.Get))
{
    <button type="submit" 
            class="btn btn-default" 
            title="Action description">Button Label</button>
}

Gleich, aber mit Parameter- und Bestätigungsdialog:

@using (Html.BeginForm("Action", "Controller", 
        new { paramName = paramValue }, 
        FormMethod.Get, 
        new { onsubmit = "return confirm('Are you sure?');" }))
{
    <button type="submit" 
            class="btn btn-default" 
            title="Action description">Button Label</button>
}
Jevgenij Martynenko
quelle