الصورة المكافئة لـ ActionLink في ASP.NET MVC

Question

هل يوجد في ASP.NET MVC ما يعادل مساعد Html.ActionLink لعلامات Img؟

لدي إجراء تحكم يُخرج ملف JPEG تم إنشاؤه ديناميكيًا وأردت استخدام نفس تعبيرات Lambda للارتباط به كما أفعل مع HREFs باستخدام ActionLink.

وبدلاً من ذلك، سيكون المساعد الذي يوفر عنوان URL للمسار (الذي تم تحديده مرة أخرى باستخدام Lambdas) مقبولًا أيضًا.

يحرر:لقد حددت في الأصل أنني كنت أستخدم Preview 5، لكنني أرى أنه قد تم إصدار نسخة تجريبية.لذا، كان رقم الإصدار في المجمل بمثابة معلومة غير ضرورية لأنني قد أقوم بالترقية قريبًا :-)

Answer 1

سيحصل Url.Action() على عنوان URL المجرد لمعظم التحميلات الزائدة لـ Html.ActionLink، لكنني أعتقد أن وظيفة URL-from-lambda متاحة فقط من خلال Html.ActionLink حتى الآن.نأمل أن يضيفوا حملًا زائدًا مشابهًا إلى Url.Action في مرحلة ما.

Answer 2

يمكنك استخدام طريقة URL.Action

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

Answer 3

هذا السؤال قديم، وقد بدأت مؤخرًا باستخدام ASP.NET MVC عندما كان RC خارج الخدمة بالفعل، ولكن بالنسبة لأولئك الذين يجدون هذا السؤال لاحقًا مثلي، فقد يكون هذا مثيرًا للاهتمام:

على الأقل في 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 أيضًا بالطبع.

Answer 4

لقد استخدمت حلاً بديلاً لوضع علامة بدلاً من النص لـ ActionLink ثم استبدالها برمز الصورة الخاص بي.شيء من هذا القبيل:

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

ليس الحل الأكثر أناقة ولكنه يعمل.

Answer 5

في MVC3، سيبدو الرابط الخاص بك كما يلي:

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

Answer 6

في ASP.NET MVC Beta، يمكنك استخدام HTML.BuildUrlFromExpression الطريقة في تجميع العقود الآجلة (والتي لم يتم تضمينها في تثبيت ASP.NET MVC الافتراضي، ولكنها متاحة من كودبلكس) لإنشاء رابط حول صورة - أو أي HTML - باستخدام صيغة ActionLink بنمط lambda، مثل هذا:

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

للحفاظ على روابط الصور الخاصة بك بلا حدود، ستحتاج إلى إضافة قاعدة CSS مثل هذا:

img
{
     border: none;
}

Answer 7

يمكنك استخدام عنصر التحكم هذا. إنه يتصرف مثل ActionLink.

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

Answer 8

من السهل جدًا تحقيقه في MVC 2.لقد قمت بإنشاء طريقة تمديد بسيطة جدًا خاصة بي لدعم تعبيرات Lambda لمساعد Url.Action.يتطلب منك الرجوع إلى العقود الآجلة لـ MVC 2.
إليك الكود:

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)); %>" />

Answer 9

أعلم أن مشاركتي متأخرة جدًا ولكن أريد المشاركة :)

لقد أضفت طريقة تمديد جديدة مثل هذا:

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

نأمل أن يكون هذا ساعد.

Answer 10

هل Url.Content() هو ما تبحث عنه؟

أعطه شيئًا مثل Url.Content("~/path/to/something.jpg") وسيحوله إلى المسار المناسب بناءً على جذر التطبيق.

-جوش

Answer 11

أخذت الإجابات المذكورة أعلاه وأجريت القليل من امتداد المجمع:

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

لقد جعل الأمر أسهل بالنسبة لي على أي حال، وآمل أن يساعد شخص آخر.

Answer 12

حاولت وضع إخراج أتش تي أم أل.صورة في بلدي أتش تي أم أل.ImageLink المساعد.

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

المشكلة بالنسبة لي هي أن اسم ActionLink مشفر لذا لدي &lt بدلاً من <.

لقد قمت للتو بإزالة هذا الترميز وكانت النتيجة مناسبة لي.(هل هناك طريقة أفضل للقيام بذلك بدلاً من استخدام الاستبدال؟)

Answer 13

إضافة إلى المشاركات الأخرى:في حالتي (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());
        }

تم دعم الاستيعاب عبر مسار اللغة - المصدر الأصلي هنا.

Answer 14

حلول رائعة هنا، ولكن ماذا لو كنت تريد الحصول على أكثر من مجرد صورة في رابط الإجراء؟هذه هي الطريقة التي أفعل ذلك:

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

العيب هو أنه لا يزال يتعين علي القيام ببعض التصميم على عنصر الزر، ولكن يمكنك وضع كل html الذي تريده هناك.

ويعمل أيضًا مع مساعد Ajax: https://stackoverflow.com/a/19302438/961139