it-swarm.com.de

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

Wie bekomme ich in der neuesten (RC1) -Version von ASP.NET MVC, dass Html.ActionLink als Button oder Bild anstelle eines Links gerendert wird?

311
Ryan Lundy

Späte Antwort, aber Sie könnten es einfach halten und eine CSS-Klasse auf das htmlAttributes-Objekt anwenden.

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

und erstellen Sie 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 */
}
316
Mark

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.

341
jslatts

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.

90
DevDave

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

50
agAus

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

picture demonstrating button with 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

15
Emperor 2052

Einfach einfach :

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

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.

14
Amir Chatrbahr

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

12
Mehrdad Afshari

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

9

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" })
8
Cameron Forward

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.

8
Mirko

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

5
Andrew Day

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.

4
mookid8000

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

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.

1
bsayegh

fORMACTION verwenden

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

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.

0
Dhanasekar

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

0
Shaul Behr

Für Material Design Lite und MVC:

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

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

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