web-dev-qa-db-ja.com

ASP.NET MVCのActionLinkに相当する画像

ASP.NET MVCには、ImgタグのHtml.ActionLinkヘルパーに相当するものがありますか？

動的に生成されたJPEGを出力するコントローラーアクションがあり、ActionLinkを使用してHREFを実行するときと同じLambda式を使用してリンクしたいと考えました。

あるいは、URLを単にルートに渡すヘルパー（再びLambdasを使用して指定される）も受け入れられます。

[〜＃〜] edit [〜＃〜]：プレビュー5を使用することを当初指定していましたが、ベータ版がリリースされたことがわかります。だから、私はすぐにアップグレードするかもしれないので、すべてのバージョン番号は不要な情報でした:-)

asp.net-mvcrouting
47
Jason Whitehorn

Url.Action（）は、Html.ActionLinkのほとんどのオーバーロードのベアURLを取得しますが、これまでのURLからのラムダ機能はHtml.ActionLinkを介してのみ利用可能であると思います。願わくば、ある時点で同様のオーバーロードをUrl.Actionに追加することを願っています。

20
stevemegson

URL.Actionメソッドを使用できます

<a href="<%= Url.Action("Create")  %>"><img src="../../Content/Images/add_48.png" /></a>
47
Robert MacLean

この質問は古く、最近RCが公開されたときにASP.NET MVCで始めたばかりですが、後でこの質問を見つけた人にとっては興味深いかもしれません。

少なくともRCでは、匿名型でもUrl.Action（）を使用できます。結果は上記の提案よりもずっときれいに見えます。

<a href="<%= Url.RouteUrl("MyRoute", new { param1 = "bla", param2 = 5 }) %>">
   put in <span>whatever</span> you want, also <img src="a.gif" alt="images" />.
</a>

もちろん、RouteUrlには他にも多くのオーバーロードがあります。

39
realMarkusSchmidt

回避策を使用して、ActionLinkのテキストの代わりにマーカーを配置し、それをイメージコードに置き換えます。このようなもの：

<%= Html.ActionLink("__IMAGE_PLACEHOLDER__", "Products").Replace("__IMAGE_PLACEHOLDER__", "<img src=\"" + myImgUrl + "\" />")%>

最もエレガントなソリューションではありませんが、機能します。

8
Alan Mendelevich

MVC3では、リンクは次のようになります。

<a href="@Url.Action("Create")"><img src="../../Content/Images/add_48.png" /></a>
5
WEFX

ASP.NET MVCベータ版では、Futures Assembly（デフォルトのASP.NET MVCインストールに含まれていない）でHtml.BuildUrlFromExpressionメソッドを使用できます。 、しかし、 CodePlex ）から利用できます。次のように、ラムダスタイルのActionLink構文を使用して、イメージ（または任意のHTML）の周りにリンクを作成します。

<a href="<%=Html.BuildUrlFromExpression<MyController>(c => c.MyAction())%>">
     <%=Html.Image("~/Content/MyImage.gif")%>
</a>

画像リンクをフチ無しに保つには、次のようなCSSルールを追加する必要があります。

img
{
     border: none;
}
4
adamjcooper

このコントロールを使用できます。ActionLinkのように動作します。

http://agilefutures.com/index.php/2009/06/actionimage-aspnet-mvc

3
Tobi

MVC 2で実現するのは非常に簡単です。Url.ActionヘルパーのLambda式をサポートする独自の非常に単純な拡張メソッドを作成しました。 MVC 2 Futuresを参照する必要があります。
コードは次のとおりです。

using System;
using System.Linq.Expressions;
using System.Web.Mvc;
using System.Web.Routing;

using ExpressionHelperInternal=Microsoft.Web.Mvc.Internal.ExpressionHelper;

namespace Bnv.Bssi.Web.Infrastructure.Helpers
{
    public static class UrlExtensions
    {
        public static string Action<TController>(this UrlHelper helper, Expression<Action<TController>> action) where TController : Controller
        {
            RouteValueDictionary routeValuesFromExpression = ExpressionHelperInternal.GetRouteValuesFromExpression<TController>(action);

            return helper.Action(routeValuesFromExpression["action"].ToString(), routeValuesFromExpression);
        }
    }
}

これがあなたの使い方です：

<img src="<%= Url.Action<YourController>(c => c.YourActionMethod(param1, param2)); %>" />
2
Maksymilian Majer

私の投稿が遅すぎることは知っていますが、共有したいです:)

次のような新しい拡張メソッドを追加しました：

public static class ImageExtensions
{
    public static MvcHtmlString ImageLink(this HtmlHelper htmlHelper, string imgSrc, string additionalText = null, string actionName = null, string controllerName = null, object routeValues = null, object linkHtmlAttributes = null, object imgHtmlAttributes = null)
    {
        var urlHelper = ((Controller)htmlHelper.ViewContext.Controller).Url;
        var url = "#";
        if (!string.IsNullOrEmpty(actionName))
            url = urlHelper.Action(actionName, controllerName, routeValues);

        var imglink = new TagBuilder("a");
        imglink.MergeAttribute("href", url);
        imglink.InnerHtml = htmlHelper.Image(imgSrc, imgHtmlAttributes) + " " + additionalText;
        linkHtmlAttributes = new RouteValueDictionary(linkHtmlAttributes);
        imglink.MergeAttributes((IDictionary<string, object>)linkHtmlAttributes, true);

        return MvcHtmlString.Create(imglink.ToString());
    }

