asp.net-mvc Html.ActionLink como un botón o una imagen, no un enlace





11 Answers

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.

asp.net-mvc actionlink

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?




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




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




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>




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




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.




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



utilizar FORMACTION

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



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



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





Related