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?
AjaxHelper
con un ActionButton
), pensé en compartirlo a continuación.
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?
AjaxHelper
con un ActionButton
), pensé en compartirlo a continuación.
Respuestas:
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.
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 :)
text-decoration:none
deshacerse de ese estúpido subrayado. Esto es necesario para algunos navegadores (Firefox 11.0 seguro).
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>
onclick
contenido con location.href
(entonces onclick="location.href='@Url.Action(....)'"
) no pude hacerlo funcionar.
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
new { @class="btn btn-primary" })
+ one
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.RouteUrl
y usar la URL para construir el elemento que desea.
<button onclick="location.href='@Url.Action("NewCustomer", "Customers")'">Checkout >></button>
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 HtmlHelper
mé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.
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-lambda
funcionalidad solo está disponible Html.ActionLink
hasta ahora. Esperemos que agreguen una sobrecarga similar Url.Action
en 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>
}