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


326

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?


13
Com o MVC 3.0, você pode tentar desta forma <a href="@Url.Action("Index","Home")"> <img src = "@ Url.Content (" ~ / Themes / Gold / images / try-onit .png ")" alt = "Home" /> </a> Mais informações, Experimente este mycodingerrors.blogspot.com/2012/08/…
lasantha

Depois de passar algumas horas fazendo isso "corretamente" (por exemplo, estendendo-o AjaxHelpercom um ActionButton), pensei em compartilhá-lo abaixo.
Gone Coding

5
É hilário para mim que sete anos depois, essa pergunta ainda esteja sendo votada. Aparentemente, em 2016 ainda não existe uma maneira simples e intuitiva de fazer isso.
Ryan Lundy

Respostas:


330

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 */
}

2
Isso funciona perfeitamente para mim, embora seja necessário substituir null por um objeto routeValues, dependendo de onde você está vinculando.
10139 David Conlisk

1
Como você lida com a string do nome do botão que você atribui no parâmetro do link de ação então. Isto não funcionou para mim.
ZVenue 22/07

1
Mesmo problema, para mim também, o parâmetro linkText não pode ser nulo ou vazio e, no entanto, estou procurando uma substituição de botão de imagem.
Ant Swift

5
isso é ruim em todos os aspectos, ele não funciona em todos os navegadores e você está usando um efeito colateral como funcionalidade. bruxa faz com que seja uma prática muito ruim, não use. Só porque funciona, não a torna uma boa solução.
Pedro.The.Kid

4
@Mark - a solução jslatts é a correta e não, não funcionará no IE11 e apenas porque funciona nos navegadores atuais, é uma prática muito ruim, pois você está usando um efeito colateral como funcionalidade e se a implementação alterar o efeito colateral PARARÁ trabalhando.
precisa saber é o seguinte

350

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.


Se você quer um html ajudante para que: fsmpi.uni-bayreuth.de/~dun3/archives/...
Tobias Hertkorn

6
Isso funciona perfeitamente. Observe que no MVC5 a sintaxe mudou e deve ser <a href='@Url.Action("MyAction", "MyController")'> e <img src = '@ Url.Content ("~ / Content / Images / MyLinkImage.png ") '/>. Graças
BrianLegg

produziu com texto NAN? o que fazer
Basheer AL-MOMANI

94

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.


51

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


1
@Bem uma razão para isso não ter muitos votos é que foi respondida muito mais tarde do que outras respostas. Eu estava prestes a votar, mas testei o que o @ Slider345 disse e posso confirmar que isso não funciona como desejado no IE 7 ou 8. Em qualquer caso, se você optar por usá-lo, não se esqueça de definir o css de o link (pairar e ativo) text-decoration:nonepara se livrar desse sublinhado estúpido. Isso é necessário para alguns navegadores (Firefox 11.0, com certeza).
Yetti

23
Mas você não deve aninhar botões dentro de um elemento, vice-versa. Pelo menos não é uma forma válida de fazê-lo em HTML 5
Patrick Magee

1
Sim, isso não funciona nem no IE10, pelas razões que Patrick explica.
Ciaran Gallagher

Nenhum aninhamento de botões dentro do elemento de ação. stackoverflow.com/questions/6393827/…
Papa Burgundy '

18

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

Eu tenho que concordar com a limpeza. 100.
Chris Catignani

15

Simplesmente :

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

isso ainda invoca o método post da visualização para mim, alguma ideia do porquê?
DevDave

Esta não é uma sintaxe válida. O IE10 lança um erro crítico de JavaScript com esta linha "SCRIPT5017: erro de sintaxe na expressão regular".
Ciaran Gallagher

Boa resposta, mas sem envolver o onclickconteúdo com location.href(so onclick="location.href='@Url.Action(....)'"), não consegui fazê-lo funcionar.
SharpC

15

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

botão demonstrativo de imagem com bootstrap

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


1
Works cool! agradável e simples, o htmlAttribute new { @class="btn btn-primary" })+ um
IRF

15

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.


12

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


Oi, desculpe, eu sou muito novo para MVC. Como eu usaria o Url.RouteURL para obter a imagem?
uridium

O que eu quis dizer é que você não pode gerar uma tag img aninhada (ou tag de botão) com uma simples chamada para o ActionLink. É claro que o estilo CSS da tag a é uma maneira de contorná-la, mas mesmo assim você não pode obter uma tag img.
Mehrdad Afshari

9

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


Isso funcionou para mim no IE10. Essa é uma boa solução se você simplesmente deseja usar um botão em vez de uma imagem, embora o uso de JavaScript embutido para um link simples provavelmente não seja o ideal.
Ciaran Gallagher

1
(e só para ter certeza, eu testei no Opera, Safari, Chrome e Firefox e funcionou)
Ciaran Gallagher

9

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

8

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.


3
O link parece estar inativo agora
d219

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


4

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.


3

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
                    )

2

Para o Material Design Lite e MVC:

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

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

1

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.


1

use FORMACTION

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


0

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

0

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.


0

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>
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.