ASP.NET MVC Ajax.ActionLink with Image

ASP.NET MVC Ajax.ActionLink with Image

---

어쨌든 이미지가 ajax 액션 링크로 작동하는 것이 있습니까? 텍스트로만 작동하도록 할 수 있습니다. 당신의 도움을 주셔서 감사합니다!

---

Stephen Walthe의 Contact manger 프로젝트

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

---

내가 찾은 가장 쉬운 해결책은 다음과 같습니다.

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

Replace () 호출은 img 태그를 작업 링크로 푸시하는 데 사용됩니다 . 링크를 만들려면 "[replaceme]"텍스트 (또는 다른 안전한 텍스트)를 임시 자리 표시 자로 사용하기 만하면됩니다.

---

이것은 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)));
    }

}

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

---

또 다른 해결책은 고유 한 확장 방법을 만드는 것입니다.

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/) 에 게시하겠습니다.

---

짧은 대답은 불가능하다는 것입니다. 당신의 옵션은 ImageActionLink를 갖도록 자신 만의 확장 메소드를 작성하는 것입니다. 또는 actionLink에 속성을 추가하고 innerhtml을 이미지 태그로 바꿉니다.

---

http://asp.net/mvc 의 Contact Manager 자습서 버전 7을 참조하십시오 . Stephen Walther는 이미지 인 Ajax.ActionLink를 만드는 예제를 가지고 있습니다.

---

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

---

일반적인 솔루션 : 액션 링크 안에 원하는 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>, ...

이를 통해 intellisense로 Razor를 작성하고 템플릿에 대해 원하는 개체 (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)

---

모든 대답은 좋지만 가장 쉬운 대답을 찾았습니다.

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

링크 텍스트에 공백 ( "")을 사용하고 있습니다. 빈 텍스트에서는 작동하지 않습니다.

---

첫 번째 해결책은 다음과 같은 도우미 정적 메서드 DecodeLinkContent 를 사용하는 것입니다.

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

DecodeLinkContent는 첫 번째 '>'와 마지막 '<'를 찾아야하며 콘텐츠를 HttpUtility.Decode (content)로 바꿔야합니다.

이 솔루션은 약간의 해킹이지만 가장 쉬운 방법이라고 생각합니다.

---

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

---

.li_inbox {background : url (inbox.png) no-repeat; padding-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()))

---

여기에 좋은 솔루션이 있지만 actionlink에 이미지 만있는 것 이상을 원한다면 어떨까요? 이것이 내가하는 방법입니다.

     @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"와 함께 입력 태그를 사용하는 것입니다.

@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에서는 작동합니다.

---

이 확장을 사용하여 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>

자신의 이미지로

---

다른 사람들은 .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") + "\" />"))

---

모르겠습니다.이게 더 쉬워 보입니다.

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

---

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

        }

    }

}

참고 URL : https://stackoverflow.com/questions/341649/asp-net-mvc-ajax-actionlink-with-image