Page 1 of 1

ImageExtensions for ASP.Net MVC because the MVC extnesions has yet to support images

#1 coden4fun  Icon User is offline

  • if(coden4fun.NotTired){ ContinueToCode(); }
  • member icon

Reputation: 27
  • View blog
  • Posts: 696
  • Joined: 27-February 09

Posted 05 March 2010 - 05:05 PM

Working in ASP.net MVC 1.0 one day; I realized one day there was no extension method call for images. "That's odd!", I thought, while contemplating the quickest solution around this problem.

I wasn't sure if most people stored their images straight in the database, or stored the image source text in the database (which I do the latter, for it saves up resources on the server), so I decided to make the most minimalistic class extension using the System.Web.MVC namespace and the HtmlHelper, so it would fit right in to the System.Web.MVC toolkit as if it were there.

Once I got working on it I realized it was quite simple. The following are overloaded methods written in C# specifically written to solve the very problem.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Helpers
{
    public static class ImageExtensions
    {
        /// <summary>
        /// A simple Image
        /// </summary>
        /// <param name="imgUrl">url of the Image</param>
        /// <param name="alt">alt of the Image for SEO purposes</param>
        /// <returns></returns>
        public static string Image(this HtmlHelper helper, string imgUrl, string alt)
        {
            return Image(helper, imgUrl, null, alt);
        }

        /// <summary>
        /// A Simple Image
        /// </summary>
        /// <param name="imgUrl">the url of the image</param>
        /// <param name="htmlName">ID of the Image (use for javascript)</param>
        /// <param name="alt">alt of the Image for SEO purposes</param>
        /// <returns></returns>
        public static string Image(this HtmlHelper helper, string imgUrl, string htmlName, string alt)
        {
            return Image(helper, imgUrl, htmlName, alt, null);
        }

        /// <summary>
        /// A Simple Image
        /// </summary>
        /// <param name="imgUrl">The url of the image</param>
        /// <param name="htmlName">ID of the Image (use for javascript)</param>
        /// <param name="htmlName">alt of the Image for SEO purposes</param>
        /// <param name="alt">css Class for given Image</param>
        /// <param name="cssClass">cssClass for the given Image</param>
        /// <returns></returns>
        public static string Image(this HtmlHelper helper, string imgUrl, string htmlName, string alt, string cssClass)
        {
            return "<img src='{0}', id='{1}', alt='{2}', class='{3}' />";
        }
    }
}



and to use it in your aspx templates you can simply do the following

First add the Namespace of Helpers to your aspx template like the following
<%@ Import Namespace="Helpers" %>



Then when you want to use the following image extension call it from the Html Helper class in the System.Web.MVC namespace.

Please note Model is the corresponding data model we're working on in the aspx template. Each column represented in the code below has an nvarchar of x length.
<%= Html.Image(Model.imgSrc, Model.BannerAd, Model.alt, BannerDiv) %>



And it worked. Success! It was that simple finding a work around for a control that is used quite frequently in web development.

If you have any questions I won't mind answering them if there is any confusion.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1