एक्शन छवि एमवीसी 3 रेजर

Question

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

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

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

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

Answer 2

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

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

Answer 3

ठीक है, आप @Lucas समाधान इस्तेमाल कर सकते हैं, लेकिन वहाँ भी एक और तरीका है आप इस प्रकार का विधि के साथ अपने टैग की जगह सकता है । उस वर्ग के साथ

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

, किसी भी लिंक अपने वांछित छवि होगा:

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

अब, एक सीएसएस फ़ाइल पर या अपने पेज में इस वर्ग जोड़ें।

Answer 4

इस विस्तार विधि भी (एक सार्वजनिक स्थैतिक कक्षा में रखा जाना करने के लिए) काम करता है:

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 5

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

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

Answer 6

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

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 7

सभी बहुत बढ़िया काम ल्यूक द्वारा शुरू किया मैं एक पोस्टिंग कर रहा हूँ कि अधिक करने के लिए जोड़ने के लिए:

जो लोग घुंघराले ब्रेसिज़ से एलर्जी है के लिए, यहाँ VB.NET 'और लुकास के संस्करण क्रेक के जवाब है एक सीएसएस वर्ग मूल्य लेता है और वैकल्पिक पैरामीटर के रूप में वर्ग और alt का व्यवहार करता है (एएसपी.नेट 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); 
    } 

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

सीएसएस कक्षा

.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 Helpers, Merging two object htmlAttributes together" ए nd प्लस निम्नलिखित कोड को controllerName:

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) 
     { 
      //https://stackoverflow.com/questions/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) 
     { 
      //https://stackoverflow.com/questions/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>