带有图像的 ASP.NET MVC Ajax.ActionLink

ASP.NET MVC Ajax.ActionLink with Image

提问by

is there anyway to have an image act as an ajax actionlink? I can only get it to work using text. Thanks for your help!

反正有图像充当ajax动作链接吗？我只能使用文本让它工作。谢谢你的帮助！

回答by Black Horus

From Stephen Walthe, from his Contact manger project

来自 Stephen Walthe，来自他的联系人管理器项目

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

}

You can now type in your aspx file :

您现在可以输入您的 aspx 文件：

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

回答by Neal Stublen

Here's the easiest solution I've found:

这是我找到的最简单的解决方案：

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

The Replace() call is used to push the imgtag into the action link. You just need to use the "[replaceme]" text (or any other safe text) as a temporary placeholder to create the link.

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

回答by Arjan Einbu

This is a Razor/MVC 3 (and later) update to Black Horus' answer:

这是对 Black Horus 回答的 Razor/MVC 3（及更高版本）更新：

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

}

You can now type in your .cshtml file :

您现在可以输入 .cshtml 文件：

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

Oct 31. 2013: Updated with an extra parameter to allow for setting additional HTML attributes to the image element. Usage:

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

回答by frantisek

Another solution is to create your own extension method:

另一种解决方案是创建自己的扩展方法：

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

and as the last parameter is the enumeration LinkOptions

最后一个参数是枚举 LinkOptions

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

and then you can use it as follows:

然后您可以按如下方式使用它：

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

I'll post whole description of this solution on my blog: http://fknet.wordpress.com/

我将在我的博客上发布此解决方案的完整说明：http: //fknet.wordpress.com/

回答by frantisek

See version 7 the Contact Manager Tutorial on http://asp.net/mvc. Stephen Walther has an example of creating an Ajax.ActionLink that is an image.

请参阅http://asp.net/mvc上的 Contact Manager 教程第 7 版。Stephen Walther 有一个创建 Ajax.ActionLink 图像的示例。

回答by MrJavaGuy

The short answer is that is not possible. Your options are to write your own extension method to have an ImageActionLink, not too hard to do. Or add an attribute to the actionLink and replace the innerhtml with the image tag.

简短的回答是这是不可能的。您可以选择编写自己的扩展方法来拥有 ImageActionLink，这并不难。或者给 actionLink 添加一个属性，用 image 标签替换innerhtml。

回答by Valamas

MVC3, Html.ActionImageLink and Ajax.ActionImageLink

MVC3、Html.ActionImageLink 和 Ajax.ActionImageLink

Thank you to all the other answers in helping me with these.

感谢您帮助我解决这些问题的所有其他答案。

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

回答by JotaBe

General solution: include any Razor you want inside the action link

一般解决方案：在操作链接中包含您想要的任何 Razor

There's a much better solution using Razor template delegates, which allows to insert any Razor code inside the action link in a very natural way. So you can add an image, or any other code.

使用 Razor 模板委托有一个更好的解决方案，它允许以非常自然的方式在操作链接中插入任何 Razor 代码。因此，您可以添加图像或任何其他代码。

This is the extension method:

这是扩展方法：

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

An this is how it can be used:

这是它的用法：

@Ajax.ActionLink(car, 
    @<div>
        <h1>@car.Maker</h1>
        <p>@car.Description</p>
        <p>Price: @string.Format("{0:C}",car.Price)</p>
    </div>, ...

This allows to write Razor with intellisense, and use any object you want for the template (the ViewModel, or any other object, like the car in my sample). And you can use any helper inside the template to nest images or whatver element you want.

这允许使用智能感知编写 Razor，并使用您想要的任何对象作为模板（ViewModel 或任何其他对象，如我的示例中的汽车）。您可以使用模板内的任何帮助程序来嵌套图像或任何您想要的元素。

Note for Resharper Users

Resharper 用户注意事项

If you are using R# in your project, you can add R# annotationsto improve Intellisense:

如果您在项目中使用 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)

回答by Ali Adravi

Every answer is good but I found the easiest one:

每个答案都很好，但我找到了最简单的一个：

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

Note that it is using a white space (" ") for the link text. It will not work with an empty text.

请注意，它对链接文本使用了空格 (" ")。它不适用于空文本。

回答by samai

.li_inbox { background: url(inbox.png) no-repeat; padding-left:40px; /image background wight 40px/ }

.li_inbox { 背景：url(inbox.png) 不重复；填充左：40px; /图像背景重量 40 像素/ }

---

---

<li class="li_inbox" >
          @Ajax.ActionLink("Inbox", "inbox","Home", new {  },
            new AjaxOptions
        {
            UpdateTargetId = "MainContent",
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "GET"
          })