एक्शन इमेज MVC3 रेजर

Question

MVC3 में रेजर का उपयोग करके छवियों के साथ लिंक को बदलने का सबसे अच्छा तरीका क्या है। मैं फिलहाल यही कर रहा हूं:

<a href="@Url.Action("Edit", new { id=MyId })"><img src="../../Content/Images/Image.bmp", alt="Edit" /></a> 

क्या कोई बेहतर तरीका है?

Comments

सीधे संबंधित नहीं है, लेकिन मैं आपको दृढ़ता से सुझाव दूंगा कि आप बीएमपी फाइलों के बजाय पीएनजी या जेपीजी फाइलों (छवि सामग्री के आधार पर) का उपयोग करें। और जैसे @jgauffin ने सुझाव दिया, अनुप्रयोग सापेक्ष पथ ( ~/Content) का उपयोग करने का भी प्रयास करें । पथ ../../Contentअलग-अलग मार्गों से मान्य नहीं हो सकते (उदाहरण के लिए /, /Home, /Home/Index)।

— लुकास

धन्यवाद लुकास। मैं png का उपयोग करता हूं, लेकिन URL का उपयोग करने के लिए सलाह देता हूं। कॉन्टेंट वह है जो मैं खोज रहा था। वोट :)

— डेवी

Answer 1

आप अपनी CSHTML फ़ाइल में कोड को सरल बनाने के लिए HtmlHelper के लिए एक एक्सटेंशन विधि बना सकते हैं। आप अपने टैग को इस तरह से विधि से बदल सकते हैं:

// Sample usage in CSHTML
@Html.ActionImage("Edit", new { id = MyId }, "~/Content/Images/Image.bmp", "Edit")

यहाँ ऊपर दिए गए कोड के लिए एक नमूना विस्तार विधि है:

// Extension method
public static MvcHtmlString ActionImage(this HtmlHelper html, string action, object routeValues, string imagePath, string alt)
{
    var url = new UrlHelper(html.ViewContext.RequestContext);

    // build the <img> tag
    var imgBuilder = new TagBuilder("img");
    imgBuilder.MergeAttribute("src", url.Content(imagePath));
    imgBuilder.MergeAttribute("alt", alt);
    string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);

    // build the <a> tag
    var anchorBuilder = new TagBuilder("a");
    anchorBuilder.MergeAttribute("href", url.Action(action, routeValues));
    anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside
    string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);

    return MvcHtmlString.Create(anchorHtml);
}

Comments

बहुत बढ़िया स्निपेट। किसी को भी T4MVC के साथ इसका उपयोग routeValuesकरना है ActionResultऔर इसके प्रकार में परिवर्तन करना है और फिर इसे url.Actionबदलना routeValuesहैrouteValues.GetRouteValueDictionary()

— JConstantine

@ कैस्पर स्कोव: विधि को एक स्थिर वर्ग में रखें, फिर उस वर्ग के नामस्थान को वेब में रखें /configuration/system.web/pages/namespaces। तत्व में।

— उमर फारुख ख्वाजा

अच्छा है !, इसके बजाय alt, मैं एक वस्तु को तब var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);और अंत में एक अनाम वस्तु का उपयोग करके html गुण प्राप्त करने के लिए स्वीकार करता हूंforeach (var attr in attributes){ imgBuilder.MergeAttribute(attr.Key, attr.Value.ToString());}

— guzart

मुझे यह काम तब तक नहीं मिला जब तक मुझे यह महसूस नहीं हो गया कि क्योंकि मैं क्षेत्रों के वर्ग के नामस्थान (उमर द्वारा इंगित) के संदर्भ का उपयोग कर रहा हूं, सभी क्षेत्रों के लिए और साथ ही दृश्य फ़ोल्डर में सभी web.config फ़ाइलों को जोड़ना होगा। शीर्ष स्तर /Viewsफ़ोल्डर

— Mark_Gibson 11

यदि आपको केवल एक पृष्ठ में इसकी आवश्यकता है, तो Web.config फ़ाइलों को बदलने के बजाय, आप .cshml में एक @use statement जोड़ सकते हैं और नाम स्थान का संदर्भ दे सकते हैं

— JML

Answer 2

आप उपयोग कर सकते हैं Url.Contentजो सभी लिंक के लिए काम करता है क्योंकि यह ~रूट यूरी को टिल्ड का अनुवाद करता है ।

<a href="@Url.Action("Edit", new { id=MyId })">
    <img src="@Url.Content("~/Content/Images/Image.bmp")", alt="Edit" />
</a>

Comments

यह MVC3 में शानदार काम करता है। धन्यवाद! <a href="@Url.Action("Index","Home")"><img src="@Url.Content("~/Content/images/myimage.gif")" alt="Home" /></a>

— rk1962

Answer 3

