ASP.NET MVC Ajax.ActionLink com imagem

Existe alguma maneira de ter uma imagem agir como um actionlink ajax? Eu só posso fazê-lo funcionar usando texto. Obrigado pela ajuda!

De Stephen Walthe, do seu projeto de gerente de contato

public static class ImageActionLinkHelper { public static string ImageActionLink(this AjaxHelper helper, string imageUrl, string altText, string actionName, object routeValues, AjaxOptions ajaxOptions) { var builder = new TagBuilder("img"); builder.MergeAttribute("src", imageUrl); builder.MergeAttribute("alt", altText); var link = helper.ActionLink("[replaceme]", actionName, routeValues, ajaxOptions); return link.Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing)); } } 

Agora você pode digitar seu arquivo aspx:

 < %= Ajax.ImageActionLink("../../Content/Delete.png", "Delete", "Delete", new { id = item.Id }, new AjaxOptions { Confirm = "Delete contact?", HttpMethod = "Delete", UpdateTargetId = "divContactList" })%> 

Aqui está a solução mais fácil que encontrei:

 < %= Ajax.ActionLink("[replacethis]", ...).Replace("[replacethis]", "" %> 

A chamada Replace () é usada para enviar a tag img para o link de ação. Você só precisa usar o texto “[replaceme]” (ou qualquer outro texto seguro) como um espaço reservado temporário para criar o link.

Esta é uma atualização do Razor / MVC 3 (e posterior) para a resposta do Black Horus:

 using System.Web; using System.Web.Mvc; using System.Web.Mvc.Ajax; public static class ImageActionLinkHelper { public static IHtmlString ImageActionLink(this AjaxHelper helper, string imageUrl, string altText, string actionName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes = null) { var builder = new TagBuilder("img"); builder.MergeAttribute("src", imageUrl); builder.MergeAttribute("alt", altText); builder.MergeAttributes(new RouteValueDictionary(htmlAttributes)); var link = helper.ActionLink("[replaceme]", actionName, routeValues, ajaxOptions).ToHtmlString(); return MvcHtmlString.Create(link.Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing))); } } 

Agora você pode digitar seu arquivo .cshtml:

 @Ajax.ImageActionLink("../../Content/Delete.png", "Delete", "Delete", new { id = item.Id }, new AjaxOptions { Confirm = "Delete contact?", HttpMethod = "Delete", UpdateTargetId = "divContactList" }) 

31 de outubro de 2013: Atualizado com um parâmetro extra para permitir a configuração de atributos HTML adicionais no elemento image. Uso:

 @Ajax.ImageActionLink("../../Content/Delete.png", "Delete", "Delete", new { id = item.Id }, new AjaxOptions { Confirm = "Delete contact?", HttpMethod = "Delete", UpdateTargetId = "divContactList" }, new{ style="border: none;" }) 

Outra solução é criar seu próprio método de extensão:

 ActionLink(this HtmlHelper helper, Expression> action, string linkText, object htmlAttributes, LinkOptions options) 

e como o último parâmetro é a enumeração LinkOptions

 [Flags] public enum LinkOptions { PlainContent = 0, EncodeContent = 1, } 

e então você pode usá-lo da seguinte maneira:

 Html.ActionLink( c => c.Delete(item.ID), "X", new { Class = "none left" }, LinkOptions.PlainContent) 

Vou postar toda a descrição desta solução no meu blog: http://fknet.wordpress.com/

A resposta curta é que não é possível. Suas opções são escrever seu próprio método de extensão para ter um ImageActionLink, não muito difícil de fazer. Ou adicione um atributo ao actionLink e substitua o innerhtml pela tag de imagem.

Veja a versão 7 do Tutorial do Contact Manager em http://asp.net/mvc . Stephen Walther tem um exemplo de criação de um Ajax.ActionLink que é uma imagem.

MVC3, Html.ActionImageLink e Ajax.ActionImageLink

