[Asp.net-Mvc] Html.ActionLink como un botón o una imagen, no como un enlace



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>

Estrictamente hablando, el Contenido de la URL solo es necesario para que el recorrido no sea 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. El ejemplo se ha actualizado en consecuencia.

Question

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?




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

Lo mismo, 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>
}



si no quiere usar un enlace, use 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.




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




Usando bootstrap este es el enfoque más corto y limpio para crear un enlace a una acción de 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 helpers Html:

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



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




Llámame simplista, pero acabo de hacer:

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

Y tú solo cuídate de resaltar el hipervínculo. Nuestros usuarios lo adoran :)




La forma en que lo hice es tener el actionLink y la imagen por separado. Establezca la imagen de actionlink como oculta y luego agregue una llamada de 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 gatillo:

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



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



usa FORMACTION

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



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





Links