ऊपर लुकास के उत्तर पर बिल्डिंग, यह एक अधिभार है जो एक्शनलिंक के समान एक नियंत्रक नाम पैरामीटर के रूप में लेता है। जब आपकी छवि किसी भिन्न नियंत्रक में किसी क्रिया से लिंक करती है तो इस अधिभार का उपयोग करें।

// Extension method
public static MvcHtmlString ActionImage(this HtmlHelper html, string action, string controllerName, object routeValues, string imagePath, string alt)
{
    var url = new UrlHelper(html.ViewContext.RequestContext);

    // build the <img> tag
    var imgBuilder = new TagBuilder("img");
    imgBuilder.MergeAttribute("src", url.Content(imagePath));
    imgBuilder.MergeAttribute("alt", alt);
    string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);

    // build the <a> tag
    var anchorBuilder = new TagBuilder("a");

    anchorBuilder.MergeAttribute("href", url.Action(action, controllerName, routeValues));
    anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside
    string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);

    return MvcHtmlString.Create(anchorHtml);
}

Comments

आपके ऐड पर कोई टिप्पणी नहीं ... अच्छी तरह से मैं दिए गए कोड में अच्छा संशोधन कहता हूं। मुझ से +1।

— ज़ैक जैनसेन

Answer 4

ठीक है, आप @ लुकास समाधान का उपयोग कर सकते हैं, लेकिन एक और तरीका भी है।

 @Html.ActionLink("Update", "Update", *Your object value*, new { @class = "imgLink"})

अब, इस क्लास को CSS फ़ाइल या अपने पेज पर जोड़ें:

.imgLink
{
  background: url(YourImage.png) no-repeat;
}

उस वर्ग के साथ, किसी भी लिंक पर आपकी वांछित छवि होगी।

Comments

@ कैस्परस्कोव मैं इस छोटी सी समस्या को भूल गया। किसी कारण के लिए, एक्शनलिंक हेल्पर का यह विशेष ओवरराइड, ऊपर दिए गए उदाहरण के साथ काम नहीं करता है। आपको ControllerNameअपनी कार्रवाई करनी है । जैसे:@Html.ActionLink("Update", "Update", "*Your Controller*",*object values*, new {@class = "imgLink"})

— AdrianoRR

Answer 5

यह एक बहुत उपयोगी धागा निकला।

जिन लोगों को घुंघराले ब्रेसिज़ से एलर्जी है, उनके लिए यहां लुकास का वीबी.नेट संस्करण 'और क्रेक के उत्तर हैं:

Public Module ActionImage
    <System.Runtime.CompilerServices.Extension()>
    Function ActionImage(html As HtmlHelper, Action As String, RouteValues As Object, ImagePath As String, AltText As String) As MvcHtmlString

        Dim url = New UrlHelper(html.ViewContext.RequestContext)

        Dim imgHtml As String
        'Build the <img> tag
        Dim imgBuilder = New TagBuilder("img")
        With imgBuilder
            .MergeAttribute("src", url.Content(ImagePath))
            .MergeAttribute("alt", AltText)
            imgHtml = .ToString(TagRenderMode.Normal)
        End With

        Dim aHtml As String
        'Build the <a> tag
        Dim aBuilder = New TagBuilder("a")
        With aBuilder
            .MergeAttribute("href", url.Action(Action, RouteValues))
            .InnerHtml = imgHtml 'Include the <img> tag inside
            aHtml = aBuilder.ToString(TagRenderMode.Normal)
        End With

        Return MvcHtmlString.Create(aHtml)

    End Function

    <Extension()>
    Function ActionImage(html As HtmlHelper, Action As String, Controller As String, RouteValues As Object, ImagePath As String, AltText As String) As MvcHtmlString

        Dim url = New UrlHelper(html.ViewContext.RequestContext)

        Dim imgHtml As String
        'Build the <img> tag
        Dim imgBuilder = New TagBuilder("img")
        With imgBuilder
            .MergeAttribute("src", url.Content(ImagePath))
            .MergeAttribute("alt", AltText)
            imgHtml = .ToString(TagRenderMode.Normal)
        End With

        Dim aHtml As String
        'Build the <a> tag
        Dim aBuilder = New TagBuilder("a")
        With aBuilder
            .MergeAttribute("href", url.Action(Action, Controller, RouteValues))
            .InnerHtml = imgHtml 'Include the <img> tag inside
            aHtml = aBuilder.ToString(TagRenderMode.Normal)
        End With

        Return MvcHtmlString.Create(aHtml)

    End Function

End Module

Answer 6

यह विस्तार विधि भी काम करती है (सार्वजनिक स्थैतिक वर्ग में रखा जाना):

    public static MvcHtmlString 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 new MvcHtmlString( link.ToHtmlString().Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing)) );
    }

Answer 7

