Html.ActionLink sous forme de bouton ou d'image, pas de lien


326

Dans la dernière version (RC1) d'ASP.NET MVC, comment obtenir le rendu de Html.ActionLink sous forme de bouton ou d'image au lieu d'un lien?


13
Avec MVC 3.0, vous pouvez essayer de cette façon <a href="@Url.Action("Index","Home")"> <img src = "@ Url.Content (" ~ / Themes / Gold / images / try-onit .png ")" alt = "Accueil" /> </a> Plus d'informations, essayez ceci mycodingerrors.blogspot.com/2012/08/…
lasantha

Après avoir passé quelques heures à le faire "correctement" (par exemple en l'étendant AjaxHelperavec un ActionButton), j'ai pensé le partager ci-dessous.
Fin du codage le

5
C'est hilarant pour moi que sept ans plus tard, cette question suscite toujours des votes positifs. Apparemment, en 2016, il n'y a toujours pas de moyen simple et intuitif de le faire.
Ryan Lundy

Réponses:


330

Réponse tardive mais vous pouvez simplement 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 */
}

2
Cela fonctionne parfaitement pour moi, mais vous devrez peut-être remplacer null par un objet routeValues ​​en fonction de l'endroit où vous vous liez.
David Conlisk

1
Comment gérez-vous alors la chaîne de nom de bouton que vous affectez dans le paramètre de lien d'action. Cela n'a pas fonctionné pour moi.
ZVenue

1
Même problème, pour moi aussi, le paramètre linkText ne peut pas être une chaîne vide ou vide, mais je recherche un remplacement de bouton d'image.
Ant Swift

5
c'est mauvais de toutes sortes de façons, cela ne fonctionne pas dans tous les navigateurs et vous utilisez un effet secondaire comme fonctionnalité. qui en fait une très mauvaise pratique, ne l'utilisez pas. Ce n'est pas parce que cela fonctionne que c'est une bonne solution.
Pedro.The.Kid

4
@Mark - La solution jslatts est la bonne et non, elle ne fonctionnera pas dans IE11 et juste parce qu'elle fonctionne dans les navigateurs actuels, c'est une très mauvaise pratique car vous utilisez un effet secondaire comme fonctionnalité et si l'implémentation change, l'effet secondaire s'arrêtera travail.
Pedro.The.Kid

350

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 parler, le contenu Url.Content uniquement nécessaire pour le cheminement ne fait pas vraiment partie de la réponse à votre question.

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


Si vous voulez un assistant html pour cela: fsmpi.uni-bayreuth.de/~dun3/archives/…
Tobias Hertkorn

6
Cela fonctionne parfaitement. Notez simplement que dans MVC5, la syntaxe a changé et devrait être <a href='@Url.Action("MyAction", "MyController")'> et <img src = '@ Url.Content ("~ / Content / Images / MyLinkImage.png ") '/>. Merci
BrianLegg

il l'a produit avec du texte NAN? que faire
Basheer AL-MOMANI

94

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.


51

Appelez-moi simpliste, mais je fais juste:

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

Et vous vous occupez simplement de la surbrillance de l'hyperlien. Nos utilisateurs l'adorent :)


1
@Ben l'une des raisons pour lesquelles cela n'a pas beaucoup de votes est qu'il a été répondu beaucoup plus tard que les autres réponses. J'étais sur le point de voter, mais j'ai testé ce que @ Slider345 a dit et je peux confirmer que cela ne fonctionne pas comme souhaité dans IE 7 ou 8. Dans tous les cas, si vous choisissez de l'utiliser, n'oubliez pas de définir le CSS de le lien (planer et actif) text-decoration:nonepour se débarrasser de ce stupide soulignement. Cela est nécessaire pour certains navigateurs (Firefox 11.0 à coup sûr).
Yetti

23
Mais vous n'êtes pas censé imbriquer des boutons à l'intérieur d'un élément, vice versa. Au moins, ce n'est pas une façon valide de le faire en HTML 5
Patrick Magee

1
Oui, cela ne fonctionne même pas dans IE10, pour les raisons que Patrick explique.
Ciaran Gallagher

Aucune imbrication de boutons à l'intérieur de l'élément d'action. stackoverflow.com/questions/6393827/…
Papa Burgundy

18

