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

Question

Na mais recente (RC1) lançamento do ASP.NET MVC, como faço para obter Html.ActionLink para tornar como um botão ou uma imagem em vez de um link?

Answer 1

resposta tardia, mas você poderia apenas mantê-la simples e aplicar uma classe CSS para o objeto htmlAttributes.

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

e, em seguida, criar uma classe em 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 */
}

Answer 2

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

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

A rigor, o Url.Content só é necessária para pathing não é realmente parte da resposta à sua pergunta.

Graças à @BrianLegg por apontar que este deve usar a nova sintaxe vista Navalha. Exemplo foi actualizados em conformidade.

Answer 3

Contracção de resposta de Patrick, eu descobri que eu tinha que fazer isso:

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

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

Answer 4

Call me simplista, mas eu só fazer:

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

E você apenas cuidar do destaque do hyperlink. Nossos usuários adoram:)

Answer 5

Simplesmente:

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

Answer 6

Uma resposta tardia, mas é assim que eu faço o meu ActionLink em um botão. Estamos usando Bootstrap em nosso projeto, pois faz com que seja conveniente. Não importa o @T desde o seu único 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

No meu ponto de vista:

@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

Answer 7

Se você não quiser usar um link, botão de uso. você pode adicionar uma imagem de botão, bem como:

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

Answer 8

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

Answer 9

Usando inicialização esta é a abordagem mais curto e mais limpo para criar um link para uma ação de 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 ajudantes HTML:

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

Answer 10

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

Answer 11

Mesmo resposta mais tarde, mas eu apenas corri para um problema semelhante e acabou escrevendo minha própria link imagem de extensão HtmlHelper .

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

Apenas acrescentou no caso de alguém está caçando uma implementação.

Answer 12

Uma maneira simples de fazer fazer a sua Html.ActionLink em um botão (contanto que você tem BootStrap conectada - que você provavelmente tem) é assim:

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

Answer 13

<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

Answer 14

Do que Mehrdad diz - ou usar o ajudante url de um método de extensão HtmlHelper como Stephen Walther descreve aqui e fazer o seu próprio método de extensão que pode ser usado para processar todos os seus links.

Em seguida, ele vai ser fácil para renderizar todos os links como botões / âncoras ou o que você preferir -. E, mais importante, você pode mudar de idéia mais tarde, quando você descobrir que você realmente preferem alguma outra maneira de fazer suas ligações

Answer 15

Você pode criar seu próprio método de extensão
tomar olhada no meu 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, usá-lo em sua visão take olhada no meu 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
                    )

Answer 16

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

Answer 17

Parece haver muitas soluções sobre como criou um link que é exibido como uma imagem, mas nenhum que torná-lo parece ser um botão.

Há apenas boa maneira que eu encontrei para fazer isso. É um pouco hacky, mas funciona.

O que você tem a fazer é criar um botão e um link ação separada. Faça o link de ação invisível usando css. Quando você clica no botão, ele pode acionar o evento clique 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 uma dor na bunda para fazer isso toda vez que você adicionar um link que necessidades para se parecer com um botão, mas não conseguir o resultado desejado.

Answer 18

uso FORMACTION

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

Answer 19

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

Answer 20

A maneira que eu tenho feito é ter o actionlink ea imagem separadamente. Definir a imagem actionlink como oculto e, em seguida, adicionou-se uma chamada gatilho jQuery. Esta é mais uma solução alternativa.

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

Gatilho exemplo:

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

Answer 21

Url.Action() você irá obter o URL nua para a maioria das sobrecargas de Html.ActionLink, mas acho que a funcionalidade URL-from-lambda só está disponível através Html.ActionLink até agora. Esperemos que eles vão adicionar uma sobrecarga semelhante ao Url.Action em algum ponto.

Answer 22

Isto é como eu fiz isso sem script:

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

O mesmo, mas com diálogo parâmetro e 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>
}

Answer 23

Para material projeto Lite e MVC:

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