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?
AjaxHelper
avec un ActionButton
), j'ai pensé le partager ci-dessous.
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?
AjaxHelper
avec un ActionButton
), j'ai pensé le partager ci-dessous.
Réponses:
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.
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 :)
text-decoration:none
pour se débarrasser de ce stupide soulignement. Cela est nécessaire pour certains navigateurs (Firefox 11.0 à coup sûr).
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>
onclick
contenu de location.href
(donc onclick="location.href='@Url.Action(....)'"
) je ne pouvais pas le faire fonctionner.
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
new { @class="btn btn-primary" })
+ one
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.RouteUrl
et utiliser l'URL pour construire l'élément que vous souhaitez.
<button onclick="location.href='@Url.Action("NewCustomer", "Customers")'">Checkout >></button>
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 HtmlHelper
mé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é.
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-lambda
fonctionnalité n'est disponible Html.ActionLink
que 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>
}