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

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?

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

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.

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.

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

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

Tout simplement :

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

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

À 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

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.

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.

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

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

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.

<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

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.

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
                    )

Pour Material Design Lite et 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?');" />
    }

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

utiliser FORMACTION

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

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

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

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

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