    public static MvcHtmlString Image(this HtmlHelper htmlHelper, string imgSrc, object imgHtmlAttributes = null)
    {
        var imgTag = new TagBuilder("img");
        imgTag.MergeAttribute("src", imgSrc);
        if (imgHtmlAttributes != null)
        {
            imgHtmlAttributes = new RouteValueDictionary(imgHtmlAttributes);
            imgTag.MergeAttributes((IDictionary<string, object>)imgHtmlAttributes, true);
        }
        return MvcHtmlString.Create(imgTag.ToString());
    }
}

これが役に立てば幸いです。

2
Wahid Bitar

Url.Content（）はあなたが探しているものですか？

Url.Content（ "〜/ path/to/something.jpg"）のように指定すると、アプリケーションルートに基づいて適切なパスに変換されます。

-ジョシュ

1
Joshua Beall

上記の答えを取り、ラッパー拡張機能を少し作成しました。

    public static MvcHtmlString ActionImageLink(this HtmlHelper helper, string src, string altText, UrlHelper url, string actionName, string controllerName)
        {
            return ActionImageLink(helper, src, altText, url, actionName, controllerName, null, null);
        }

        public static MvcHtmlString ActionImageLink(this HtmlHelper helper, string src, string altText, UrlHelper url, string actionName, string controllerName, Dictionary<string, string> linkAttributes, Dictionary<string, string> imageAttributes)
        {
            return ActionImageLink(helper, src, altText, url, actionName, controllerName, null, linkAttributes, imageAttributes);
        }

        public static MvcHtmlString ActionImageLink(this HtmlHelper helper, string src, string altText, UrlHelper url, string actionName, string controllerName, dynamic routeValues, Dictionary<string, string> linkAttributes, Dictionary<string, string> imageAttributes)
        {
            var linkBuilder = new TagBuilder("a");
            linkBuilder.MergeAttribute("href", routeValues == null ? url.Action(actionName, controllerName) : url.Action(actionName, controllerName, routeValues));

            var imageBuilder = new TagBuilder("img");
            imageBuilder.MergeAttribute("src", url.Content(src));
            imageBuilder.MergeAttribute("alt", altText);

            if (linkAttributes != null)
            {
                foreach (KeyValuePair<string, string> attribute in linkAttributes)
                {
                    if (!string.IsNullOrWhiteSpace(attribute.Key) && !string.IsNullOrWhiteSpace(attribute.Value))
                    {
                        linkBuilder.MergeAttribute(attribute.Key, attribute.Value);
                    }
                }
            }

            if (imageAttributes != null)
            {
                foreach (KeyValuePair<string, string> attribute in imageAttributes)
                {
                    if (!string.IsNullOrWhiteSpace(attribute.Key) && !string.IsNullOrWhiteSpace(attribute.Value))
                    {
                        imageBuilder.MergeAttribute(attribute.Key, attribute.Value);
                    }
                }
            }

            linkBuilder.InnerHtml = MvcHtmlString.Create(imageBuilder.ToString(TagRenderMode.SelfClosing)).ToString();
            return MvcHtmlString.Create(linkBuilder.ToString());
        }

とにかく私にとってそれが簡単になった、それが他の誰かを助けることを願っています。

1
Jon

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

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

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

そして、Ajaxヘルパーでも動作します： https://stackoverflow.com/a/19302438/961139

0
Jeroen Visscher

Html.Imageの出力をHtml.ImageLinkヘルパーに入れようとしました。

@(new HtmlString(Html.ActionLink(Html.Image("image.gif").ToString(), "myAction", "MyController").ToString().Replace("&lt;", "<").Replace("&gt;", ">")))

私にとっての問題は、ActionLink名がエンコードされているため、<の代わりに＆ltが使用されることです。

このエンコードを削除しただけで、結果はうまくいきました。 （置換を使用する代わりにこれを行うより良い方法はありますか？）

0
tivo

他の投稿に追加：私の場合（asp.net mvc 3）言語セレクターとして機能する画像リンクが欲しかったので、次のようになりました：

  public static MvcHtmlString ImageLink(this HtmlHelper htmlHelper, string imgSrc, string cultureName, object htmlAttributes, object imgHtmlAttributes, string languageRouteName = "lang", bool strictSelected = false)
        {
           UrlHelper urlHelper = ((Controller)htmlHelper.ViewContext.Controller).Url;
           TagBuilder imgTag = new TagBuilder("img");
           imgTag.MergeAttribute("src", imgSrc);
           imgTag.MergeAttributes((IDictionary<string, string>)imgHtmlAttributes, true);

           var language = htmlHelper.LanguageUrl(cultureName, languageRouteName, strictSelected);                      
           string url = language.Url;

           TagBuilder imglink = new TagBuilder("a");
           imglink.MergeAttribute("href", url);
           imglink.InnerHtml = imgTag.ToString();
           imglink.MergeAttributes((IDictionary<string, string>)htmlAttributes, true);

           //if the current page already contains the language parameter make sure the corresponding html element is marked
           string currentLanguage = htmlHelper.ViewContext.RouteData.GetRequiredString("lang");
           if (cultureName.Equals(currentLanguage, StringComparison.InvariantCultureIgnoreCase))
           {
              imglink.AddCssClass("selectedLanguage");
           }
           return new MvcHtmlString(imglink.ToString());
        }

内部化のサポートは、言語ルートを介して行われました-元のソース ここ 。

0
Ando