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

Na versão mais recente (RC1) da 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 simplificar e aplicar uma class CSS ao object htmlAttributes.

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

    e crie uma class 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:

        

    Estritamente falando, o Url.Content é necessário apenas para que o pathing não seja realmente parte da resposta à sua pergunta.

    Obrigado ao @BrianLegg por apontar que isso deve usar a nova syntax do modo de exibição Razor. Exemplo foi atualizado de acordo.

    Tomando emprestado da resposta de Patrick, descobri que tinha que fazer isso:

      

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

    Me chame de simplista, mas eu apenas faço:

     ">   

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

    Simplesmente :

      

    Uma resposta tardia, mas é assim que eu faço o meu ActionLink em um botão. Estamos usando o Bootstrap em nosso projeto, já que isso é conveniente. Não importa o @T, já que é 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 acima dá um link como este e parece que a imagem abaixo:

     localhost:XXXXX/Firms/AddAffiliation/F0500 

    imagem, demonstrando, botão, com, bootstrap

    Na minha opinião:

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

    Espero que isso ajude alguém

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

      

    type = “button” executa sua ação em vez de enviar o formulário.

    Você não pode fazer isso com o Html.ActionLink . Você deve usar Url.RouteUrl e usar o URL para construir o elemento desejado.

    Ainda mais tarde resposta, mas eu acabei de se deparar com um problema semelhante e acabou por escrever a minha própria extensão Image Link HtmlHelper .

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

    Apenas adicionado no caso de alguém estar caçando uma implementação.

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

     Click Me 

    Ou para usar os helpers HTML:

     @Html.ActionLink("Click Me", "Action", "Controller", new { @class = "btn btn-primary" }) 
     
  • Users View
  • Para exibir um ícone com o link

    Faça o que Mehrdad disser – ou use o url helper de um método de extensão HtmlHelper como Stephen Walther descreve aqui e faça 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ê pode mudar de ideia mais tarde quando descobrir que realmente prefere alguma outra maneira de fazer seus links.

    você pode criar seu próprio método de extensão
    dê uma olhada na 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  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); } } 

    em seguida, usá-lo em sua opinião, olhe minha chamada

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

    Uma maneira simples de fazer o seu Html.ActionLink em um botão (contanto que você tenha Bootstrap plugado – o que você provavelmente tem) é assim:

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

    Parece haver muitas soluções sobre como criar um link que é exibido como uma imagem, mas nenhum que faz com que pareça ser um botão.

    Só existe uma boa maneira que encontrei para fazer isso. É um pouco hacky, mas funciona.

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

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

    Pode ser uma dor na bunda para fazer isso toda vez que você adicionar um link que precisa se parecer com um botão, mas consegue o resultado desejado.

    usar FORMACÇÃO

      

    Apenas encontrei esta extensão para fazê-lo – simples e eficaz.

    A maneira como fiz isso é ter o actionLink e a imagem separadamente. Defina a imagem do link de ação como oculto e, em seguida, inclua uma chamada de acionamento do jQuery. Isso é mais uma solução alternativa.

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

    Exemplo de gatilho:

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

    Url.Action() obterá o URL Html.ActionLink para a maioria das sobrecargas do Html.ActionLink , mas acho que a funcionalidade URL-from-lambda só está disponível por meio do Html.ActionLink até o momento. Espero que eles adicionem uma sobrecarga semelhante ao Url.Action em algum momento.

    Foi assim que eu fiz isso sem script:

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

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

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