Obrigado a todas as outras respostas em me ajudar com isso.

 public static MvcHtmlString ActionImageLink(this HtmlHelper helper, string imageUrl, string altText, string actionName, string controller, object routeValues) { var builder = new TagBuilder("img"); builder.MergeAttribute("src", imageUrl); builder.MergeAttribute("alt", altText); var link = helper.ActionLink("[replaceme]", actionName, controller, routeValues); return new MvcHtmlString(link.ToHtmlString().Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing))); } public static MvcHtmlString ActionImageLink(this AjaxHelper helper, string imageUrl, string altText, string actionName, string controller, object routeValues, AjaxOptions ajaxOptions) { var builder = new TagBuilder("img"); builder.MergeAttribute("src", imageUrl); builder.MergeAttribute("alt", altText); var link = helper.ActionLink("[replaceme]", actionName, controller, routeValues, ajaxOptions); return new MvcHtmlString(link.ToHtmlString().Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing))); } 

Solução geral: inclua qualquer razor que você quiser dentro do link de ação

Existe uma solução muito melhor usando os delegates do modelo Razor, que permite inserir qualquer código Razor dentro do link de ação de uma maneira muito natural. Então você pode adicionar uma imagem ou qualquer outro código.

Este é o método de extensão:

 public static IHtmlString ActionLink(this AjaxHelper ajaxHelper, T item, Func template, string action, string controller, object routeValues, AjaxOptions options) { string rawContent = template(item).ToHtmlString(); MvcHtmlString a = ajaxHelper.ActionLink("$$$", action, controller, routeValues, options); return MvcHtmlString.Create(a.ToString().Replace("$$$", rawContent)); } 