En utilisant bootstrap, c'est l'approche la plus courte et la plus propre pour créer un lien vers une action de contrôleur qui apparaît comme un bouton dynamique:

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

Ou pour utiliser des assistants HTML:

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

Je dois être d'accord avec la propreté. 100.
Chris Catignani

15

Tout simplement :

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

cela invoque toujours la méthode post de la vue pour moi, une idée pourquoi?
DevDave

Ce n'est pas une syntaxe valide. IE10 génère une erreur critique JavaScript avec cette ligne, "SCRIPT5017: erreur de syntaxe dans l'expression régulière".
Ciaran Gallagher

Bonne réponse, mais sans entourer le onclickcontenu de location.href(donc onclick="location.href='@Url.Action(....)'") je ne pouvais pas le faire fonctionner.
SharpC

15

Une réponse tardive, mais c'est ainsi que je transforme mon ActionLink en bouton. Nous utilisons Bootstrap dans notre projet car cela le rend pratique. Peu importe le @T car ce n'est qu'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

image montrant le bouton avec 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 cela aide quelqu'un


1
Fonctionne cool! agréable et simple, le htmlAttribute new { @class="btn btn-primary" })+ one
Irf

15

si vous ne souhaitez pas utiliser de lien, utilisez le bouton. vous pouvez également 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.


12

Vous ne pouvez pas faire ça avec Html.ActionLink. Vous devez utiliser Url.RouteUrlet utiliser l'URL pour construire l'élément que vous souhaitez.


Salut, désolé, je suis très nouveau sur MVC. Comment utiliser l'URL.RouteURL pour obtenir l'image?
uriDium

Ce que je voulais dire, c'est que vous ne pouvez pas générer de balise img imbriquée (ou balise de bouton) avec un simple appel à ActionLink. Bien sûr, le style CSS de la balise elle-même est un moyen de la contourner, mais vous ne pouvez pas obtenir une balise img.
Mehrdad Afshari

9

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


Cela a fonctionné pour moi sur IE10. C'est une bonne solution si vous souhaitez simplement utiliser un bouton plutôt qu'une image, bien que devoir utiliser JavaScript en ligne pour un lien simple ne soit probablement pas idéal.
Ciaran Gallagher

1
(et juste pour être sûr, je l'ai testé sur Opera, Safari, Chrome et Firefox et cela a fonctionné)
Ciaran Gallagher

9

Un moyen simple de faire de votre Html.ActionLink un bouton (tant que vous avez BootStrap branché - que vous avez probablement) est comme ceci:

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

8

Réponse encore plus tard, mais je suis juste tombé sur un problème similaire et j'ai fini par écrire ma propre extension HtmlHelper de lien d'image .

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

Juste ajouté au cas où quelqu'un traquerait une implémentation.


3
Le lien semble être inactif maintenant
d219

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


4

Faites ce que Mehrdad dit - ou utilisez l'assistant d'URL d'une HtmlHelperméthode d'extension comme Stephen Walther le décrit ici et créez votre propre méthode d'extension qui peut être utilisée pour rendre 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 réellement une autre façon de créer vos liens.


3

vous pouvez créer votre propre méthode d'extension
regardez mon implémentation

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
                    )

2

Pour Material Design Lite et MVC:

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

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

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 qui le fait apparaître comme un bouton.

Il n'y a qu'un bon moyen que j'ai trouvé pour le faire. 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é. Rendez le lien d'action invisible à l'aide de css. Lorsque vous cliquez sur le bouton, il peut déclencher l'événement de clic du lien d'action.

<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 donne le résultat souhaité.


1

utiliser FORMACTION

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


0

La façon dont je l'ai fait est d'avoir l'actionLink et l'image séparément. Définissez l'image du lien d'action comme masquée, puis ajoutez un appel de déclencheur jQuery. Il s'agit plus d'une solution de contournement.

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

Exemple de déclenchement:

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

0

Url.Action()vous obtiendrez l'URL nue pour la plupart des surcharges Html.ActionLink, mais je pense que la URL-from-lambdafonctionnalité n'est disponible Html.ActionLinkque jusqu'à présent. J'espère qu'ils ajouteront une surcharge similaire Url.Actionà un moment donné.


0

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 boîte de dialogue de paramètres et 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>
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.