Html.ActionLink como un botón o una imagen, no un enlace

En la última versión (RC1) de ASP.NET MVC, ¿cómo obtengo Html.ActionLink para representar como un botón o una imagen en lugar de un enlace?

Respuesta tardía, pero podría mantenerlo simple y aplicar una clase CSS al objeto htmlAttributes.

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

y luego crea una clase en tu hoja 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 */
}

Me gusta usar Url.Action () y Url.Content () así:

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

Estrictamente hablando, el contenido de Url. Solo es necesario para la ruta no es realmente parte de la respuesta a su pregunta.

Gracias a @BrianLegg por señalar que esto debería usar la nueva sintaxis de vista Razor. El ejemplo se ha actualizado en consecuencia.

Tomando prestado de la respuesta de Patrick, descubrí que tenía que hacer esto:

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

para evitar llamar al método de publicación del formulario.

Llámame simplista, pero solo hago:

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

Y solo se ocupa del resaltado del hipervínculo. A nuestros usuarios les encanta :)

Usando bootstrap, este es el enfoque más corto y limpio para crear un enlace a una acción del controlador que aparece como un botón dinámico:

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

O para usar ayudantes HTML:

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

Así de simple :

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

Una respuesta tardía, pero así es como convierto mi ActionLink en un botón. Estamos usando Bootstrap en nuestro proyecto, ya que lo hace conveniente. No importa el @T ya que solo estamos usando un traductor.

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

Lo anterior da un enlace como este y se ve como la imagen a continuación:

localhost:XXXXX/Firms/AddAffiliation/F0500

En mi 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 esto ayude a alguien

si no quieres usar un enlace, usa el botón. también puedes agregar una imagen al botón:

<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 su acción en lugar de enviar el formulario.

No puedes hacer esto con Html.ActionLink. Debe usar Url.RouteUrly usar la URL para construir el elemento que desea.

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

Una manera simple de hacer que su Html.ActionLink se convierta en un botón (siempre que tenga BootStrap conectado, que probablemente tenga) es así:

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

Incluso una respuesta posterior, pero me encontré con un problema similar y terminé escribiendo mi propia extensión de enlace de imagen HtmlHelper .

Puedes encontrar una implementación en mi blog en el enlace de arriba.

Solo se agrega en caso de que alguien esté buscando una implementación.

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

Para mostrar un icono con el enlace

Haz lo que dice Mehrdad, o usa el asistente de URL de un HtmlHelpermétodo de extensión como el que Stephen Walther describe aquí y crea tu propio método de extensión que se puede usar para representar todos tus enlaces.

Entonces será fácil representar todos los enlaces como botones / anclajes o lo que prefiera, y, lo más importante, puede cambiar de opinión más adelante cuando descubra que realmente prefiere otra forma de hacer sus enlaces.

puedes crear tu propio método de extensión,
mira mi implementación

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

luego úsalo en tu vista mira mi llamada

 @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 Material Design Lite y 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 que hay muchas soluciones sobre cómo crear un enlace que se muestre como una imagen, pero ninguna que lo haga parecer un botón.

Solo hay una buena forma en que he encontrado para hacer esto. Es un poco hacky, pero funciona.

Lo que debe hacer es crear un botón y un enlace de acción separado. Haga que el enlace de acción sea invisible usando css. Cuando hace clic en el botón, puede activar el evento de clic del enlace de acción.

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

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

Puede ser una molestia hacer esto cada vez que agrega un enlace que debe parecerse a un botón, pero logra el resultado deseado.

use FORMACTION

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

Acabo de encontrar esta extensión para hacerlo, simple y eficaz.

La forma en que lo he hecho es tener el actionLink y la imagen por separado. Establezca la imagen actionlink como oculta y luego agregue una llamada de activación jQuery. Esto es más una solución alternativa.

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

Ejemplo de disparador:

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

Url.Action()obtendrá la URL básica para la mayoría de las sobrecargas Html.ActionLink, pero creo que la URL-from-lambdafuncionalidad solo está disponible Html.ActionLinkhasta ahora. Esperemos que agreguen una sobrecarga similar Url.Actionen algún momento.

Así es como lo hice sin secuencias de comandos:

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

Igual, pero con el parámetro y el diálogo de confirmación:

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