ASP.NET MVC Ajax.ActionLink с изображением - PullRequest
71 голосов
/ 04 декабря 2008

Есть ли в любом случае изображение, действующее как ajax actionlink? Я могу заставить его работать только с помощью текста. Спасибо за вашу помощь!

Ответы [ 21 ]

66 голосов
/ 01 ноября 2009

От Стивена Уолта, из его Проекта менеджера контактов

 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" })%> 
35 голосов
/ 23 апреля 2009

Вот самое простое решение, которое я нашел:

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

Вызов Replace () используется для вставки тега img в ссылку действия. Вам просто нужно использовать текст «[replaceme]» (или любой другой безопасный текст) в качестве временного заполнителя для создания ссылки.

30 голосов
/ 01 июня 2011

Это обновление 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)));
    }

}

Теперь вы можете ввести свой файл .cshtml:

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

31 октября 2013 г. Обновлен дополнительный параметр, позволяющий устанавливать дополнительные атрибуты 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;" })
6 голосов
/ 16 января 2009

Другое решение - создать собственный метод расширения:

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/

5 голосов
/ 30 марта 2009

См. Версию 7 Учебника по Contact Manager на http://asp.net/mvc. У Стивена Уолтера есть пример создания Ajax.ActionLink, который является изображением.

5 голосов
/ 04 декабря 2008

Краткий ответ: это невозможно. Вы можете написать собственный метод расширения, чтобы иметь ImageActionLink, что не так сложно сделать. Или добавьте атрибут в actionLink и замените innerhtml тегом image.

4 голосов
/ 14 июля 2011

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)));
}
4 голосов
/ 17 июня 2013

Общее решение: включите любую бритву, которую вы хотите, внутри ссылки действия

Существует гораздо лучшее решение с использованием делегатов шаблонов 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 с intellisense и использовать любой объект, который вы хотите для шаблона (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)
2 голосов
/ 11 апреля 2012

Каждый ответ хорош, но я нашел самый простой:

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

Обратите внимание, что для текста ссылки используется пробел (""). Он не будет работать с пустым текстом.

0 голосов
/ 08 февраля 2015

Использовать атрибуты данных 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>

со своим изображением

...