Recently in one of the trainings I conducted on ASP.NET MVC, I was asked about Image management in the View. The scenario was that images had to be fetched from the database server and then displayed in a View. It required generating the image on the fly and showing it to the user. In this article, we will go through the steps to do this.

Editor’s Note: Storing images in a Database is generally considered a bottleneck for multiple reasons. This was special case requirement that we ran into ‘in the trenches’. Ideally images should be fetched from a CDN (Content Delivery Network). The helper framework would still help, except that it need not do the ‘on-the-fly’ image generation.

As we know in ASP.NET MVC, the View can be bound to a Model and based upon the model binding, View elements (UI controls) can be scaffolded. So now the problem is that we represent an Image as “byte[]” (array) generally and we do not have any standard Html helper method for Image binding (<img src=””> html tag). So to solve this challenge, I decided to use create a Html helper method that encapsulates logic for image fetching and rendering Html Image (<img>) tag.

Html Helper method is an extension method which allows developer to create specific View element by specifying ‘McvHtmlString’ as a return string for the View. This method can now be accessible using ‘HtmlHelper’ object on the View.

For this article I have used the following SQL Server Table:

Step 1: Open VS 2010 and create a new ASP.NET MVC 3 Internet application, name it as ‘MVC3_Displaying_Image’.

Steo 2: On the Model folder, right click and add a new class file, name it as ‘ModelClasses.cs’. In this file, add the following classes for specifying ImageTable data table mapping and data access class as shown below:

Step 3: In the Project, right click and add a new folder, name this folder as ‘HtmlHelperRepository’ and add a new folder of name ‘Images’. In this folder, add a new class file, name it as ‘ImageHelper.cs’. This file contains a Static class ‘ImageHelper’ which has the ‘ImageData’ static method which has first parameter as a reference of the ‘HtmlHelper’ class and the second as the ImageId. This method has the following functionality:

Connects to Database and query to the ImageTable to fetch byte array based upon ImageId and get the byte array.

The Byte array is converted to Bitmap object.

It defines an object of the TagBuilder class to build the html <img> tag.

The UrlHelper object is used to build the URL within the application. This is used to build URL for the Image so that it can be set for html <img> tag.

Using MergeAttribute method of the TagBuilder class the ‘src’ attribute for the <img> is set.

Step 6: Generate the Index View with List scaffold template; from the above method you will get the ImageData folder under View folder. Now delete the default generated Html code from it. We will modify it later.

Step 7: To repeatedly display the Image, I have created a Partial View from where I am calling the Html helper method added above. Right-click on the ‘ImageData’ folder and add a Partial View of name ‘ImageTable.cshtml’ with model as ‘ImageTable’ as below:

The above code adds the partial view created in Step 8 repeatedly by passing ImageTable object (item) to it by iterating through the ImageTable collection. The ‘Partial’ html helper method accepts the first parameter as the url of the partial view.

Step 9: Open _Layout.cshtml in the shared folder and the following action link under the <div> tag having id as menu container as below:

<li>@Html.ActionLink("ImageData", "Index", "ImageData")</li>

Step 10: Run the application, you will get the following result in browser:

Click on the ‘ImageData’ tab, you will get the following images:

Note: Here I have used partial view to show every record separately. But as per your requirements, you can display the record inside a foreach loop of the Index view.

Editors’ Note: You will need to upload images into the database first. The uploading code is not included here.

Right-click on the browser and view source, you will find <image> tag as shown below:

Conclusion

It’s relatively easy to build a custom Html Helper to encapsulate repetitive HTML generation. A developer can create these reusable utilities as per their domain requirements.

About The Author

Mahesh is having 10 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). He also blogs regularly at DotNetCurry.com. Follow him on twitter @maheshdotnet

comments

Yet I am dealing with lots of ASP.NET MVC application but this question was always in my mind where images are being displayed using Custom Html Helper Method. It's good to see the entire solution to which I will be implementing soon.