asp.net-mvc - net - html.actionlink bootstrap button

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 puedo hacer que Html.ActionLink se muestre como un botón o una imagen en lugar de un enlace?

Answer 1

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

Answer 2

Así de simple :

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

Answer 3

Así es como lo hice sin scripting:

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

Lo mismo, pero con parámetro y 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>
}

Answer 4

Haga lo que Mehrdad dice, o use el ayudante de URL de un método de extensión HtmlHelper como lo describe Stephen Walther here y HtmlHelper su propio método de extensión que se puede usar para representar todos sus 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 en realidad prefiere otra forma de hacer sus enlaces.

Answer 5

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.

Se acaba de agregar en caso de que alguien esté buscando una implementación.

Answer 6

La forma en que lo he hecho es tener el enlace de acción y la imagen por separado. Establezca la imagen del enlace de acción como oculta y luego agregue una llamada de activación 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 activación:

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

Answer 7

Llámame simplista, pero acabo de hacer:

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

Y solo te encargas del resaltado hipervínculo. A nuestros usuarios les encanta :)

Answer 8

Me gusta usar Url.Action () y Url.Content () de esta manera:

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

Hablando estrictamente, la Url. El contenido solo es necesario para la revisión 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 la vista Razor. Ejemplo se ha actualizado en consecuencia.

Answer 9

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

Answer 10

Para Material Design Lite y MVC:

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

Answer 11

Parece que hay muchas soluciones sobre cómo crear un enlace que se muestra como una imagen, pero ninguna que lo haga parecer un botón.

Sólo hay una 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 separado. Hacer el enlace de acción invisible usando css. Cuando hace clic en el botón, puede disparar 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 agregue un enlace que debe parecerse a un botón, pero logra el resultado deseado.

Answer 12

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

entonces ú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
)

Answer 13

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

<%= 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 14

Si no quieres usar un enlace, usa el botón. También puede 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.

Answer 15

Tomando prestado de la respuesta de Patrick, encontré 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 envío del formulario.

Answer 16

Una forma sencilla de convertir su Html.ActionLink en un botón (siempre y cuando tenga BootStrap conectado, que probablemente tenga) es la siguiente:

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

Answer 17

Una respuesta tardía, pero así es como convierto mi ActionLink en un botón. Estamos usando Bootstrap en nuestro proyecto porque lo hace conveniente. No importa el @T ya que solo estamos utilizando 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 de abajo:

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

Answer 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 utilizar ayudantes HTML:

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

Answer 19

utilizar FORMACTION

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

Answer 20

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

Answer 21

Url.Action() le proporcionará la URL Url.Action() para la mayoría de las sobrecargas de Html.ActionLink , pero creo que la funcionalidad URL-from-lambda solo está disponible a través de Html.ActionLink hasta el momento. Esperemos que agreguen una sobrecarga similar a Url.Action en algún momento.

Answer 22

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

Para visualizar un icono con el enlace.

Answer 23

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