Umbraco 9 Route hijacking | Custom RenderControllers | How and Why

What is Route hijacking in Umbraco 9?

Route hijacking is a technique I've loved for quite some time. A little bit of history..

When I started out with earlier versions on Umbraco I found that by the end of the project my Razor Views looked really messy and contained a lot of code. I didn't really like this kind of setup. It seemed Umbraco sort of took away controllers form the developer and all the main code always ended up within the razor views.

There were ways to clean this up such as moving code into static classes and importing the code in to the Razor View from there. I still didn't like this setup and kind of felt even though we were coding in MVC we were not really following the MVC pattern since the controllers were used for the Umbraco base code and tucked away from us devs.

I kind of persevered with this approach for a number of years since I just didn't have time to figure out a better approved. As I got used to Umbraco and gradually kept improving my code I came across what's know as 'Route Hijacking'.

So what is Route Hijacking I hear you say...

This is a way of 'Hijacking' the request and running it through your own controller before pushing everything to the view. This is a really handy technique if you have a lot of code relating to a page been requests. The page might have a load of Lucene searching doing on, it might be a blog article which has a load of related blog articles that's smartly assigned with some algorithm you created.

You obviously would prefer this code not to be all stored on the Razor View. Instead you can use 'Route Hijacking' to capture the request, add a number of properties on the view model (maybe your related blog articles) before pushing it back out to the View. This way your Razor View would be nice and clean, not containing any code other than your basic html and Razor script.

What's my usual setup and when do I use 'Route Hijacking'

I pretty much use 'Route Hijacking' for everything. Over time I moved away from the out of the box Umbraco rendering and ran everything through my custom controllers. I just found that it took a little longer to get set up at the beginning of a project but over time this massively speeded up the time I could code websites (by a hell of a lot).

What's my usual setup? 

1. I create a custom Render Model for each of my page types 'HomePageViewModel', 'ContentPageViewModel' etc.

2. I then cast the Umbraco Models Builder content to a Strongly Typed Model stored on my RenderModel

Eg. 

public HomePage StronglyTyped { get; set; }

This later allows me awesome use of Visual Studio intellisense throughout the whole project in my Razor Views.

@Model.StronglyTyped.MainText

3. All my custom Render Model inherit from a 'Base Render Model' I create.

4. Inside the 'Base Render Model' I have a load of properties that are commonly used across all pages. 

These might include...

• Site Settings (reading from a doc type stored in Umbraco)
• Site Settings (reading from application settings)
• Meta Data
• Common Navigation Settings (Social Media Links etc)
• Commonly used Contact Details (Phone, Email etc)

This means I can surface site settings and common data to all pages without having to add any extra code to razor view like GetSiteSettings, GetSocialMediaLinks etc.

5. I then have a custom MVC render controller which captures the request, gets the incoming model from Umbraco, parses it to my custom model and then passed it out to the view. This controller is also a great place to add all your custom cs.net code like I mentioned above. Maybe you could add a new property to your HomePageViewModel called 'PopularBlogArticles' and have some code stored in your controller to handle the smarts around this.

 

How to 'Route Hijacking' with Umbraco 9

This changed somewhat to Umbraco 7 and 8. It is best I give you some code examples of some very simples models and controllers. I set up.

1. The Custom Render Model

If you ModelBuilder doc type is called HomePage then I like to call my custom render model HomePageViewModel. This must inherit from ContentModel. If you want to go down the same path as me and have a 'Base Render Model' then I will let you figure that out. That or drop me a message and I will show you some examples of my setup in more detail. The setup in my example is just the basics to get you up and running with Route Hijacking in Umbraco 9.

using Umbraco.Cms.Core.Models;
using Umbraco.Cms.Core.Models.PublishedContent;
using Umbraco.Cms.Web.Common.PublishedModels;

namespace Website.Core.Models
{
     public class HomePageViewModel : ContentModel
     {
           public HomePageViewModel(IPublishedContent content) : base(content) {
                 StronglyTyped = (HomePage)content;
           }

           public HomePage StronglyTyped { get; set; }
      }
}

2. The Custom MVC Render Controller

The trick here is it's important that your controller name is a match to your document type name. If it isn't then it simply wont catch (hijack) the request. So if your page doc type is 'HomePage' then the class name must be HomePageController. The second thing to note is this must inherit from RenderController. If you want to go down the path of having a base controller then I will let you also figure this out.

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ViewEngines;
using Microsoft.Extensions.Logging;
using Umbraco.Cms.Core.Web;
using Umbraco.Cms.Web.Common.Controllers;
using Website.Core.Models;

namespace Website.Core.Controllers
{
      public class HomePageController : RenderController
      {
            public HomePageController(ILogger<HomePageController> logger, ICompositeViewEngine compositeViewEngine,
             IUmbracoContextAccessor umbracoContextAccessor) : base(logger, compositeViewEngine, umbracoContextAccessor)
            {

            }

            public override IActionResult Index()
            {
                   var vm = new HomePageViewModel(CurrentPage) { };
                   return View("/Views/homePage.cshtml", vm);
             }
      }
}

3. The frontend View Page Template (cs.html file)

Now all the backend stuff is finished there is one thing you need to do to your page template. You now need to make this inherit from your new 'HomePageViewModel'. Also when you are referencing properties stored on the doc type stored in Umbraco you will see that you have access to them through intellisense within Visual Studio under the @Model.StronglyTyped. property.

@inherits UmbracoViewPage<Website.Core.Models.HomePageViewModel>
@{
     Layout = "Master.cshtml";
}

<h1>Homepage</h1>

@if (!string.IsNullOrEmpty(Model.StronglyTyped.Heading))
{
     <h2>@Model.StronglyTyped.Heading</h2>
}