É assim que pode ser usado:

 @Ajax.ActionLink(car, @

@car.Maker

@car.Description

Price: @string.Format("{0:C}",car.Price)

, ...

Isto permite escrever o Razor com intellisense e usar qualquer object que você queira para o template (o ViewModel, ou qualquer outro object, como o carro da minha amostra). E você pode usar qualquer ajudante dentro do modelo para aninhar imagens ou elementos que desejar.

Nota para usuários do resharper

Se você está usando R # em seu projeto, você pode adicionar annotations R # para melhorar o Intellisense:

 public static IHtmlString ActionLink(this AjaxHelper ajaxHelper, T item, Func template, [AspMvcAction] string action, [AspMvcController] string controller, object routeValues, AjaxOptions options) 

Toda resposta é boa, mas achei a mais fácil:

 @Html.ActionLink( " ", "Index", "Countries", null, new { style = "background: url('../../Content/Images/icon.png') no-repeat center right;display:block; height:24px; width:24px;margin-top:-2px;text-decoration:none;" } ) 

Observe que está usando um espaço em branco (“”) para o texto do link. Não funcionará com um texto vazio.

A primeira solução é usar um método estático de ajuda DecodeLinkContent como o seguinte:

 DecodeLinkContent(Html.ActionLink(c => c.Delete(item.ID), "X",new { Class = "none left"})) 

DecodeLinkContent tem que encontrar primeiro ‘>’ e último ‘< ' e tem que substituir o conteúdo com HttpUtility.Decode (content).

Esta solução é um pouco hack, mas acho que é mais fácil.

Atualização para MVC3 usando Delegados de Navalha Templated depende do T4Mvc , mas traz muita energia.

Baseado em várias outras respostas nesta página.

  public static HelperResult WrapInActionLink(this AjaxHelper helper,ActionResult result, Func template,AjaxOptions options) { var link=helper.ActionLink("[replaceme]",result,options); var asString=link.ToString(); var replaced=asString.Replace("[replaceme]",template(null).ToString()); return new HelperResult(writer => { writer.Write(replaced); }); } 

Permite:

 @Ajax.WrapInActionLink(MVC.Deal.Details(deal.ID.Value),@Edit deal details, new AjaxOptions() { UpdateTargetId="indexDetails" }) 

.li_inbox {background: url (inbox.png) sem repetição; preenchimento esquerdo: 40px; / imagem de fundo wight 40px /}


 
  • @Ajax.ActionLink("Inbox", "inbox","Home", new { }, new AjaxOptions { UpdateTargetId = "MainContent", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" })
  • Tente isso

     @Html.Raw(HttpUtility.HtmlDecode(Ajax.ActionLink( "\"上一月\"", "CalendarPartial", new { strThisDate = Model.dtCurrentDate.AddMonths(-1).ToString("yyyy-MM-dd") }, new AjaxOptions { @UpdateTargetId = "calendar" }).ToString())) 

    Boas soluções aqui, mas e se você quiser ter mais do que apenas uma imagem no actionlink? É assim que eu faço:

      @using (Ajax.BeginForm("Action", "Controler", ajaxOptions)) {  } 

    A desvantagem é que eu ainda tenho que fazer um pouco de estilo no elemento de botão, mas você pode colocar todo o html que você quiser lá.

    Todos são muito boas soluções, mas se você não gosta de ter uma replace em sua solução, você pode tentar isso:

     { var url = new UrlHelper(helper.ViewContext.RequestContext); // build the  tag var imgBuilder = new TagBuilder("img"); imgBuilder.MergeAttribute("src", url.Content(imageUrl)); imgBuilder.MergeAttribute("alt", altText); string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing); //build the  tag var anchorBuilder = new TagBuilder("a"); anchorBuilder.MergeAttribute("href", url.Action(actionName, controller, routeValues)); anchorBuilder.InnerHtml = imgHtml; // include the  tag inside anchorBuilder.MergeAttributes(ajaxOptions.ToUnobtrusiveHtmlAttributes()); string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal); return MvcHtmlString.Create(anchorHtml); } 

    Além disso, no meu caso, se eu não usar url.Content(imageUrl) , a imagem não será exibida.

    Eu descobri que, de longe, a melhor solução para isso é usar a tag de input com type = “image”

     @using (Ajax.BeginForm( "LoadTest","Home" , new System.Web.Mvc.Ajax.AjaxOptions { UpdateTargetId = "[insert your target tag's id here]" })) {  } 

    É fácil e rápido.

    Eu usei isso em combinação com outras bibliotecas de controles que interferem com AjaxOptions, então eu tenho a tendência de digitar o System.Web.Mvc.Ajax.AjaxOptions inteiro apenas no caso de eu acabar tentando um conjunto diferente no futuro.

    NOTA: Eu notei que isso parece ter problemas dentro do MVC3 (algo a ver com o type = “image”), ele funciona para o MVC 4

    Use esta extensão para gerar o link ajax com glifyphicon:

      ///  /// Create an Ajax.ActionLink with an associated glyphicon ///  ///  ///  ///  ///  ///  ///  ///  ///  ///  public static MvcHtmlString ImageActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, string glyphicon, AjaxOptions ajaxOptions, RouteValueDictionary routeValues = null, object htmlAttributes = null) { //Example of result: // //  // Edit // var builderI = new TagBuilder("i"); builderI.MergeAttribute("class", "glyphicon " + glyphicon); string iTag = builderI.ToString(TagRenderMode.Normal); string spanTag = ""; if (!string.IsNullOrEmpty(linkText)) { var builderSpan = new TagBuilder("span") { InnerHtml = " " + linkText }; spanTag = builderSpan.ToString(TagRenderMode.Normal); } //Create the "a" tag that wraps var builderA = new TagBuilder("a"); var requestContext = HttpContext.Current.Request.RequestContext; var uh = new UrlHelper(requestContext); builderA.MergeAttribute("href", uh.Action(actionName, controllerName, routeValues)); builderA.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes)); builderA.MergeAttributes((ajaxOptions).ToUnobtrusiveHtmlAttributes()); builderA.InnerHtml = iTag + spanTag; return new MvcHtmlString(builderA.ToString(TagRenderMode.Normal)); } 

    Use atributos de dados em HTML

    Outros não funcionaram para mim como o .ToHtmlString () cuspiu uma string no MVC 4.

    o abaixo passa um id para o controle de edição e exibe uma imagem de edição em vez do texto spag:

     @MvcHtmlString.Create(Ajax.ActionLink("Spag", "Edit", new { id = item.x0101EmployeeID }, new AjaxOptions() { UpdateTargetId = "selectDiv", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }).ToHtmlString().Replace("Spag", "")) 
     actionName+"/"+routeValues Proje/ControlName/ActionName/Id using System.Web; using System.Web.Mvc; using System.Web.Mvc.Ajax; namespace MithatCanMvc.AjaxHelpers { public static class ImageActionLinkHelper { public static IHtmlString ImageActionLink(this AjaxHelper helper, string imageUrl, string altText, string actionName, string routeValues, AjaxOptions ajaxOptions) { var builder = new TagBuilder("img"); builder.MergeAttribute("src", imageUrl); builder.MergeAttribute("alt", altText); var link = helper.ActionLink("[replaceme]", actionName+"/"+routeValues, ajaxOptions).ToHtmlString(); return MvcHtmlString.Create(link.Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing))); } } }