如何将图像作为Ajax Action Link创建?

时间:2011-02-12 13:13:55

标签: asp.net-mvc-2

如何将图像制作为Ajax Action Link?

3 个答案:

答案 0 :(得分:1)

你可以这样做:

<a href="<%: Url.Action("someaction", "somecontroller") %>" id="mylink">
    <img src="<%: Url.Content("~/images/foo.png") %>" alt="foo" />
</a>

然后在单独的javascript文件中AJAXify这个链接:

$(function() {
    $('#mylink').click(function() {
        $.ajax({
            url: this.href,
            type: 'GET',
            success: function(result) {
                alert('success');
            }
        });
        return false;
    });
});

如果您想在视图中避免标记汤,可以编写自定义帮助程序:

public static class HtmlExtensions
{
    public static MvcHtmlString ImageLink(this HtmlHelper htmlHelper, string actionName, string controllerName, object routeValues, object htmlAttributes, string imageSource)
    {
        var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext, htmlHelper.RouteCollection);
        var image = new TagBuilder("img");
        image.Attributes["src"] = urlHelper.Content(imageSource);
        var anchor = new TagBuilder("a");
        anchor.Attributes["href"] = urlHelper.Action(actionName, controllerName, routeValues);
        anchor.MergeAttributes(new RouteValueDictionary(htmlAttributes));
        anchor.InnerHtml = image.ToString(TagRenderMode.SelfClosing);
        return MvcHtmlString.Create(anchor.ToString());
    }
}

然后在您的视图中简单地说:

<%: Html.ImageLink(
    "someaction", 
    "somecontroller", 
    null, 
    new { id = "mylink" }, 
    "~/images/foo.png"
) %>

当然,AJAX化它的过程保持不变。

答案 1 :(得分:0)

如下:

<a href='<%= Url.Action(...) %>'><img src='...' /></a>

不确定是否有帮助者这样做。

鲍勃

答案 2 :(得分:0)

要将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") + "\" />"
  )
)