ल्यूक द्वारा शुरू किए गए सभी भयानक कामों को जोड़ने के लिए मैं एक और पोस्ट कर रहा हूं जो एक सीएसएस वर्ग मूल्य लेता है और वैकल्पिक मापदंडों (ASP.NET 3.5+ के तहत मान्य) के रूप में वर्ग और कुल मिलाकर व्यवहार करता है। यह अधिक कार्यक्षमता की अनुमति देगा लेकिन अतिभारित तरीकों की संख्या को कम करना चाहिए।

// Extension method
    public static MvcHtmlString ActionImage(this HtmlHelper html, string action,
        string controllerName, object routeValues, string imagePath, string alt = null, string cssClass = null)
    {
        var url = new UrlHelper(html.ViewContext.RequestContext);

        // build the <img> tag
        var imgBuilder = new TagBuilder("img");
        imgBuilder.MergeAttribute("src", url.Content(imagePath));
        if(alt != null)
            imgBuilder.MergeAttribute("alt", alt);
        if (cssClass != null)
            imgBuilder.MergeAttribute("class", cssClass);

        string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);

        // build the <a> tag
        var anchorBuilder = new TagBuilder("a");

        anchorBuilder.MergeAttribute("href", url.Action(action, controllerName, routeValues));
        anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside
        string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);

        return MvcHtmlString.Create(anchorHtml);
    }

Comments

इसके अलावा, एमवीसी के लिए किसी भी नए, सहायक संकेत के लिए - रूटवैल्यू शॉडल का मान @ रूटटेबल होगा।

— ज़ैक जैनसेन

Answer 8

स्लाइड संशोधन ने हेल्पर को बदल दिया

     public static IHtmlString ActionImageLink(this HtmlHelper html, string action, object routeValues, string styleClass, string alt)
    {
        var url = new UrlHelper(html.ViewContext.RequestContext);
        var anchorBuilder = new TagBuilder("a");
        anchorBuilder.MergeAttribute("href", url.Action(action, routeValues));
        anchorBuilder.AddCssClass(styleClass);
        string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);

        return new HtmlString(anchorHtml);
    }

CSS क्लास

.Edit {
       background: url('../images/edit.png') no-repeat right;
       display: inline-block;
       height: 16px;
       width: 16px;
      }

लिंक बनाएं बस क्लास का नाम पास करें

     @Html.ActionImageLink("Edit", new { id = item.ID }, "Edit" , "Edit") 

Answer 9

मैं लुकास और " ASP.NET MVC हेल्पर्स, दो ऑब्जेक्ट htmlAttributes एक साथ विलय " और प्लस कंट्रोलरनाम से निम्नलिखित कोड में उत्तर मिला है:

// CSHTML में नमूना उपयोग

 @Html.ActionImage("Edit",
       "EditController"
        new { id = MyId },
       "~/Content/Images/Image.bmp",
       new { width=108, height=129, alt="Edit" })

और ऊपर दिए गए कोड के लिए एक्सटेंशन क्लास:

using System.Collections.Generic;
using System.Reflection;
using System.Web.Mvc;

namespace MVC.Extensions
{
    public static class MvcHtmlStringExt
    {
        // Extension method
        public static MvcHtmlString ActionImage(
          this HtmlHelper html,
          string action,
          string controllerName,
          object routeValues,
          string imagePath,
          object htmlAttributes)
        {
            ///programming/4896439/action-image-mvc3-razor
            var url = new UrlHelper(html.ViewContext.RequestContext);

            // build the <img> tag
            var imgBuilder = new TagBuilder("img");
            imgBuilder.MergeAttribute("src", url.Content(imagePath));

            var dictAttributes = htmlAttributes.ToDictionary();

            if (dictAttributes != null)
            {
                foreach (var attribute in dictAttributes)
                {
                    imgBuilder.MergeAttribute(attribute.Key, attribute.Value.ToString(), true);
                }
            }                        

            string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);

            // build the <a> tag
            var anchorBuilder = new TagBuilder("a");
            anchorBuilder.MergeAttribute("href", url.Action(action, controllerName, routeValues));
            anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside            
            string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);

            return MvcHtmlString.Create(anchorHtml);
        }

        public static IDictionary<string, object> ToDictionary(this object data)
        {
            ///programming/6038255/asp-net-mvc-helpers-merging-two-object-htmlattributes-together

            if (data == null) return null; // Or throw an ArgumentNullException if you want

            BindingFlags publicAttributes = BindingFlags.Public | BindingFlags.Instance;
            Dictionary<string, object> dictionary = new Dictionary<string, object>();

            foreach (PropertyInfo property in
                     data.GetType().GetProperties(publicAttributes))
            {
                if (property.CanRead)
                {
                    dictionary.Add(property.Name, property.GetValue(data, null));
                }
            }
            return dictionary;
        }
    }
}

Answer 10

यह बहुत ठीक काम होगा

<a href="<%:Url.Action("Edit","Account",new {  id=item.UserId }) %>"><img src="../../Content/ThemeNew/images/edit_notes_delete11.png" alt="Edit" width="25px" height="25px" /></a>