web-dev-qa-db-ja.com

ASP.NET MVC Ajax.ActionLink with Image

とにかく画像をajaxアクションリンクとして機能させることはできますか？テキストを使用してのみ動作させることができます。ご協力いただきありがとうございます！

ajaxasp.net-mvchtml.actionlink
71
Jonl

Stephen Walthe、彼の Contact manger project から

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

これが私が見つけた最も簡単な解決策です：

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

Replace（）呼び出しは、アクションリンクにimgタグをプッシュするために使用されます。リンクを作成するための一時的なプレースホルダーとして「[replaceme]」テキスト（またはその他の安全なテキスト）を使用するだけです。

35
Neal Stublen

これは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;" })
30
Arjan Einbu

別の解決策は、独自の拡張メソッドを作成することです。

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/

6
frantisek

http://asp.net/mvc のバージョン7のContact Managerチュートリアルを参照してください。 Stephen Waltherには、イメージであるAjax.ActionLinkを作成する例があります。

5
Baum

簡単な答えは不可能です。あなたのオプションは、ImageActionLinkを持つための独自の拡張メソッドを書くことです。または、actionLinkに属性を追加し、innerhtmlを画像タグに置き換えます。

5
MrJavaGuy

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
Valamas

一般的な解決策：アクションリンク内に必要な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>, ...

これにより、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)
4
JotaBe

すべての答えは良いですが、私は最も簡単なものを見つけました：

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

リンクテキストに空白（ ""）を使用していることに注意してください。空のテキストでは機能しません。

2
Ali Adravi

この拡張機能を使用して、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));
    }
0
TotPeRo

.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"
          })
0
samai

最初の解決策は、ヘルパー静的メソッドDecodeLinkContentを次のように使用することです。

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

DecodeLinkContentは、最初の「>」と最後の「<」を見つけて、コンテンツをHttpUtility.Decode（content）に置き換える必要があります。

このソリューションは少しハックですが、私はそれが最も簡単だと思います。

0
frantisek

ここでは良い解決策ですが、アクションリンクに画像だけを追加したい場合はどうでしょうか？これは私がそれを行う方法です：

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

欠点は、まだボタン要素に少しスタイリングしなければならないことですが、そこに必要なすべてのhtmlを入れることができます。

0
Jeroen Visscher

これに対する最良の解決策は、type = "image"でinputタグを使用することであることがわかりました。

@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でも機能しますが

0
James Pusateri

すべてが非常に素晴らしいソリューションですが、ソリューションに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)を使用しないと、画像は表示されません。

0
Silvio

これを試して

@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()))
0
peter

Templated Razor Delegates を使用した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" })
0
Maslow

私にはわかりませんが、これは私にとって簡単だと思われます：

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

.ToHtmlString（）がMVC 4で文字列を吐き出すので、他の人は私には機能しませんでした。

以下は、idを編集コントロールに渡し、テキストスパグの代わりに編集画像を表示します。

@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") + "\" />"))
0
Jplum

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>

自分のイメージで

0
user1972111