Html.ActionLink come un pulsante o un’immagine, non un collegamento

Nell’ultima versione (RC1) di ASP.NET MVC, come faccio a ottenere Html.ActionLink per il rendering come pulsante o immagine invece di un collegamento?

Risposta tardiva, ma puoi semplicemente mantenerla semplice e applicare una class CSS all’object htmlAttributes.

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

e quindi crea una class nel tuo 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 */ } 

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

    

A rigor di termini, l’Url.Content è necessario solo per il pathing e non fa realmente parte della risposta alla tua domanda.

Grazie a @ BrianLegg per aver sottolineato che questo dovrebbe usare la nuova syntax della vista Razor. L’esempio è stato aggiornato di conseguenza.

Prendendo a prestito la risposta di Patrick, ho scoperto che dovevo fare questo:

  

per evitare di chiamare il metodo post del modulo.

Chiamami semplicistico, ma io faccio solo:

 ">   

E tu ti occupi solo del momento saliente del collegamento ipertestuale. I nostri utenti lo adorano 🙂

Semplicemente:

  

Una risposta tardiva, ma è così che trasformo il mio ActionLink in un pulsante. Stiamo usando Bootstrap nel nostro progetto perché lo rende conveniente. Non importa il @T dal suo unico traduttore che stiamo usando.

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

Quanto sopra fornisce un link come questo e sembra l’immagine qui sotto:

 localhost:XXXXX/Firms/AddAffiliation/F0500 

pulsante dimostrativo di immagine con bootstrap

Secondo me:

 @using (Html.BeginForm()) { 
@T("Admin.Users.Users")

@Html.ActionLink("" + @T("Admin.Users.AddAffiliation"), "AddAffiliation", "Firms", new { id = (string)@WorkContext.CurrentFirm.ExternalId }, new { @class="btn btn-primary" })
}

Spero che questo aiuti qualcuno

se non si desidera utilizzare un collegamento, utilizzare il pulsante. puoi anche aggiungere un’immagine al pulsante:

  

type = “button” esegue la tua azione invece di inviare il modulo.

Non puoi farlo con Html.ActionLink . Dovresti usare Url.RouteUrl e usare l’URL per build l’elemento che desideri.

Anche una risposta più tardiva, ma mi sono imbattuto in un problema simile e ho finito per scrivere la mia estensione HtmlHelper .

Puoi trovarne un’implementazione sul mio blog nel link qui sopra.

Appena aggiunto nel caso qualcuno stia dando la caccia a un’implementazione.

Usando bootstrap questo è l’approccio più breve e più pulito per creare un collegamento a un’azione del controller che appare come un pulsante dinamico:

 Click Me 

O per usare helper Html:

 @Html.ActionLink("Click Me", "Action", "Controller", new { @class = "btn btn-primary" }) 
 
  • Users View
  • Per visualizzare un’icona con il link

    Fai quello che dice Mehrdad – o usa l’url helper da un metodo di estensione HtmlHelper come Stephen Walther descrive qui e crea il tuo metodo di estensione che può essere usato per rendere tutti i tuoi link.

    Quindi sarà facile rendere tutti i link come pulsanti / ancore o come preferisci – e, soprattutto, puoi cambiare idea in seguito quando scoprirai che in realtà preferisci un altro modo per creare i tuoi link.

    puoi creare il tuo metodo di estensione
    dai un’occhiata alla mia implementazione

     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  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  tag var anchorBuilder = new TagBuilder("a"); anchorBuilder.MergeAttribute("href", action != null ? url.Action(action, routeValues) : "#"); anchorBuilder.InnerHtml = imgHtml; // include the  tag inside anchorBuilder.MergeAttributes(new RouteValueDictionary(htmlAttributesForAnchor)); string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal); return MvcHtmlString.Create(anchorHtml); } } 

    quindi usalo nella tua vista per 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 ) 

    Un modo semplice per rendere Html.ActionLink in un pulsante (se hai BootStrap collegato – che probabilmente hai) è come questo:

     @Html.ActionLink("Button text", "ActionName", "ControllerName", new { @class = "btn btn-primary" }) 
     @using (Html.BeginForm("DeleteMember", "Member", new { id = Model.MemberID })) {  } 

    Sembra che ci siano molte soluzioni su come creare un collegamento che viene visualizzato come un’immagine, ma nessuno che lo faccia apparire come un pulsante.

    C’è solo un buon modo che ho trovato per fare questo. È un po ‘hacky, ma funziona.

    Quello che devi fare è creare un pulsante e un link di azione separato. Rendi il link di azione invisibile usando css. Quando fai clic sul pulsante, puoi triggersre l’evento click del link di azione.

      @Ajax.ActionLink("Search", "ActionName", null, new AjaxOptions {}, new { id = "SearchLink", style="display:none;" }) function Search(){ $("#SearchLink").click(); } 

    Può essere una seccatura fare tutto questo ogni volta che aggiungi un link che ha bisogno di sembrare un pulsante, ma ottiene il risultato desiderato.

    usa FORMAZIONE

      

    Ho appena trovato questa estensione per farlo – semplice ed efficace.

    Il modo in cui l’ho fatto è avere l’actionLink e l’immagine separatamente. Imposta l’immagine del link di azione come nascosta e quindi aggiungi una chiamata trigger jQuery. Questo è più di una soluzione.

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

    Trigger esempio:

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

    Url.Action() ti Url.Action() l’URL per la maggior parte degli overload di Html.ActionLink , ma penso che la funzionalità URL-from-lambda sia disponibile solo tramite Html.ActionLink finora. Spero che aggiungeranno un sovraccarico simile a Url.Action ad un certo punto.

    Questo è come l’ho fatto senza scripting:

     @using (Html.BeginForm("Action", "Controller", FormMethod.Get)) {  } 

    Lo stesso, ma con il parametro e la finestra di conferma:

     @using (Html.BeginForm("Action", "Controller", new { paramName = paramValue }, FormMethod.Get, new { onsubmit = "return confirm('Are you sure?');" })) {  }