Na versão mais recente (RC1) do ASP.NET MVC, como faço para que o Html.ActionLink seja renderizado como um botão ou uma imagem em vez de um link?
AjaxHelper
com um ActionButton
), pensei em compartilhá-lo abaixo.
Na versão mais recente (RC1) do ASP.NET MVC, como faço para que o Html.ActionLink seja renderizado como um botão ou uma imagem em vez de um link?
AjaxHelper
com um ActionButton
), pensei em compartilhá-lo abaixo.
Respostas:
Resposta tardia, mas você pode simplificá-la e aplicar uma classe CSS ao objeto htmlAttributes.
<%= Html.ActionLink("Button Name", "Index", null, new { @class="classname" }) %>
e crie uma classe na sua folha de estilo
a.classname
{
background: url(../Images/image.gif) no-repeat top left;
display: block;
width: 150px;
height: 150px;
text-indent: -9999px; /* hides the link text */
}
Eu gosto de usar Url.Action () e Url.Content () assim:
<a href='@Url.Action("MyAction", "MyController")'>
<img src='@Url.Content("~/Content/Images/MyLinkImage.png")' />
</a>
A rigor, o Url.Content é necessário apenas para o processamento não é realmente parte da resposta à sua pergunta.
Agradecemos a @BrianLegg por salientar que isso deve usar a nova sintaxe de exibição Razor. O exemplo foi atualizado de acordo.
Me chame de simplista, mas eu faço:
<a href="<%: Url.Action("ActionName", "ControllerName") %>">
<button>Button Text</button>
</a>
E você apenas cuida do destaque do hiperlink. Nossos usuários adoram :)
text-decoration:none
para se livrar desse sublinhado estúpido. Isso é necessário para alguns navegadores (Firefox 11.0, com certeza).
Usando o bootstrap, esta é a abordagem mais curta e limpa para criar um link para uma ação do controlador que aparece como um botão dinâmico:
<a href='@Url.Action("Action", "Controller")' class="btn btn-primary">Click Me</a>
Ou para usar os auxiliares de HTML:
@Html.ActionLink("Click Me", "Action", "Controller", new { @class = "btn btn-primary" })
Simplesmente :
<button onclick="@Url.Action("index", "Family", new {familyid = Model.FamilyID })">Cancel</button>
onclick
conteúdo com location.href
(so onclick="location.href='@Url.Action(....)'"
), não consegui fazê-lo funcionar.
Uma resposta tardia, mas é assim que eu faço do meu ActionLink um botão. Estamos usando o Bootstrap em nosso projeto, pois o torna conveniente. Não importa o @T, pois é apenas um tradutor que estamos usando.
@Html.Actionlink("Some_button_text", "ActionMethod", "Controller", "Optional parameter", "html_code_you_want_to_apply_to_the_actionlink");
O exemplo acima fornece um link como este e é semelhante à imagem abaixo:
localhost:XXXXX/Firms/AddAffiliation/F0500
Na minha opinião:
@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>
}
Espero que isso ajude alguém
new { @class="btn btn-primary" })
+ um
se você não quiser usar um link, use o botão você também pode adicionar uma imagem ao botão:
<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" executa sua ação em vez de enviar o formulário.
Você não pode fazer isso com Html.ActionLink
. Você deve usar Url.RouteUrl
e usar a URL para construir o elemento que deseja.
<button onclick="location.href='@Url.Action("NewCustomer", "Customers")'">Checkout >></button>
Resposta ainda mais tarde, mas acabei encontrando um problema semelhante e acabei escrevendo minha própria extensão Image link HtmlHelper .
Você pode encontrar uma implementação no meu blog no link acima.
Apenas adicionado caso alguém esteja procurando uma implementação.
<li><a href="@Url.Action( "View", "Controller" )"><i class='fa fa-user'></i><span>Users View</span></a></li>
Para exibir um ícone com o link
Faça o que Mehrdad diz - ou use o auxiliar de URL de um HtmlHelper
método de extensão como Stephen Walther descreve aqui e crie seu próprio método de extensão que pode ser usado para renderizar todos os seus links.
Então será fácil renderizar todos os links como botões / âncoras ou o que você preferir - e, o mais importante, você poderá mudar de idéia mais tarde, quando descobrir que realmente prefere outra maneira de criar seus links.
você pode criar seu próprio método de extensão,
veja minha implementação
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);
}
}
em seguida, use-o em sua opinião, olhe para minha ligação
@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
)
Para o Material Design Lite e 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?');" />
}
Parece haver muitas soluções sobre como criar um link que é exibido como uma imagem, mas nenhuma que o faça parecer um botão.
Só há uma boa maneira de encontrar isso. É um pouco hacky, mas funciona.
O que você precisa fazer é criar um botão e um link de ação separado. Torne o link de ação invisível usando css. Quando você clica no botão, ele pode disparar o evento click do link de ação.
<input type="button" value="Search" onclick="Search()" />
@Ajax.ActionLink("Search", "ActionName", null, new AjaxOptions {}, new { id = "SearchLink", style="display:none;" })
function Search(){
$("#SearchLink").click();
}
Pode ser difícil fazer isso toda vez que você adiciona um link que precisa se parecer com um botão, mas consegue o resultado desejado.
O jeito que eu fiz isso é ter o actionLink e a imagem separadamente. Defina a imagem do actionlink como oculta e, em seguida, adicione uma chamada de acionador jQuery. Isso é mais uma solução alternativa.
'<%= Html.ActionLink("Button Name", "Index", null, new { @class="yourclassname" }) %>'
<img id="yourImage" src="myImage.jpg" />
Exemplo de gatilho:
$("#yourImage").click(function () {
$('.yourclassname').trigger('click');
});
Url.Action()
você obterá o URL simples para a maioria das sobrecargas Html.ActionLink
, mas acho que a URL-from-lambda
funcionalidade está disponível apenas até Html.ActionLink
o momento. Espero que eles adicionem uma sobrecarga semelhante a Url.Action
em algum momento.
Foi assim que eu fiz isso sem scripts:
@using (Html.BeginForm("Action", "Controller", FormMethod.Get))
{
<button type="submit"
class="btn btn-default"
title="Action description">Button Label</button>
}
O mesmo, mas com o parâmetro e a caixa de diálogo de confirmação:
@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>
}