Html.ActionLink come un pulsante o un'immagine, non un link
-
09-09-2019 - |
Domanda
Nell'ultima (RC1) di rilascio di ASP.NET MVC, come faccio ad ottenere il codice Html.ActionLink per eseguire il rendering di un pulsante o un'immagine al posto di un link?
Soluzione
risposta in ritardo, ma si può solo mantenere le cose semplici e applicare una classe CSS per i htmlAttributes oggetto.
<%= Html.ActionLink("Button Name", "Index", null, new { @class="classname" }) %>
e quindi creare una classe nel foglio di stile
a.classname
{
background: url(../Images/image.gif) no-repeat top left;
display: block;
width: 150px;
height: 150px;
text-indent: -9999px; /* hides the link text */
}
Altri suggerimenti
Mi piace usare Url.Action () e Url.Content () in questo modo:
<a href='@Url.Action("MyAction", "MyController")'>
<img src='@Url.Content("~/Content/Images/MyLinkImage.png")' />
</a>
A rigor di termini, l'Url.Content è necessaria solo per pathing non è realmente parte della risposta alla tua domanda.
Grazie a @BrianLegg per aver ricordato che questo dovrebbe utilizzare la nuova sintassi Razor vista. Esempio è stato aggiornato di conseguenza.
Prestito dalla risposta di Patrick, ho scoperto che ho dovuto fare questo:
<button onclick="location.href='@Url.Action("Index", "Users")';return false;">Cancel</button>
per evitare di chiamare metodo POST del form.
Call me semplicistico, ma io faccio solo:
<a href="<%: Url.Action("ActionName", "ControllerName") %>">
<button>Button Text</button>
</a>
E basta prendere cura il momento clou collegamento ipertestuale. I nostri utenti lo amano:)
Basta semplicemente:
<button onclick="@Url.Action("index", "Family", new {familyid = Model.FamilyID })">Cancel</button>
Una risposta in ritardo, ma questo è come faccio la mia ActionLink in un pulsante. Stiamo utilizzando Bootstrap nel nostro progetto in quanto lo rende conveniente. Non importa il @T sin dalla sua solo un traduttore che stiamo usando.
@Html.Actionlink("Some_button_text", "ActionMethod", "Controller", "Optional parameter", "html_code_you_want_to_apply_to_the_actionlink");
È possibile che questo dà un link come questo e sembra come l'immagine qui sotto:
localhost:XXXXX/Firms/AddAffiliation/F0500
A mio parere:
@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>
}
Spero che questo aiuti qualcuno
se non si desidera utilizzare un collegamento, utilizzare il pulsante. è possibile aggiungere un'immagine al tasto così:
<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" esegue l'azione invece di presentare modulo.
Non si può fare questo con Html.ActionLink
. Si dovrebbe usare Url.RouteUrl
e utilizzare l'URL per costruire l'elemento che si desidera.
Utilizzando bootstrap questo è l'approccio più breve e più pulito per creare un link ad un azione di controllo che appare come un pulsante dinamica:
<a href='@Url.Action("Action", "Controller")' class="btn btn-primary">Click Me</a>
O, per utilizzare gli helper HTML:
@Html.ActionLink("Click Me", "Action", "Controller", new { @class = "btn btn-primary" })
<button onclick="location.href='@Url.Action("NewCustomer", "Customers")'">Checkout >></button>
Anche in seguito la risposta, ma ho appena imbattuto in un problema simile e ha finito per scrivere il mio "noreferrer">.
È possibile trovare un'attuazione sul mio blog nel link qui sopra.
Appena aggiunto nel caso qualcuno sta dando la caccia un'implementazione.
Un modo semplice per farlo rendere il vostro Html.ActionLink in un pulsante (finché si dispone di Bootstrap collegato - che probabilmente avete) è in questo modo:
@Html.ActionLink("Button text", "ActionName", "ControllerName", new { @class = "btn btn-primary" })
<li><a href="@Url.Action( "View", "Controller" )"><i class='fa fa-user'></i><span>Users View</span></a></li>
Per visualizzare un'icona con il link
Fai quello che dice Mehrdad - o utilizzare l'helper URL da un metodo di estensione HtmlHelper
come Stephen Walther descrive qui e creare il proprio metodo di estensione che può essere usato per rendere tutti i link.
Poi sarà facile da rendere tutti i link come pulsanti / ancore o se si preferisce -. E, soprattutto, è possibile cambiare idea in seguito quando si scopre che in realtà preferisce qualche altro modo di rendere i vostri link
è possibile creare il proprio metodo di estensione
dare un occhiata al mio attuazione
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);
}
}
poi utilizzarlo a vostro parere, dare un occhiata alla mia chiamata
@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
)
@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?');" />
}
Sembra che ci sia un sacco di soluzioni su come creato un link che mostra come immagine, ma nessuno che fanno apparire come un pulsante.
C'è solo buon modo che ho trovato per fare questo. Il suo un po 'hacky, ma funziona.
Quello che devi fare è creare un pulsante e un collegamento un'azione separata. Effettuare il collegamento azione invisibile utilizzando i CSS. Quando si fa clic sul pulsante, si può sparare l'evento click del collegamento di azione.
<input type="button" value="Search" onclick="Search()" />
@Ajax.ActionLink("Search", "ActionName", null, new AjaxOptions {}, new { id = "SearchLink", style="display:none;" })
function Search(){
$("#SearchLink").click();
}
Può essere un dolore nel culo per fare questo ogni volta che si aggiunge un collegamento che ha bisogno di apparire come un pulsante, ma non ottenere il risultato desiderato.
utilizzare FormAction
<input type="submit" value="Delete" formaction="@Url.Action("Delete", new { id = Model.Id })" />
Appena trovato questa estensione per farlo -. semplice ed efficace
Il modo in cui l'ho fatto è di avere l'ActionLink e l'immagine separatamente. Impostare l'immagine ActionLink come nascosto e poi ha aggiunto una chiamata di innesco jQuery. Questo è più di una soluzione.
'<%= Html.ActionLink("Button Name", "Index", null, new { @class="yourclassname" }) %>'
<img id="yourImage" src="myImage.jpg" />
esempio trigger:
$("#yourImage").click(function () {
$('.yourclassname').trigger('click');
});
Url.Action()
otterrà l'URL a nudo per la maggior parte sovraccarichi di Html.ActionLink
, ma penso che la funzionalità URL-from-lambda
è disponibile solo tramite Html.ActionLink
finora. Speriamo che aggiungono un sovraccarico di simile a Url.Action
ad un certo punto.
Ecco come ho fatto senza scripting:
@using (Html.BeginForm("Action", "Controller", FormMethod.Get))
{
<button type="submit"
class="btn btn-default"
title="Action description">Button Label</button>
}
Lo stesso, ma con finestra dei parametri e conferma:
@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>
}
Per Material Design Lite e MVC:
<a class="mdl-navigation__link" href='@Url.Action("MyAction", "MyController")'>Link Name</a>