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

Question

Dans la dernière version de ASP.NET MVC (RC1), comment puis-je Html.ActionLink de rendre un bouton ou une image au lieu d'un lien?

Answer 1

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

et puis créer 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 */
}

Answer 2

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>

A strictement parler, le Url.Content est seulement nécessaire pour pathing n'est pas vraiment partie de la réponse à votre question.

Merci à @BrianLegg de remarquer que cela devrait utiliser la nouvelle syntaxe de vue Razor. Exemple a été mis à jour en conséquence.

Answer 3

Emprunts de la réponse de Patrick, je trouve 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.

Answer 4

Appelle-moi simpliste, mais je fais juste:

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

Et vous prenez soin de le point fort de lien hypertexte. Nos utilisateurs aiment:)

Answer 5

Il suffit simplement:

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

Answer 6

Une réponse tardive, mais voici comment je fais mon ActionLink en un bouton. Nous utilisons Bootstrap dans notre projet comme il le rend pratique. Peu importe le @T depuis son seul un traducteur que nous utilisons.

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

Le ci-dessus donne un lien comme celui-ci et il semble que 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>

}

Hope this helps quelqu'un

Answer 7

si vous ne voulez pas utiliser un lien, utilisez le bouton. vous pouvez ajouter l'image au bouton ainsi:

<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" effectue votre action au lieu de se soumettre sous forme.

Answer 8

Vous ne pouvez pas le faire avec Html.ActionLink. Vous devez utiliser Url.RouteUrl et utiliser l'URL pour construire l'élément que vous voulez.

Answer 9

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

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

Ou d'utiliser les aides Html:

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

Answer 10

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

Answer 11

Même réponse plus tard, mais je suis tombé sur un problème similaire et a fini par écrire mon propre lien image extension HtmlHelper .

Vous pouvez trouver une mise en œuvre de celui-ci sur mon blog dans le lien ci-dessus.

Juste ajouté au cas où quelqu'un est la chasse à une mise en œuvre.

Answer 12

Une façon simple de faire faire votre Html.ActionLink en un bouton (aussi longtemps que vous avez BootStrap branché - que vous avez probablement) est comme ceci:

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

Answer 13

<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

Answer 14

Faites ce que Mehrdad dit - ou utilisez l'assistant d'URL à partir d'une méthode d'extension de HtmlHelper comme Stephen Walther décrit ici et faire votre propre méthode d'extension qui peut être utilisé pour rendre tous vos liens.

Ensuite, il sera facile de rendre tous les liens que des boutons / points d'ancrage ou celui que vous préférez -. Et, surtout, vous pouvez changer d'avis lorsque vous découvrez que vous préférez en fait une autre façon de faire vos liens

Answer 15

vous pouvez créer votre propre méthode d'extension
prendre à regarder ma mise en œuvre

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

utilisez dans votre vue look prendre à 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
                    )

Answer 16

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

Answer 17

Il semble y avoir beaucoup de solutions sur la façon de créer un lien qui affiche comme une image, mais aucun de ceux qui font apparaître comme un bouton.

Il n'y a qu'une bonne façon que j'ai trouvé de le faire. Son un peu hacky, mais cela fonctionne.

Ce que vous devez faire est de créer un bouton et un lien d'action distinct. Faire le lien d'action invisible en utilisant 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();
 }

Il peut être une douleur dans le cul pour le faire à chaque fois que vous ajoutez un lien qui doit ressembler à un bouton, mais il n'atteindre le résultat souhaité.

Answer 18

utiliser FORMACTION

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

Answer 19

Je viens de trouver

La façon dont je l'ai fait est d'avoir le ActionLink et l'image séparement. Réglez l'image ActionLink comme caché puis ajouté un appel de déclenchement jQuery. Ceci est 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 Html.ActionLink surcharges, mais je pense que la fonctionnalité URL-from-lambda est uniquement disponible via Html.ActionLink jusqu'à présent. Espérons qu'ils vont ajouter 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 le paramètre et le 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>
}

Pour le matériel de conception Lite et MVC:

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

Answer 20

Answer 21

Answer 22

La façon dont je l'ai fait est d'avoir le ActionLink et l'image séparement. Réglez l'image ActionLink comme caché puis ajouté un appel de déclenchement jQuery. Ceci est 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');
});

Answer 23

Url.Action() vous obtiendrez l'URL nue pour la plupart des Html.ActionLink surcharges, mais je pense que la fonctionnalité URL-from-lambda est uniquement disponible via Html.ActionLink jusqu'à présent. Espérons qu'ils vont ajouter 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 le paramètre et le 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>
}

Pour le matériel de conception Lite et MVC:

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

Answer 24

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

Answer 25

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 le paramètre et le 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>
}

Answer 26

Pour le matériel de conception Lite et MVC:

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

Answer 27

Answer 28