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


326

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?


13
Con MVC 3.0 puede probar de esta manera <a href="@Url.Action("Index","Home")"> <img src = "@ Url.Content (" ~ / Themes / Gold / images / try-onit .png ")" alt = "Inicio" /> </a> Más información, pruebe mycodingerrors.blogspot.com/2012/08/…
lasantha

Después de pasar unas horas haciendo esto "correctamente" (por ejemplo, extendiendo AjaxHelpercon un ActionButton), pensé en compartirlo a continuación.
Se fue la codificación el

55
Es gracioso para mí que siete años después, esta pregunta todavía está recibiendo votos positivos. Aparentemente, en 2016 todavía no hay una forma simple e intuitiva de hacer esto.
Ryan Lundy

Respuestas:


330

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

2
Esto funciona perfectamente para mí, aunque es posible que deba reemplazar nulo con un objeto routeValues ​​dependiendo de dónde se esté vinculando.
David Conlisk

1
¿Cómo maneja la cadena de nombre de Botón que asigna en el parámetro de enlace de acción? Esto no funcionó para mí.
ZVenue

1
El mismo problema, para mí también, el parámetro linkText no puede ser nulo o una cadena vacía, sin embargo, estoy buscando un reemplazo de botón de imagen.
Ant Swift

55
eso es malo en todo tipo de formas, no funciona en todos los navegadores y está utilizando un efecto secundario como funcionalidad. la bruja lo convierte en una muy mala práctica, no lo uses. El hecho de que funcione no lo convierte en una buena solución.
Pedro The.Kid

44
@Mark: la solución jslatts es la correcta y no, no funcionará en IE11 y solo porque funciona en los navegadores actuales es una práctica muy mala, ya que está utilizando un efecto secundario como funcionalidad y si la implementación cambia, el efecto secundario se detendrá trabajando.
Pedro.The.Kid

350

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.


Si desea un ayudante html para eso: fsmpi.uni-bayreuth.de/~dun3/archives/…
Tobias Hertkorn

66
Esto funciona a la perfección. Solo tenga en cuenta que en MVC5 la sintaxis ha cambiado y debe ser <a href='@Url.Action("MyAction", "MyController")'> y <img src = '@ Url.Content ("~ / Content / Images / MyLinkImage.png ") '/>. Gracias
BrianLegg

lo produjo con texto NAN? qué hacer
Basheer AL-MOMANI

94

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.


51

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


1
@Ben una razón por la que esto no tiene muchos votos es que se respondió mucho más tarde que otras respuestas. Estaba a punto de votarlo, pero probé lo que dijo @ Slider345 y puedo confirmar que esto no funciona como se desea en IE 7 u 8. En cualquier caso, si elige usarlo, no olvide configurar el CSS de el enlace (flotante y activo) para text-decoration:nonedeshacerse de ese estúpido subrayado. Esto es necesario para algunos navegadores (Firefox 11.0 seguro).
Yetti

23
Pero se supone que no debe anidar botones dentro de un elemento, viceversa. Al menos no es una forma válida de hacerlo en HTML 5
Patrick Magee

1
Sí, esto no funciona incluso en IE10, por las razones que Patrick explica.
Ciaran Gallagher

No se anidan botones dentro del elemento de acción. stackoverflow.com/questions/6393827/…
Papa Burgundy

18

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

Tengo que estar de acuerdo con la limpieza. 100.
Chris Catignani

15

Así de simple :

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

esto todavía invoca el método de publicación de la vista para mí, ¿alguna idea de por qué?
DevDave

Esta no es una sintaxis válida. IE10 arroja un error crítico de JavaScript con esta línea, "SCRIPT5017: error de sintaxis en la expresión regular".
Ciaran Gallagher

Buena respuesta, pero sin rodear el onclickcontenido con location.href(entonces onclick="location.href='@Url.Action(....)'") no pude hacerlo funcionar.
SharpC

15

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

imagen que muestra el botón con bootstrap

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


1
Funciona bien! agradable y simple, el htmlAttribute new { @class="btn btn-primary" })+ one
Irf

15

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.


12

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


Hola, lo siento, soy muy nuevo en MVC. ¿Cómo usaría Url.RouteURL para lograr la imagen?
uriDium

Lo que quise decir es que no puede generar una etiqueta img anidada (o etiqueta de botón) con una simple llamada a ActionLink. Por supuesto, el estilo CSS de una etiqueta en sí es una forma de evitarlo, pero no obstante, no puede obtener una etiqueta img.
Mehrdad Afshari

9

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


Esto funcionó para mí en IE10. Esta es una buena solución si simplemente desea usar un botón en lugar de una imagen, aunque tener que usar JavaScript en línea para un enlace simple probablemente no sea lo ideal.
Ciaran Gallagher

1
(y solo para estar seguro, lo probé en Opera, Safari, Chrome y Firefox y funcionó)
Ciaran Gallagher

9

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

8

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.


3
El enlace parece estar inactivo ahora
d219

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


4

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.


3

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
                    )

2

Para Material Design Lite y 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 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.


1

use FORMACTION

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


0

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

0

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.


0

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>
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.