powered by Slim Framework
enhanced by Nesbot.com

MVC3: Using Class Extensions to simplify your code with the UrlHelper

Published on Sep 15, 2011 by Jamie Munro

When you have a website with a lot of static content: images, Javascript, CSS, etc… you will find yourself constantly typing out the same path information with the exception of the name of the actual file.  Creating a class extension to the UrlHelper can help greatly reduce your development efforts with a few simple additions.

If you are not already doing so, you should start using the UrlHelper to include static content.  For example, your CSS file should be loaded as follows:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

The UrlHelper makes it easy to include files without the need to specify an absolute or relative path, allowing your code to exist inside of a sub folder.

Like your CSS files, your images should be referenced in a similar fashion to:

<img src="@Url.Content("~/Content/Images/title.png")" alt="" />

Now, if all of your images exist inside of the Content/Images folder, it could have a lot of time if you simplified your code as follows:

<img src="@Url.Image("title.png")" alt="" />

Each time you create an image, there is a lot less typing to do.  Furthermore, if you ever decided to move your images to a different directly, it will be as simple as changing one line of code.

To accomplish the above example, you will need to create an extension class to the UrlHelper class built-in to the MVC namespace.  To complete this example, I would suggest creating a new folder called Helpers, assuming you do not already have one, in your project to help keep your code organized.  Then inside this folder, create a new class called UrlHelperExtension.

using System;
using System.Web.Mvc;

namespace MvcApplication.Helpers
public static class UrlHelperExtension
public static string Image(this UrlHelper helper, string imageName)
return helper.Content("~/Content/Images/" + imageName);

In the above code, this UrlHelper helper, is the first parameter in the function and the imageName is second; however, if you recall in the previous example, we only passed one parameter.  This is the beauty of extension classes.  The compiler translates the code into a call on the static method.

To complete this example off, you must ensure that you manually include a using directive in your MVC views to the helper class to ensure it's available on the view:

@using MvcApplication.Helpers;

// .. your other html/razor code

<img src="@Url.Image("title.png")" alt="" />

// .. your other html/razor code


By extending built-in ASP.NET classes you can easily add new helper functions that leverage existing functions of that class.  Extensions should be used sparingly and typically for simple add-ons like the above example.  For more complex examples, the classes mostly likely should be inherited instead of extended.

Tags: ASP.NET | mvc3

<- HTML5: Creating an HTML5 Website and degrading for older browsers  Home CSS3: Attribute Selectors -> 
blog comments powered by Disqus