Creating your own UrlHelper Extension with MVC Creating your own UrlHelper Extension with MVC

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.


Using the Url.Content

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="" />

Creating your own UrlHelper Extension

Now, if all of your images exist inside of the Content/Images folder, it could save 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

Summary of the UrlHelper Extension

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.

Published on Mar 9, 2019

Tags: urlhelper | ASP.NET MVC and Web API Tutorial | Theory

Related Posts

Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article that you just finished reading.

Tutorials

Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.

No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in and improve your skillset with any of the tutorials below.