Html.ActionLink como um botão ou uma imagem, não um link

Na versão mais recente (RC1) do ASP.NET MVC, como faço para que o Html.ActionLink seja renderizado como um botão ou uma imagem em vez de um link?

Resposta tardia, mas você pode simplificá-la e aplicar uma classe CSS ao objeto htmlAttributes.

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

e crie uma classe na sua folha de estilo

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

Eu gosto de usar Url.Action () e Url.Content () assim:

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

A rigor, o Url.Content é necessário apenas para o processamento não é realmente parte da resposta à sua pergunta.

Agradecemos a @BrianLegg por salientar que isso deve usar a nova sintaxe de exibição Razor. O exemplo foi atualizado de acordo.

Tomando emprestado a resposta de Patrick, descobri que precisava fazer isso:

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

para evitar chamar o método de postagem do formulário.

Me chame de simplista, mas eu faço:

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

E você apenas cuida do destaque do hiperlink. Nossos usuários adoram :)

Usando o bootstrap, esta é a abordagem mais curta e limpa para criar um link para uma ação do controlador que aparece como um botão dinâmico:

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

Ou para usar os auxiliares de HTML:

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

Simplesmente :

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

Uma resposta tardia, mas é assim que eu faço do meu ActionLink um botão. Estamos usando o Bootstrap em nosso projeto, pois o torna conveniente. Não importa o @T, pois é apenas um tradutor que estamos usando.

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

O exemplo acima fornece um link como este e é semelhante à imagem abaixo:

localhost:XXXXX/Firms/AddAffiliation/F0500

Na minha opinião:

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

}

Espero que isso ajude alguém

se você não quiser usar um link, use o botão você também pode adicionar uma imagem ao botão:

<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" executa sua ação em vez de enviar o formulário.

Você não pode fazer isso com Html.ActionLink. Você deve usar Url.RouteUrle usar a URL para construir o elemento que deseja.

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

Uma maneira simples de transformar seu Html.ActionLink em um botão (desde que você tenha o BootStrap conectado - o que você provavelmente possui) é assim:

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

Resposta ainda mais tarde, mas acabei encontrando um problema semelhante e acabei escrevendo minha própria extensão Image link HtmlHelper .

Você pode encontrar uma implementação no meu blog no link acima.

Apenas adicionado caso alguém esteja procurando uma implementação.

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

Para exibir um ícone com o link

Faça o que Mehrdad diz - ou use o auxiliar de URL de um HtmlHelpermétodo de extensão como Stephen Walther descreve aqui e crie seu próprio método de extensão que pode ser usado para renderizar todos os seus links.

Então será fácil renderizar todos os links como botões / âncoras ou o que você preferir - e, o mais importante, você poderá mudar de idéia mais tarde, quando descobrir que realmente prefere outra maneira de criar seus links.

você pode criar seu próprio método de extensão,
veja minha implementação

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

em seguida, use-o em sua opinião, olhe para minha ligação

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

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

Parece haver muitas soluções sobre como criar um link que é exibido como uma imagem, mas nenhuma que o faça parecer um botão.

Só há uma boa maneira de encontrar isso. É um pouco hacky, mas funciona.

O que você precisa fazer é criar um botão e um link de ação separado. Torne o link de ação invisível usando css. Quando você clica no botão, ele pode disparar o evento click do link de ação.

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

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

Pode ser difícil fazer isso toda vez que você adiciona um link que precisa se parecer com um botão, mas consegue o resultado desejado.

use FORMACTION

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

Acabei de encontrar esta extensão para fazê-lo - simples e eficaz.

O jeito que eu fiz isso é ter o actionLink e a imagem separadamente. Defina a imagem do actionlink como oculta e, em seguida, adicione uma chamada de acionador jQuery. Isso é mais uma solução alternativa.

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

Exemplo de gatilho:

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

Url.Action()você obterá o URL simples para a maioria das sobrecargas Html.ActionLink, mas acho que a URL-from-lambdafuncionalidade está disponível apenas até Html.ActionLinko momento. Espero que eles adicionem uma sobrecarga semelhante a Url.Actionem algum momento.

Foi assim que eu fiz isso sem scripts:

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

O mesmo, mas com o parâmetro e a caixa de diálogo de confirmação:

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