NET MVC Ajax. ActionLink 和图像

是否存在一个图像作为一个 ajax 动作链接？我只能通过文本让它工作。谢谢你的帮助！

53021 次浏览
小开

简而言之，这是不可能的。您可以选择编写自己的扩展方法来拥有一个 ImageActionLink，这并不太难。或者向 actionLink 添加一个属性，并用 image 标记替换 innerhtml。

小开

第一个解决方案是使用辅助静态方法 解码链接内容，如下所示:

DecodeLinkContent(Html.ActionLink<Home>(c => c.Delete(item.ID), "<span class=\"redC\">X</span>",new { Class = "none left"}))

DecodeLinkContent 必须找到第一个“ >”和最后一个“ <”，并且必须用 HttpUtility.Decode (content)替换内容。

这个解决方案有点像黑客技术，但我认为它是最简单的。

小开

另一个解决方案是创建自己的扩展方法:

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)

我将在我的博客上发布这个解决方案的完整描述: http://fknet.wordpress.com/

小开

请参阅 http://asp.net/mvc上的第7版联系人管理员教程。Stephen Walther 有一个创建 Ajax 的示例。ActionLink 是一个图像。

小开

这是我找到的最简单的解决办法:

<%= Ajax.ActionLink("[replacethis]", ...).Replace("[replacethis]", "<img src=\"/images/test.gif\" ... />" %>

Replace ()调用用于将 IMG标记推送到操作链接中。您只需要使用“[ replaceme ]”文本(或任何其他安全文本)作为临时占位符来创建链接。

小开

史蒂芬 · 沃尔特，他的 联系经理项目

 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));
}


}

你现在可以输入你的 aspx 文件:

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

这是 Razor/MVC 3(以及后来的版本)对 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)));
}


}

现在可以键入. cshtml 文件:

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

2013年10月31日: 更新了一个额外的参数，以便为 image 元素设置额外的 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;" })
小开

和 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)));
}
小开

使用 模板化的剃刀代表对 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" })
小开

每个答案都不错，但我找到了最简单的一个:

@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;"
} )

注意，它对链接文本使用了一个空白(“”)。它对空文本不起作用。

小开 
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)));


}


}


}
小开

通用解决方案: 在操作链接中包含任何你想要的 Razor

使用 Razor 模板委托有一个更好的解决方案，它允许以一种非常自然的方式在操作链接中插入任何 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>, ...

这允许使用智能感知编写 Razor，并使用您希望用于模板的任何对象(ViewModel 或任何其他对象，如我的示例中的 car)。您可以使用模板中的任何助手来嵌套图像或任何您想要的元素。

Resharper 用户须知

如果在项目中使用 R # ，可以添加 R # 注释来改进智能感知:

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

. li _ inbox { back: url (inbox.png) no-repeat; pding-left: 40px; /图像背景重量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=\"/images/sjt.jpg\" title=\"上一月\" border=\"0\" alt=\"上一月\" />", "CalendarPartial", new { strThisDate = Model.dtCurrentDate.AddMonths(-1).ToString("yyyy-MM-dd") }, new AjaxOptions { @UpdateTargetId = "calendar" }).ToString()))
小开

这里的解决方案不错，但是如果你想要的不仅仅是动作链接中的一个图像，那该怎么办呢？我是这么做的:

     @using (Ajax.BeginForm("Action", "Controler", ajaxOptions))
{
<button type="submit">
<img src="image.png" />
</button>
}

缺点是我仍然需要对按钮元素进行一些样式设计，但是您可以在其中放入所有您想要的 html。

小开

这些都是非常好的解决方案，但是如果你不喜欢在你的解决方案中使用 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)，图像就不会显示。

小开

我发现目前最好的解决方案是使用 type = “ image”的 input 标记

@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 的控件库结合使用，因此我倾向于输入整个 System。韦伯。MVC.阿贾克斯。AjaxOptions，以防将来尝试不同的集合。

注意: 我已经注意到这在 MVC3中似乎有问题(与 type = “ image”有关) ，但它确实适用于 MVC4

小开

使用这个扩展生成带有 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>

替换

<i class="halflings-icon remove"></i>

with your own image

小开

其他的不适合我，因为.ToHtmlString ()在 MVC4中吐出了一个字符串。

下面向编辑控件传递一个 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") + "\" />"))
小开

我不知道，这对我来说似乎更容易:

    <a href="@Url.Action("index", "home")">
<img src="~/Images/rocket.png" width="25" height="25" title="Launcher" />
</a>

提交答案