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

Today I worked on a project where I required to display image on the web page. As you know there is not a Html Helper for Images yet. Look at the screen, we can’t see an image here.

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

Data Source & Controller

View

As in the above image, first one (@Html.DisplayFor…) is generated by scaffolding for me (marked as 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 (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 extension method then you will notice that the method returns the exact markup that we need.

Hope this helps.