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

Question

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

Answer 1

respuesta tardía pero podría simplemente mantener la sencillez y aplicar una clase CSS a los htmlAttributes objeto.

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

y luego crear una clase en su 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 */
}

Answer 2

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

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

En sentido estricto, la Url.Content sólo es necesaria para encauzamiento no es realmente parte de la respuesta a su pregunta.

Gracias a @BrianLegg por señalar que este debe utilizar la nueva sintaxis Razor vista. Ejemplo se ha actualizado en consecuencia.

Answer 3

Préstamos de la respuesta de Patrick, me di cuenta que tenía que hacer esto:

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

para evitar llamar a procedimiento de después del formulario.

Answer 4

Me llaman simplista, pero acabo de hacer:

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

Y que acaba de hacerse cargo de lo más destacado de hipervínculo. Nuestros usuarios les encanta:)

Answer 5

Simplemente:

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

Answer 6

Una respuesta tardía pero esto es como me gano la ActionLink en un botón. Estamos usando Bootstrap en nuestro proyecto, ya que hace que sea conveniente. No importa el @T ya que su única un traductor que estamos usando.

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

Lo anterior constituye un enlace como este y se ve que el cuadro abajo:

localhost:XXXXX/Firms/AddAffiliation/F0500

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

Answer 7

Si no desea usar un enlace, utilizar el botón. usted puede agregar la imagen al botón, así:

<button type="button" onclick="location.href='@Url.Action("Create", "Company")'" >
   Create New
   <img alt="New" title="New" src="~/Images/Button/plus.png">
</button>

tipo "botón" = realiza su acción en lugar de la presentación del modelo.

Answer 8

No se puede hacer esto con Html.ActionLink. Debe utilizar Url.RouteUrl y utilizar el URL para construir el elemento que desee.

Answer 9

Uso de arranque este es el enfoque más corta y más 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" })

Answer 10

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

Answer 11

Incluso más tarde la respuesta, pero me acabo de encontrar con un problema similar y terminé de escribir mi propia enlace imagen extensión HtmlHelper .

Puede encontrar una implementación de la misma en mi blog en el enlace anterior.

Sólo añadido en caso de que alguien está persiguiendo a una implementación.

Answer 12

Una manera simple de hacer que su Html.ActionLink en un botón (siempre y cuando tenga BootStrap enchufado - lo que es probable que tenga) es la siguiente:

@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 mostrar un icono con el enlace

Answer 14

Haz lo que dice Mehrdad - o utilizar el asistente de url de un método de extensión HtmlHelper como Stephen Walther describe aquí y hacer su propio método de extensión que puede ser utilizado para hacer todos sus enlaces.

A continuación, será fácil de hacer que todos los enlaces como botones / anclas o lo que usted prefiera -. Y, lo más importante, se puede cambiar de opinión más tarde, cuando se entera de que en realidad se prefiere alguna otra manera de hacer que sus enlaces

Answer 15

puede crear su propio método de extensión
gire a mirar mi aplicació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);
    }
}

a continuación, utilizarlo en su View! Vistazo a 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
                    )

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 que hay un montón de soluciones sobre cómo creó un enlace que se muestra como una imagen, pero ninguno que hacen que parezca ser un botón.

Sólo hay buena manera que he encontrado para hacer esto. Es un poco hacky, pero funciona.

Lo que tienes que hacer es crear un botón y un enlace de acción separada. Establecer el vínculo acción invisible usando CSS. Al hacer clic en el botón, puede desencadenar el evento 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 un dolor en el trasero que hacer esto cada vez que se agrega un enlace que necesita para parecerse a un botón, pero sí lograr el resultado deseado.

Answer 18

utilizar formAction

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

Answer 19

Sólo encontrados esta extensión hacerlo -. sencilla y eficaz

Answer 20

La forma en que he hecho es tener la ActionLink y la imagen por separado. Establecer la imagen como ocultos ActionLink y después se añadió una llamada gatillo jQuery. Esto es más de una solución.

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

ejemplo de disparo:

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

Answer 21

Url.Action() le conseguirá la URL desnuda para la mayoría de las sobrecargas de Html.ActionLink, pero creo que la funcionalidad URL-from-lambda sólo está disponible a través Html.ActionLink hasta ahora. Esperemos que añaden una sobrecarga similar a Url.Action en algún momento.

Answer 22

Esta es la forma en que 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>
}

Lo mismo, pero con diálogo de parámetros y 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>
}

Answer 23

Para el material de diseño Lite y MVC:

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