Html.ActionLink come pulsante o immagine, non come collegamento

Nell'ultima versione (RC1) di ASP.NET MVC, come posso ottenere Html.ActionLink per il rendering come pulsante o immagine anziché come collegamento?

Risposta tardiva ma potresti semplicemente mantenerlo semplice e applicare una classe CSS all'oggetto htmlAttributes.

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

e quindi crea una classe 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 () in questo modo:

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

A rigor di termini, il contenuto URL è necessario solo per il percorso non è in realtà parte della risposta alla tua domanda.

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

Prendendo in prestito dalla risposta di Patrick, ho scoperto che dovevo farlo:

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

per evitare di chiamare il metodo post del modulo.

Chiamami semplicistico, ma faccio solo:

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

E ti occupi solo dell'evidenziazione del collegamento ipertestuale. Ai nostri utenti piace :)

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

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

Semplicemente:

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

Una risposta in ritardo, ma è così che trasformo il mio ActionLink in un pulsante. Stiamo usando Bootstrap nel nostro progetto in quanto lo rende conveniente. Non importa il @T poiché è solo un traduttore che stiamo usando.

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

Quanto sopra dà un link come questo e sembra come l'immagine qui sotto:

localhost:XXXXX/Firms/AddAffiliation/F0500

Secondo me:

@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

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

<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 la tua azione invece di inviare il modulo.

Non puoi farlo con Html.ActionLink. È necessario utilizzare Url.RouteUrle utilizzare l'URL per costruire l'elemento desiderato.

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

Un modo semplice per rendere il tuo Html.ActionLink in un pulsante (purché sia ​​collegato BootStrap - che probabilmente hai) è il seguente:

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

Anche dopo la risposta, ma ho appena riscontrato un problema simile e ho finito per scrivere la mia estensione HtmlHelper di collegamento immagine .

Puoi trovarne un'implementazione sul mio blog nel link sopra.

Ho appena aggiunto nel caso in cui qualcuno stia cercando un'implementazione.

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

Fai quello che dice Mehrdad - oppure usa l'help helper di un HtmlHelpermetodo di estensione come Stephen Walther descrive qui e crea il tuo metodo di estensione che può essere usato per rendere tutti i tuoi collegamenti.

Quindi sarà facile rendere tutti i collegamenti come pulsanti / ancore o come preferisci - e, soprattutto, puoi cambiare idea in seguito quando scopri che in realtà preferisci qualche altro modo di creare i tuoi collegamenti.

puoi creare il tuo metodo di estensione per
dare 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 <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);
    }
}

quindi usalo a tuo avviso, guarda la 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
                    )

Per Material Design Lite e 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?');" />
    }

Sembra che ci siano molte soluzioni su come creare un collegamento da visualizzare come immagine, ma nessuna che lo faccia sembrare un pulsante.

C'è solo un buon modo che ho trovato per fare questo. È un po 'confuso, ma funziona.

Quello che devi fare è creare un pulsante e un link di azione separato. Rendi invisibile il link dell'azione usando css. Quando si fa clic sul pulsante, è possibile attivare l'evento clic del collegamento 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();
 }

Potrebbe essere una seccatura fare questo ogni volta che aggiungi un link che deve apparire come un pulsante, ma ottiene il risultato desiderato.

usa FORMAZIONE

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

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

Il modo in cui l'ho fatto è avere actionLink e l'immagine separatamente. Impostare l'immagine di actionlink come nascosta, quindi aggiungere una chiamata trigger jQuery. Questo è più una soluzione alternativa.

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

Esempio di trigger:

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

Url.Action()ti fornirà l'URL nudo per la maggior parte dei sovraccarichi di Html.ActionLink, ma penso che la URL-from-lambdafunzionalità sia disponibile solo fino Html.ActionLinkad ora. Spero che aggiungano un sovraccarico simile Url.Actiona un certo punto.

Ecco come l'ho fatto senza script:

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

Lo stesso, ma con il parametro e la finestra di dialogo di 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>
}