Introducing uHydrator for Umbraco

I recently open sourced a light weight object mapper for Umbraco which I haveingeniously named uHydrator.

uHydrator has been created to help with the Umbraco MVC implementation. It helps keep your views isolated form your business logic. uHydrator is a light weight reflective mapper to populate view models based on the content within the Umbraco IPublished item. uHydrator will also populate composite objects (works well with mixins).

Note, uHydrator is currently compiled again Umbraco v6.1.6. Version support is coming soon.

How?

Well there’s a full run through in the readme over athttps://bitbucket.org/chrisgaskell/uhydrator but basically you decorate properties within your view model:

....
[UmbracoProperty("home_title", PropertyEditor.Textbox)]
public string IntroductionTitle { get; set; }
....

then populate via a factory in a controller action:

....
var viewModel = _viewModelFactory.Create<HomeViewModel>(model.Content);
....

I’ve also pushed up a full working Umbraco implementation containing uHydrator. There’s even a Powershell set-up script to help you get up and running.

Where?

Find UHydrator on BitBucket – https://bitbucket.org/chrisgaskell/uhydrator

How Exactly?

Some basic setup steps, also checkout the example full Umbraco install.

  1. Hijack your umbraco route by adding a controller. See here for more infohttp://our.umbraco.org/documentation/Reference/Mvc/custom-controllers
  2. Create a view model for this route, say ‘HomeViewModel’. Have this viewmodel inherit DetangledDigital.UHydrator.ViewModels.BaseViewModel (or you can implement DetangledDigital.UHydrator.ViewModels.IBaseViewModel yourself if you like). This adds some base properties:
    public abstract class BaseViewModel : IBaseViewModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Path { get; set; }
        public string Url { get; set; }
    }
    
  3. Lets say in the CMS you have two properties on your ‘Home’ document type, “Title” and “Introduction”. You give these fields a different alias in the CMS to ensure they’re unique. You could now create your HomeViewModel as:
    using DetangledDigital.UHydrator.Attributes;
    using DetangledDigital.UHydrator.ViewModels;
    
    public class HomeViewModel : BaseViewModel, IBaseViewModel
    {
        [UmbracoProperty("home_title", PropertyEditor.Textbox)]
        public string IntroductionTitle { get; set; }
    
        [UmbracoProperty("home_introduction", PropertyEditor.TinyMCE)]
        public string Introduction { get; set; }
    }
    

Here you can see a typical uHydrator View Model

  1. Have your view use the derived class in your home view (in this example ‘HomeViewModel’). I use the syntax below to keep Umbraco involved
    @inherits UmbracoViewPage<HomeViewModel>
    
  2. The last step is to use the uHydrator factory in your controller action. You could do this as:
    using System.Web.Mvc;
    using Umbraco.Web.Models;
    using Umbraco.Web.Mvc;
    
    using uHydratorExample.UI.ViewModels;
    using DetangledDigital.UHydrator;
    
    public class HomeController : RenderMvcController
    {
        private readonly ViewModelFactory _viewModelFactory;
    
        public HomeController()
        {
            // Instantiate a factory.
            // If you use IoC you can wire this up to the IViewModelFactory interface and inject into the constructor.
    
            _viewModelFactory = new ViewModelFactory();
        }
    
        public override ActionResult Index(RenderModel model)
        {
            var viewModel = _viewModelFactory.Create<HomeViewModel>(model.Content);
            return CurrentTemplate(viewModel);
        }
    }
    
  3. uHydrator will also handle composites. You can use the [UmbracoComposite] attribute above nested classes.