Html.ActionLink als Schaltfläche oder ein Bild, kein Link

Question

In der aktuellen (RC1) Version von ASP.NET MVC, wie bekomme ich Html.ActionLink als Schaltfläche zu machen oder ein Bild anstelle einem Link?

Answer 1

Späte Antwort, aber man kann es nur einfach halten und eine CSS-Klasse gilt für die Htmlattributes Objekt.

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

und dann eine Klasse in Ihrem Stylesheet erstellen

a.classname
{
    background: url(../Images/image.gif) no-repeat top left;
     display: block;
     width: 150px;
     height: 150px;
     text-indent: -9999px; /* hides the link text */
}

Answer 2

Ich mag Url.Action () und Url.Content () wie folgt verwenden:

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

Genau genommen ist die Url.Content nur für Wegfindung benötigt wird, ist ein Teil der Antwort auf Ihre Frage nicht wirklich.

Dank @BrianLegg für den Hinweis auf, dass dies die neue Razor Ansicht Syntax verwenden sollte. Beispiel wurde entsprechend aktualisiert.

Answer 3

Leihen von Patrick Antwort, ich fand, dass ich hatte, dies zu tun:

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

zu vermeiden, die Form der post-Methode aufgerufen wird.

Answer 4

Rufen Sie mich stark vereinfacht, aber ich gerade tun:

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

Und Sie nur kümmern sich um den Hyperlink Highlight. Unsere Nutzer lieben es:)

Answer 5

Einfach nur:

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

Answer 6

Eine späte Antwort, aber das ist, wie ich meine Action in eine Taste. Wir verwenden in unserem Projekt Bootstrap wie es es bequem macht. Geschweige denn die @T seit seinem nur ein Übersetzer wir verwenden.

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

Die obige Abbildung zeigt einen Link wie folgt 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>

}

Hope, das hilft jemand

Answer 7

Wenn Sie nicht über einen Link verwenden möchten, verwenden Sie Taste. Sie können Bild-Taste als auch 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 die Aktion statt Form einreichen.

Answer 8

Sie können dies nicht mit Html.ActionLink. Sie sollten Url.RouteUrl und verwenden Sie die URL verwenden, um das Element zu konstruieren Sie wollen.

Answer 9

Mit Bootstrap ist dies der kürzeste und sauberste Ansatz einen Link 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 HTML-Helfer zu verwenden:

@Html.ActionLink("Click Me", "Action", "Controller", new { @class = "btn btn-primary" })

Answer 10

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

Answer 11

Auch später Antwort, aber ich lief nur in ein ähnliches Problem und schließlich meinen eigenen Bildlink Htmlhelper Erweiterung .

Sie können eine Implementierung es auf meinem Blog in dem obigen Link finden.

hinzugefügt Für den Fall, jemand ist auf der Jagd eine Implementierung nach unten.

Answer 12

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

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

Answer 13

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

ein Symbol anzuzeigen, mit dem Link

Answer 14

Tu, was Mehrdad sagt - oder den URL-Helfer von einer HtmlHelper Erweiterung Methode wie Stephen Walther beschreibt hier und Ihre eigene Erweiterungsmethode machen, die verwendet werden können, alle Links zu machen.

Dann wird es einfach sein, alle Links als Schaltflächen / Anker zu machen oder je nachdem, was Sie bevorzugen -. Und, was am wichtigsten ist, können Sie später Ihre Meinung ändern, wenn Sie feststellen, dass Sie tatsächlich eine andere Art und Weise bevorzugen Sie Ihre Links machen

Answer 15

Sie können Ihre eigene Erweiterungsmethode
erstellen Blick auf, meine Implementierung

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 Ihrer Ansicht nach nehmen Blick auf meinen Anruf

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

Answer 16

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

Answer 17

Es scheint zu sein, viele Lösungen auf, wie man einen Link zu erstellt, die als ein Bild anzeigt, aber keine, die es erscheinen eine Taste sein.

Es gibt nur gute Art und Weise, die ich gefunden habe, dies zu tun. Es ist ein wenig hacky, aber es funktioniert.

Was Sie tun müssen, ist eine Taste und eine separate Aktionslink erstellen. Machen Sie den Aktionslink unsichtbar mit CSS. Wenn Sie auf die Schaltfläche geklickt wird, kann es das Click-Ereignis des Aktionslink abzufeuern.

<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 ein Schmerz im Hintern sein, diese Sie einen Link hinzufügen, jedes Mal zu tun, wie eine Schaltfläche suchen braucht, aber es das gewünschte Ergebnis zu erreichen.

Answer 18

verwenden Formaction

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

Answer 19

Just gefunden

So wie ich es getan habe, ist das Action und das Bild einzeln zu haben. Stellen Sie die Action Bild als verstecktes und dann hinzugefügt, um eine jQuery Triggers. Dies ist eher das Problem zu umgehen.

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

Trigger Beispiel:

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

Url.Action() finden Sie die nackten URL für die meisten Überlastungen von Html.ActionLink bekommen, aber ich denke, dass die URL-from-lambda Funktionalität nur über Html.ActionLink ist so weit. Hoffentlich werden sie eine ähnliche Überlastung Url.Action an einem gewissen Punkt hinzuzufügen.

Dies ist, wie ich es ohne Scripting tat:

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

Die gleiche, aber mit dem 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>
}

Für Material Design Lite und MVC:

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

Answer 20

Answer 21

Answer 22

So wie ich es getan habe, ist das Action und das Bild einzeln zu haben. Stellen Sie die Action Bild als verstecktes und dann hinzugefügt, um eine jQuery Triggers. Dies ist eher das Problem zu umgehen.

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

Trigger Beispiel:

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

Answer 23

Url.Action() finden Sie die nackten URL für die meisten Überlastungen von Html.ActionLink bekommen, aber ich denke, dass die URL-from-lambda Funktionalität nur über Html.ActionLink ist so weit. Hoffentlich werden sie eine ähnliche Überlastung Url.Action an einem gewissen Punkt hinzuzufügen.

Dies ist, wie ich es ohne Scripting tat:

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

Die gleiche, aber mit dem 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>
}

Für Material Design Lite und MVC:

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

Answer 24

Url.Action() finden Sie die nackten URL für die meisten Überlastungen von Html.ActionLink bekommen, aber ich denke, dass die URL-from-lambda Funktionalität nur über Html.ActionLink ist so weit. Hoffentlich werden sie eine ähnliche Überlastung Url.Action an einem gewissen Punkt hinzuzufügen.

Answer 25

Dies ist, wie ich es ohne Scripting tat:

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

Die gleiche, aber mit dem 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>
}

Answer 26

Für Material Design Lite und MVC:

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

Answer 27

Answer 28