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

Answers:

67

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

}

您现在可以输入aspx文件：

<%= Ajax.ImageActionLink("../../Content/Delete.png", "Delete", "Delete", new { id = item.Id }, new AjaxOptions { Confirm = "Delete contact?", HttpMethod = "Delete", UpdateTargetId = "divContactList" })%>
— 黑荷鲁斯
source
2
仅供参考，我向ImageActionLink方法添加了一个附加参数，以接受控制器名称，就像MVC ActionLink方法一样，并且可以完美地工作！感谢
— Dustin Laine
14
除此之外，上面的代码示例链接中将没有方法“替换”为可用选项。您需要先对其调用ToString（）或ToHtmlString（），然后才能调用Replace（）。
— mwright 2010年
我有点傻，但是，我不知道如何实现这一点。我想您不能解释一下课程需要去的地方吗？
— WIL
1
@wil这是一个帮助器类（注意关键字this）。只需将其放在任何地方并通过引用即可@using，您应该可以使用新方法。
— ashes999
1
自定义帮助程序ImageActionLink将呈现文本而不标记，直到返回类型从字符串更改为IHtmlString
— rumi 2014年
35

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

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

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

— 尼尔·斯塔布伦
source
1
我喜欢这个务实的解决方案！
— 罗布斯塔2009年
尼斯和聪明的解决方案。谢谢。
— Naveed Butt
4
我尝试使用上面的代码（在“ .Replace”之前与.ToHtmlString（）结合使用），但并不能解决问题。它只是将整个字符串扔在那里。这在mvc3中有所更改，还是我缺少了什么？
— PedroC88
我也可以建议返回return new MvcHtmlString(link);MVC3
— Valamas，
3
@ PedroC88您可以使用Html.Raw（...）将其包装起来，而Razor不会对其进行编码
— Fernando Neira
33

这是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日：更新了额外的参数，以允许为图像元素设置其他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;" })
— 阿尔扬·爱因布（Arjan Einbu）
source
感谢更新。这很有帮助；但是，.cshtml行的末尾似乎还有2个额外的字符。
— 卑鄙的2011年
谢谢@snumpy！这是一个典型的复制粘贴错误... :)它的固定
— 阿尔扬Einbu
我有点傻，但是，我不知道如何实现这一点。我想您不能解释一下课程需要去的地方吗？
— WIL
您可以将其放置在任何地方。（在MVC应用程序的根级别上可以正常工作...）（您可能需要在剃刀文件的顶部放置@using指令，指向类的命名空间，如果有的话）
— Arjan Einbu
我建议您添加一个属性参数以设置渲染图像中的属性和样式。（例如，清除默认图像边框）。可以在以下链接中找到有用的示例kitsula.com/Article/Html.ImageActionLink-extension
— Ghini
6

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

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/

— 法兰西塞克
source
5

简短的答案是不可能的。您的选择是编写自己的扩展方法以具有ImageActionLink，这并不难。或向actionLink添加一个属性，然后将image替换为innerhtml。

— 盖瑞先生
source
5

请参阅http://asp.net/mvc上的“ Contact Manager教程”第7版。Stephen Walther举例说明了如何创建一个Ajax.ActionLink图像。

4

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)));
}
— 瓦拉马斯
source
注意：您需要在代码中进行以下编译（VS 2010无法解决扩展方法缺少的引用）：using System.Web.Mvc.Ajax; 使用System.Web.Mvc.Html;
— Eric J.
4

通用解决方案：在操作链接中包含您想要的任何剃刀

使用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或任何其他对象，例如我的示例中的汽车）。而且，您可以使用模板内的任何帮助器来嵌套图像或所需的任何元素。

给共享者的注意事项

如果在项目中使用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)
— 乔塔贝
source
我认为这是最好的解决方案。紧凑且易于标记！
— Mike Eshva 2014年
唯一的缺点是R＃无法理解。
— Mike Eshva 2014年
我在哪里可以放置此扩展方法？
— Daniel Petrovaliev 2015年
“我可以在哪里放置此扩展方法”是什么意思？我不明白你的意思。您是否期望得到这样的答案：在任何静态类中定义方法，并using在Razor文件中包含以便能够使用它？
— JotaBe 2015年
1

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

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

请注意，链接文本使用空格（“”）。空文本将不起作用。

— 阿里·阿德拉维（Ali Adravi）
source
0

第一种解决方案是使用如下的辅助静态方法DecodeLinkContent：

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

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

这个解决方案有点破烂，但我认为这是最简单的。

— 法兰西塞克
source
0

使用模板化剃刀代表对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" })
— 马斯洛
source
0

.li_inbox {背景：url（inbox.png）不重复；padding-left：40px; /图片背景尺寸40px /}

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

— 萨迈
source
0

尝试这个

@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()))
— 彼得
source
请编辑您的答案并格式化代码以使其可读
— kleopatra 2013年
0

这里有不错的解决方案，但是如果您想在动作链接中仅拥有一张图片，该怎么办？这是我的方法：

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

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

— 杰罗恩·维舍（Jeroen Visscher）
source
0

都是很好的解决方案，但是如果您不喜欢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)，则图像不会显示。

— 西尔维奥
source
0

我发现，最好的解决方案是将输入标签与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的控件库结合使用，因此我倾向于输入整个System.Web.Mvc.Ajax.AjaxOptions，以防万一我将来尝试使用其他集合。

注意： 我注意到这似乎在MVC3中确实存在问题（与type =“ image”有关），尽管它确实适用于MVC 4

— 詹姆斯·普萨特里
source
0

使用此扩展来生成带有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="https://stackoverflow.com/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));
    }
— 托佩罗
source
0

使用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>
展开摘要

用自己的形象

— 用户1972111
source
0

其他人对我不起作用，因为.ToHtmlString（）在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") + "\" />"))
— Jplum
source
-1 
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)));

        }

    }

}
— Mithat CAN
source
-2

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

    <a href="@Url.Action("index", "home")">
        <img src="~/Images/rocket.png" width="25" height="25" title="Launcher" />
    </a>
— 约翰·编码
source
无法回答问题
— Derrick
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.