Action Image MVC3 Razor

Question

What is the best way to replace links with images using Razor in MVC3   I simply doing this at the moment    lt a href   Url Action  Edit   new   id MyId     gt  lt img src        Content Images Image bmp   alt  Edit    gt  lt  a gt     Is there a better way

User · Answer

This extension method also works  to be placed in an public static class        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

User · Answer

This turned out to be a very useful thread   For those who are allergic to curly braces  here is the VB NET version of Lucas  and Crake s answers   Public Module ActionImage      lt System Runtime CompilerServices Extension   gt      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  lt img gt  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  lt a gt  tag         Dim aBuilder   New TagBuilder  a           With aBuilder              MergeAttribute  href   url Action Action  RouteValues                InnerHtml   imgHtml  Include the  lt img gt  tag inside             aHtml   aBuilder ToString TagRenderMode Normal          End With          Return MvcHtmlString Create aHtml       End Function       lt Extension   gt      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  lt img gt  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  lt a gt  tag         Dim aBuilder   New TagBuilder  a           With aBuilder              MergeAttribute  href   url Action Action  Controller  RouteValues                InnerHtml   imgHtml  Include the  lt img gt  tag inside             aHtml   aBuilder ToString TagRenderMode Normal          End With          Return MvcHtmlString Create aHtml       End Function  End Module

User · Answer

Building on Lucas s answer above  this is an overload that takes a controller name as parameter  similar to ActionLink   Use this overload when your image links to an Action in a different controller      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  lt img gt  tag     var imgBuilder   new TagBuilder  img        imgBuilder MergeAttribute  src   url Content imagePath        imgBuilder MergeAttribute  alt   alt       string imgHtml   imgBuilder ToString TagRenderMode SelfClosing           build the  lt a gt  tag     var anchorBuilder   new TagBuilder  a         anchorBuilder MergeAttribute  href   url Action action  controllerName  routeValues        anchorBuilder InnerHtml   imgHtml     include the  lt img gt  tag inside     string anchorHtml   anchorBuilder ToString TagRenderMode Normal        return MvcHtmlString Create anchorHtml

User · Answer

You can create an extension method for HtmlHelper to simplify the code in your CSHTML file  You could replace your tags with a method like this      Sample usage in CSHTML  Html ActionImage  Edit   new   id   MyId       Content Images Image bmp    Edit     Here is a sample extension method for the code above      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  lt img gt  tag     var imgBuilder   new TagBuilder  img        imgBuilder MergeAttribute  src   url Content imagePath        imgBuilder MergeAttribute  alt   alt       string imgHtml   imgBuilder ToString TagRenderMode SelfClosing           build the  lt a gt  tag     var anchorBuilder   new TagBuilder  a        anchorBuilder MergeAttribute  href   url Action action  routeValues        anchorBuilder InnerHtml   imgHtml     include the  lt img gt  tag inside     string anchorHtml   anchorBuilder ToString TagRenderMode Normal        return MvcHtmlString Create anchorHtml

User · Answer

To add to all the Awesome work started by Luke I am posting one more that takes a css class value and treats class and alt as optional parameters  valid under ASP NET 3 5     This will allow more functionality but reduct the number of overloaded methods needed      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  lt img gt  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  lt a gt  tag         var anchorBuilder   new TagBuilder  a             anchorBuilder MergeAttribute  href   url Action action  controllerName  routeValues            anchorBuilder InnerHtml   imgHtml     include the  lt img gt  tag inside         string anchorHtml   anchorBuilder ToString TagRenderMode Normal            return MvcHtmlString Create anchorHtml

User · Answer

This would be work very fine     lt a href   lt   Url Action  Edit   Account  new    id item UserId      gt   gt  lt img src        Content ThemeNew images edit notes delete11 png  alt  Edit  width  25px  height  25px    gt  lt  a gt

User · Answer

slide modification changed Helper       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 Class   Edit          background  url     images edit png   no-repeat right         display  inline-block         height  16px         width  16px            Create the link just pass the class name        Html ActionImageLink  Edit   new   id   item ID     Edit     Edit

User · Answer

Well  you could use  Lucas solution  but there s also another way     Html ActionLink  Update    Update    Your object value   new    class    imgLink      Now  add this class on a CSS file or in your page    imgLink     background  url YourImage png  no-repeat      With that class  any link will have your desired image

User · Answer

I have joined the answer from Lucas and  ASP NET MVC Helpers  Merging two object htmlAttributes together  and plus controllerName to following code      Sample usage in CSHTML    Html ActionImage  Edit           EditController          new   id   MyId              Content Images Image bmp          new   width 108  height 129  alt  Edit       And the extension class for the code above   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  lt img gt  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  lt a gt  tag             var anchorBuilder   new TagBuilder  a                anchorBuilder MergeAttribute  href   url Action action  controllerName  routeValues                anchorBuilder InnerHtml   imgHtml     include the  lt img gt  tag inside                         string anchorHtml   anchorBuilder ToString TagRenderMode Normal                return MvcHtmlString Create anchorHtml                      public static IDictionary lt string  object gt  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 lt string  object gt  dictionary   new Dictionary lt string  object gt                  foreach  PropertyInfo property in                      data GetType   GetProperties publicAttributes                                 if  property CanRead                                        dictionary Add property Name  property GetValue data  null                                                return dictionary

User · Answer

You can use Url Content which works for all links as it translates the tilde   to the root uri    lt a href   Url Action  Edit   new   id MyId     gt       lt img src   Url Content    Content Images Image bmp     alt  Edit    gt   lt  a gt

[image] Action Image MVC3 Razor

Examples related to image

Examples related to asp.net-mvc-3

Examples related to action

Examples related to razor