web-dev-qa-db-fra.com

Html.ActionLink comme un bouton ou une image, pas un lien

Dans la dernière version (RC1) d'ASP.NET MVC, comment puis-je obtenir le rendu de HTML.ActionLink sous forme de bouton ou d'image à la place d'un lien?

asp.net-mvcactionlink
311
Ryan Lundy

Réponse tardive, mais vous pouvez rester simple et appliquer une classe CSS à l'objet htmlAttributes.

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

puis créez une classe dans votre feuille de style

a.classname
{
    background: url(../Images/image.gif) no-repeat top left;
     display: block;
     width: 150px;
     height: 150px;
     text-indent: -9999px; /* hides the link text */
}
316
Mark

J'aime utiliser Url.Action () et Url.Content () comme ceci:

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

Strictement parlant, le contenu de l'adresse URL n'est nécessaire que pour le cheminement ne fait pas vraiment partie de la réponse à votre question.

Merci à @BrianLegg pour avoir signalé que cela devrait utiliser la nouvelle syntaxe de la vue Razor. L'exemple a été mis à jour en conséquence.

341
jslatts

Empruntant à la réponse de Patrick, j'ai constaté que je devais faire ceci:

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

pour éviter d'appeler la méthode post du formulaire.

90
DevDave

Appelez-moi simpliste, mais je fais juste:

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

Et vous prenez juste soin de mettre en évidence le lien hypertexte. Nos utilisateurs l'adorent :)

50
agAus

Une réponse tardive, mais voici comment je transforme mon ActionLink en un bouton. Nous utilisons Bootstrap dans notre projet car cela le rend pratique. Peu importe le @T puisque c'est seulement un traducteur que nous utilisons.

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

Ce qui précède donne un lien comme celui-ci et il ressemble à l'image ci-dessous:

localhost:XXXXX/Firms/AddAffiliation/F0500

picture demonstrating button with bootstrap

À mon avis:

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

}

J'espère que ça aide quelqu'un

15
Emperor 2052

Tout simplement :

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

si vous ne voulez pas utiliser un lien, utilisez le bouton. vous pouvez aussi ajouter une image au bouton:

<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" exécute votre action au lieu de soumettre le formulaire.

14
Amir Chatrbahr

Vous ne pouvez pas faire cela avec Html.ActionLink. Vous devez utiliser Url.RouteUrl et utiliser l'URL pour construire l'élément souhaité.

12
Mehrdad Afshari

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

9
Jiri HWeb Horalek

À l’aide de bootstrap, c’est l’approche la plus courte et la plus propre pour créer un lien vers une action du contrôleur qui apparaît sous la forme d’un bouton dynamique:

<a href='@Url.Action("Action", "Controller")' class="btn btn-primary">Click Me</a>

Ou utiliser des aides HTML:

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

Même une réponse plus tardive, mais je viens de rencontrer un problème similaire et j'ai fini par écrire ma propre extension du lien d'image HtmlHelper . 

Vous pouvez en trouver une implémentation sur mon blog dans le lien ci-dessus. 

Vient d’être ajouté au cas où quelqu'un recherche une implémentation.

8
Mirko

Un moyen simple de transformer votre Html.ActionLink en un bouton (tant que BootStrap est connecté - ce que vous avez probablement) est le suivant:

@Html.ActionLink("Button text", "ActionName", "ControllerName", new { @class = "btn btn-primary" })
6
haugan
<li><a href="@Url.Action(  "View", "Controller" )"><i class='fa fa-user'></i><span>Users View</span></a></li>

Pour afficher une icône avec le lien

5
Andrew Day

Faites ce que Mehrdad dit - ou utilisez l'URL helper à partir d'une méthode d'extension HtmlHelper telle que Stephen Walther décrit ici / et créez votre propre méthode d'extension pouvant être utilisée pour restituer tous vos liens.

Ensuite, il sera facile de rendre tous les liens sous forme de boutons/ancres ou selon votre préférence - et, plus important encore, vous pourrez changer d'avis plus tard, lorsque vous découvrirez que vous préférez une autre façon de créer vos liens.

4
mookid8000

vous pouvez créer votre propre méthode d'extension
regarde ma mise en oeuvre 

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

puis utilisez-le à votre avis, regardez mon appel

 @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
                    )
3
Basheer AL-MOMANI
@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?');" />
    }
1
user477864

Il semble y avoir beaucoup de solutions sur la façon de créer un lien qui s'affiche sous forme d'image, mais aucune ne le fait apparaître comme un bouton.

Il n'y a que le bon moyen que j'ai trouvé pour faire cela. C'est un peu hacky, mais ça marche.

Ce que vous devez faire est de créer un bouton et un lien d'action séparé. Rendre le lien d'action invisible à l'aide de css. Lorsque vous cliquez sur le bouton, l'événement click du lien d'action peut être déclenché.

<input type="button" value="Search" onclick="Search()" />
 @Ajax.ActionLink("Search", "ActionName", null, new AjaxOptions {}, new { id = "SearchLink", style="display:none;" })

function Search(){
    $("#SearchLink").click();
 }

Cela peut être pénible de le faire chaque fois que vous ajoutez un lien qui doit ressembler à un bouton, mais cela permet d'obtenir le résultat souhaité.

1
bsayegh

utiliser FORMACTION

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

Url.Action() vous donnera l'URL nue pour la plupart des surcharges de Html.ActionLink, mais je pense que la fonctionnalité URL-from-lambda n'est disponible que via Html.ActionLink jusqu'à présent. Espérons qu'ils ajouteront une surcharge similaire à Url.Action à un moment donné.

0
Dhanasekar

Je viens de trouver cette extension pour le faire - simple et efficace.

0
Shaul Behr

Pour Material Design Lite et MVC:

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

Pour ce faire, l’actionLink et l’image doivent être séparées . Définissez l’image actionlink comme étant masquée .__, puis ajoutez un appel de déclencheur jQuery. C'est plus une solution de contournement.

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

Exemple de déclencheur:

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

Voici comment je l'ai fait sans script:

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

Idem, mais avec paramètres et dialogue de confirmation:

@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>
}
0
Jevgenij Martynenko