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

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

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

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.

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.

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

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

Einfach einfach :

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

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

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

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.

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

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

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

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.

<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

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.

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
                    )

Für Material Design Lite und MVC:

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

@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 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.

benutze FORMACTION

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

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

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');
});

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 .

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