带有图像的ASP.NET MVC Ajax.ActionLink
反正有一个图像充当ajax动作链接？ 我只能使用文本来工作。 谢谢你的帮助！
来自Stephen Walthe，从他的Contact Manger项目
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)); } } 你现在可以input你的aspx文件了：
<%= Ajax.ImageActionLink("../../Content/Delete.png", "Delete", "Delete", new { id = item.Id }, new AjaxOptions { Confirm = "Delete contact?", HttpMethod = "Delete", UpdateTargetId = "divContactList" })%>
这是我find的最简单的解决scheme：
<%= Ajax.ActionLink("[replacethis]", ...).Replace("[replacethis]", "<img src=\"http://img.dovov.comtest.gif\" ... />" %>
Replace（）调用用于将img标签推入操作链接。 您只需要使用“[replaceme]”文本（或任何其他安全文本）作为临时占位符来创build链接。
这是一个Razor / MVC 3（及更高版本）更新黑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))); } }
您现在可以input您的.cshtml文件：
@Ajax.ImageActionLink("../../Content/Delete.png", "Delete", "Delete", new { id = item.Id }, new AjaxOptions { Confirm = "Delete contact?", HttpMethod = "Delete", UpdateTargetId = "divContactList" })
2013年10月31日：更新了一个额外的参数，以允许为图像元素设置额外的HTML属性。 用法：
@Ajax.ImageActionLink("../../Content/Delete.png", "Delete", "Delete", new { id = item.Id }, new AjaxOptions { Confirm = "Delete contact?", HttpMethod = "Delete", UpdateTargetId = "divContactList" }, new{ style="border: none;" })
另一个解决scheme是创build你自己的扩展方法：
ActionLink<TController>(this HtmlHelper helper, Expression<Action<TController>> action, string linkText, object htmlAttributes, LinkOptions options)
而最后一个参数是枚举LinkOptions
[Flags] public enum LinkOptions { PlainContent = 0, EncodeContent = 1, }
然后你可以使用它如下：
Html.ActionLink<Car>( c => c.Delete(item.ID), "<span class=\"redC\">X</span>", new { Class = "none left" }, LinkOptions.PlainContent)
我会在我的博客上发布这个解决scheme的完整描述： http : //fknet.wordpress.com/
简短的答案是不可能的。 你的select是写你自己的扩展方法来有一个ImageActionLink，不是很难做到。 或者添加一个属性到actionLink中，并用image标签replaceinnerhtml。
请参阅http://asp.net/mvc上的版本7联系人pipe理器教程。; Stephen Walther有一个创build一个Ajax.ActionLink的例子，它是一个图像。
MVC3，Html.ActionImageLink和Ajax.ActionImageLink
感谢所有帮助我的其他答案。
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))); }
一般的解决scheme：在动作链接中包含你想要的任何Razor
使用Razor模板委托有一个更好的解决scheme，它允许以一种非常自然的方式在动作链接中插入任何Razor代码。 所以你可以添加一个图像，或任何其他的代码。
这是扩展方法：
public static IHtmlString ActionLink<T>(this AjaxHelper ajaxHelper, T item, Func<T,HelperResult> 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)); }
这是如何使用它：
@Ajax.ActionLink(car, @<div> <h1>@car.Maker</h1> <p>@car.Description</p> <p>Price: @string.Format("{0:C}",car.Price)</p> </div>, ...
这允许使用智能书写剃刀，并使用模板所需的任何对象（ViewModel或任何其他对象，如我的示例中的汽车）。 你可以使用模板内的任何助手来嵌套图像或你想要的任何元素。
注意Resharper用户
如果您在项目中使用R＃，则可以添加R＃注释以改进Intellisense：
public static IHtmlString ActionLink<T>(this AjaxHelper ajaxHelper, T item, Func<T, HelperResult> template, [AspMvcAction] string action, [AspMvcController] string controller, object routeValues, AjaxOptions options)
每个答案都很好，但是我find了最简单的答案：
@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;" } )
请注意，它使用空格（“”）作为链接文本。 它不会使用空文本。
第一个解决scheme是使用如下所示的助手静态方法DecodeLinkContent ：
DecodeLinkContent(Html.ActionLink<Home>(c => c.Delete(item.ID), "<span class=\"redC\">X</span>",new { Class = "none left"}))
DecodeLinkContent必须find第一个“>”和最后一个“<”，并且必须用HttpUtility.Decode（content）来replace内容。
这个解决scheme有点破解，但我认为这是最容易的。
更新MVC3使用模板剃刀代表依赖T4Mvc ，但带来了如此多的权力。
基于本页面上的其他各种答案。
public static HelperResult WrapInActionLink(this AjaxHelper helper,ActionResult result, Func<object,HelperResult> 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); }); }
允许：
@Ajax.WrapInActionLink(MVC.Deal.Details(deal.ID.Value),@<img alt='Edit deal details' src='@Links.Content.Images.edit_16_gif'/>, new AjaxOptions() { UpdateTargetId="indexDetails" })
.li_inbox {background：url（inbox.png）no-repeat; 填充左：40像素; / image background wight 40px /}
<li class="li_inbox" > @Ajax.ActionLink("Inbox", "inbox","Home", new { }, new AjaxOptions { UpdateTargetId = "MainContent", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" })
尝试这个
@Html.Raw(HttpUtility.HtmlDecode(Ajax.ActionLink( "<img src=\"http://img.dovov.comsjt.jpg\" title=\"上一月\" border=\"0\" alt=\"上一月\" />", "CalendarPartial", new { strThisDate = Model.dtCurrentDate.AddMonths(-1).ToString("yyyy-MM-dd") }, new AjaxOptions { @UpdateTargetId = "calendar" }).ToString()))
这里有很好的解决scheme，但是如果你想在动作链接中有更多的图像呢？ 这是我如何做到的：
@using (Ajax.BeginForm("Action", "Controler", ajaxOptions)) { <button type="submit"> <img src="image.png" /> </button> }
缺点是我仍然需要在button元素上做一些样式，但是你可以把你想要的所有html放在那里。
所有这些都是非常好的解决scheme，但是如果您不喜欢在解决scheme中进行replace ，则可以尝试以下操作：
{ var url = new UrlHelper(helper.ViewContext.RequestContext); // build the <img> tag var imgBuilder = new TagBuilder("img"); imgBuilder.MergeAttribute("src", url.Content(imageUrl)); imgBuilder.MergeAttribute("alt", altText); string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing); //build the <a> tag var anchorBuilder = new TagBuilder("a"); anchorBuilder.MergeAttribute("href", url.Action(actionName, controller, routeValues)); anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside anchorBuilder.MergeAttributes<string, object>(ajaxOptions.ToUnobtrusiveHtmlAttributes()); string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal); return MvcHtmlString.Create(anchorHtml); }
此外，在我的情况下，如果我不使用url.Content(imageUrl) ，图像不显示。
我发现，最好的解决scheme是使用input标签type =“image”
@using (Ajax.BeginForm( "LoadTest","Home" , new System.Web.Mvc.Ajax.AjaxOptions { UpdateTargetId = "[insert your target tag's id here]" })) { <input type="image" class="[css style class here]" src="[insert image link here]"> }
这很容易，而且速度很快。
我已经将它与其他控制AjaxOptions的控件库结合使用，所以我倾向于input整个System.Web.Mvc.Ajax.AjaxOptions，以防万一我在将来尝试使用不同的设置。
注：我已经注意到，这似乎在MVC3内有问题（与types=“图像”有关），它确实为MVC 4工作
使用这个扩展名来生成带有glifyphicon的ajax链接：
/// <summary> /// Create an Ajax.ActionLink with an associated glyphicon /// </summary> /// <param name="ajaxHelper"></param> /// <param name="linkText"></param> /// <param name="actionName"></param> /// <param name="controllerName"></param> /// <param name="glyphicon"></param> /// <param name="ajaxOptions"></param> /// <param name="routeValues"></param> /// <param name="htmlAttributes"></param> /// <returns></returns> 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: //<a id="btnShow" href="/Customers/ShowArtworks?customerId=1" data-ajax-update="#pnlArtworks" data-ajax-success="jsSuccess" //data-ajax-mode="replace" data-ajax-method="POST" data-ajax-failure="jsFailure" data-ajax-confirm="confirm" data-ajax-complete="jsComplete" //data-ajax-begin="jsBegin" data-ajax="true"> // <i class="glyphicon glyphicon-pencil"></i> // <span>Edit</span> //</a> 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)); }
使用Html数据属性
<a data-ajax="true" data-ajax-begin="..." data-ajax-success="..." href="@Url.Action("Delete")"> <i class="halflings-icon remove"></i> </a>
其他人没有为我工作，.ToHtmlString（）吐出一个string在MVC 4。
下面传递一个id到编辑控件，并显示一个编辑图像，而不是文本spag：
@MvcHtmlString.Create(Ajax.ActionLink("Spag", "Edit", new { id = item.x0101EmployeeID }, new AjaxOptions() { UpdateTargetId = "selectDiv", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }).ToHtmlString().Replace("Spag", "<img src=\"" + Url.Content("../../Images/edit.png") + "\" />"))
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))); } } }
