Html.ActionLink come un pulsante o un'immagine, non un link

Question

Nell'ultima (RC1) di rilascio di ASP.NET MVC, come faccio ad ottenere il codice Html.ActionLink per eseguire il rendering di un pulsante o un'immagine al posto di un link?

Answer 1

risposta in ritardo, ma si può solo mantenere le cose semplici e applicare una classe CSS per i htmlAttributes oggetto.

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

e quindi creare una classe nel foglio di stile

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

Mi piace usare Url.Action () e Url.Content () in questo modo:

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

A rigor di termini, l'Url.Content è necessaria solo per pathing non è realmente parte della risposta alla tua domanda.

Grazie a @BrianLegg per aver ricordato che questo dovrebbe utilizzare la nuova sintassi Razor vista. Esempio è stato aggiornato di conseguenza.

Answer 3

Prestito dalla risposta di Patrick, ho scoperto che ho dovuto fare questo:

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

per evitare di chiamare metodo POST del form.

Answer 4

Call me semplicistico, ma io faccio solo:

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

E basta prendere cura il momento clou collegamento ipertestuale. I nostri utenti lo amano:)

Answer 5

Basta semplicemente:

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

Answer 6

Una risposta in ritardo, ma questo è come faccio la mia ActionLink in un pulsante. Stiamo utilizzando Bootstrap nel nostro progetto in quanto lo rende conveniente. Non importa il @T sin dalla sua solo un traduttore che stiamo usando.

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

È possibile che questo dà un link come questo e sembra come l'immagine qui sotto:

localhost:XXXXX/Firms/AddAffiliation/F0500

A mio parere:

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

}

Spero che questo aiuti qualcuno

Answer 7

se non si desidera utilizzare un collegamento, utilizzare il pulsante. è possibile aggiungere un'immagine al tasto così:

<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" esegue l'azione invece di presentare modulo.

Answer 8

Non si può fare questo con Html.ActionLink. Si dovrebbe usare Url.RouteUrl e utilizzare l'URL per costruire l'elemento che si desidera.

Answer 9

Utilizzando bootstrap questo è l'approccio più breve e più pulito per creare un link ad un azione di controllo che appare come un pulsante dinamica:

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

O, per utilizzare gli helper HTML:

@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

Anche in seguito la risposta, ma ho appena imbattuto in un problema simile e ha finito per scrivere il mio "noreferrer">.

È possibile trovare un'attuazione sul mio blog nel link qui sopra.

Appena aggiunto nel caso qualcuno sta dando la caccia un'implementazione.

Answer 12

Un modo semplice per farlo rendere il vostro Html.ActionLink in un pulsante (finché si dispone di Bootstrap collegato - che probabilmente avete) è in questo modo:

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

Per visualizzare un'icona con il link

Answer 14

Fai quello che dice Mehrdad - o utilizzare l'helper URL da un metodo di estensione HtmlHelper come Stephen Walther descrive qui e creare il proprio metodo di estensione che può essere usato per rendere tutti i link.

Poi sarà facile da rendere tutti i link come pulsanti / ancore o se si preferisce -. E, soprattutto, è possibile cambiare idea in seguito quando si scopre che in realtà preferisce qualche altro modo di rendere i vostri link

Answer 15

è possibile creare il proprio metodo di estensione
dare un occhiata al mio attuazione

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

poi utilizzarlo a vostro parere, dare un occhiata alla mia chiamata

 @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

Sembra che ci sia un sacco di soluzioni su come creato un link che mostra come immagine, ma nessuno che fanno apparire come un pulsante.

C'è solo buon modo che ho trovato per fare questo. Il suo un po 'hacky, ma funziona.

Quello che devi fare è creare un pulsante e un collegamento un'azione separata. Effettuare il collegamento azione invisibile utilizzando i CSS. Quando si fa clic sul pulsante, si può sparare l'evento click del collegamento di azione.

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

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

Può essere un dolore nel culo per fare questo ogni volta che si aggiunge un collegamento che ha bisogno di apparire come un pulsante, ma non ottenere il risultato desiderato.

Answer 18

utilizzare FormAction

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

Answer 19

Appena trovato questa estensione per farlo -. semplice ed efficace

Answer 20

Il modo in cui l'ho fatto è di avere l'ActionLink e l'immagine separatamente. Impostare l'immagine ActionLink come nascosto e poi ha aggiunto una chiamata di innesco jQuery. Questo è più di una soluzione.

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

esempio trigger:

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

Answer 21

Url.Action() otterrà l'URL a nudo per la maggior parte sovraccarichi di Html.ActionLink, ma penso che la funzionalità URL-from-lambda è disponibile solo tramite Html.ActionLink finora. Speriamo che aggiungono un sovraccarico di simile a Url.Action ad un certo punto.

Answer 22

Ecco come ho fatto senza scripting:

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

Lo stesso, ma con finestra dei parametri e conferma:

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

Per Material Design Lite e MVC:

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