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

Ich benutze gerne Url.Action () und Url.Content () wie folgt:

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

Streng genommen wird der Url.Content nur benötigt, da das Pfading nicht wirklich Teil der Antwort auf Ihre Frage ist.

Vielen Dank an @BrianLegg für den Hinweis, dass dies die neue Razor-Ansichtssyntax verwenden soll. Beispiel wurde entsprechend aktualisiert.

Als ich Patrick's Antwort entlehnte, stellte ich fest, dass ich Folgendes 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.

Nennen Sie mich einfach, aber ich mache nur:

<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 :)

Eine späte Antwort, aber so mache ich aus meinem ActionLink eine Schaltfläche. Wir verwenden Bootstrap in unserem Projekt, da es praktisch ist. Vergessen Sie nicht das @T, 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 solchen Link an und es sieht aus wie das Bild unten:

localhost:XXXXX/Firms/AddAffiliation/F0500

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

Einfach einfach :

<button onclick="@Url.Action("index", "Family", new {familyid = Model.FamilyID })">Cancel</button>

wenn Sie keinen Link verwenden möchten, verwenden Sie die Schaltfläche. Sie können auch ein Bild zum Button 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 das Formular zu senden.

Mit Html.ActionLink ist das nicht möglich. Sie sollten Url.RouteUrl verwenden und die URL verwenden, um das gewünschte Element zu erstellen.

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

Mit Bootstrap ist dies der kürzeste und sauberste Ansatz zum Erstellen einer Verknüpfung zu einer Controller-Aktion, 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" })

Sogar eine spätere Antwort, aber ich hatte gerade eine ähnliche Ausgabe und schrieb am Ende meine eigene Image link HtmlHelper extension . 

Eine Implementierung davon finden Sie in meinem Blog unter dem Link oben. 

Nur hinzugefügt für den Fall, dass jemand eine Implementierung jagt.

Eine einfache Möglichkeit, aus Ihrem Html.ActionLink eine Schaltfläche zu machen (sofern Sie BootStrap angeschlossen haben - was Sie wahrscheinlich haben), sieht folgendermaßen aus:

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

<li><a href="@Url.Action(  "View", "Controller" )"><i class='fa fa-user'></i><span>Users View</span></a></li>

So zeigen Sie ein Symbol mit dem Link an

Tun Sie, was Mehrdad sagt - oder verwenden Sie den URL-Helfer aus einer HtmlHelper-Erweiterungsmethode, wie Stephen Walther here beschreibt, und erstellen Sie Ihre eigene Erweiterungsmethode, mit der alle Links dargestellt werden können.

Dann ist es einfach, alle Links als Schaltflächen/Anker darzustellen oder was auch immer Sie bevorzugen - und vor allem können Sie Ihre Meinung später ändern, wenn Sie feststellen, dass Sie tatsächlich eine andere Art der Verknüpfung bevorzugen.

sie können Ihre eigene Erweiterungsmethode erstellen
Sehen 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 verwenden Sie es in Ihrer Ansicht, schauen Sie sich 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
                    )

@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?');" />
    }

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

Ich habe nur einen guten Weg gefunden, dies zu tun. Es ist ein bisschen hackig, aber es funktioniert.

Sie müssen 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();
 }

Wenn Sie einen Link hinzufügen, der wie eine Schaltfläche aussehen muss, ist dies möglicherweise ein Ärgernis. Dies führt jedoch zum gewünschten Ergebnis.

fORMACTION verwenden

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

Url.Action() liefert Ihnen die bloße URL für die meisten Überladungen von Html.ActionLink, aber ich denke, dass die URL-from-lambda-Funktionalität bisher nur über Html.ActionLink verfügbar ist. Hoffentlich fügen sie Url.Action irgendwann eine ähnliche Überladung hinzu.

Nur diese Erweiterung gefunden, um es zu tun - einfach und effektiv.

Für Material Design Lite und MVC:

<a class="mdl-navigation__link" href='@Url.Action("MyAction", "MyController")'>Link Name</a>

Wie ich es gemacht habe, ist es, actionLink und das Bild getrennt voneinander zu haben. Stellen Sie das actionlink-Bild als ausgeblendet ein Und fügen Sie dann einen jQuery-Auslöseraufruf hinzu. Dies ist eher eine Problemumgehung.

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

Trigger-Beispiel:

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

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>
}