HTML Helper For Image (@Html.Image): Developing Extension in MVC

Abhimanyu K Vatsa

MVCExtension in MVCHtml Helper for Image

11 Comments

Join the conversation! Your thoughts help the community grow.

Marko Pavic9y ago
Nice article thanks!
Suraj Renke9y ago
I'm unable to merge width attribute
Abdul Amin Khan9y ago
Very Helpful... I was searching same. Thanks
Upendra Pratap Shahi9y ago
Nice one...........................
salman khan11y ago
@Html.image("@model.imagesrc,"aa",100) is not working
- Marko Pavic9y ago
  Try this: @Html.image(@model.imagesrc,"aa",100)
Anil Saxena14y ago
Thanks for sharing your experience. It's really helpful for developing extension method in MVC.
Vishal Chauhan14y ago
This is great and useful to create extension methods..
Anshika Mittal14y ago
nice article abhimanyu sir...
Megha Goyal14y ago
Really this is the nice concept in MVC.
Nishant Roy14y ago
Thanks for sharing this article.

Today I worked on a project where I am required to display an image on the web page. As you know there is not a HTML Helper for images yet. Look at the following screen, we can't see an image here:

Before proceeeding in this article, let me share the sample data source here (I can't share the original data so I created a set of dummy data with a controller here):

Data Source & Controller

View

As in the above image, the first one (@Html.DisplayForâ€¦) is generated by scaffolding for me (marked as a comment in the above view) and the second one is an alternative that will work.

So, we don't have a HTML helper to deal with images using Razor syntax! Wait wait. We can develop an extension method for this that will allow us to work with images. Let's get started.

Step 1: Add a class file using the following code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace MvcApplication8.Models

{

public static class ImageHelper

{

public static MvcHtmlString Image(this HtmlHelper helper, string src, string altText, string height)

{

var builder = new TagBuilder("img");

builder.MergeAttribute("src", src);

builder.MergeAttribute("alt", altText);

builder.MergeAttribute("height", height);

return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));

}

}

The above "Image" function has the "MvcHtmlString" type and will accept a four-parameter helper (helper type "image"), src (image path), altText (alternative text) and height (height of image) and will return a "MvcHtmlString" type.

Step 2: In the view, comment-out the last line (HTML style approach) and use the new extended method for the image, as in:

Note: Please note to use "@using MvcApplication8.Models" namespace on each view page to enable this new HtmlHelper.

Step 3: If you put a breakpoint on the extension method then you will notice that the method returns the exact markup that we need.

Hope this helps.