How To Render Rich Text In Your Views When You Use Strongly Typed Models Within Umbraco

When you work with Umbraco, or in fact any MVC or .NET website I always recommend trying to work with strongly -typed models. In case you’re fairly new to .NET and that statement confuses you, what I mean is that you should always work with C# classes instead of hard-coding strings all over your code base.

When you work with an object that represents your Umbraco page, you can write nice clean code like this to get a text area called ‘main content’ on a home page.

var homepage = new HomePage();
var display = homepage.MainContent;

This code is much nicer and easier to maintain (especially if you use Reflector) when you maintain your website. If you don’t work with a class you end up with code like this:

CurrentpAGE.GetProperty("MainContent").Value

This code is pretty horrible, because if you say change your properties name, you won’t know where in your code base it is referenced. When you use a class, Visual Studio will show all the files that reference it.

Even though that’s not all the benefits of using classes, it gives a good reason why you should consider looking into strongly-typed models a bit more seriously, if you aren’t already.

My Rich Text Now Doesn’t Display Correctly!

As Umbraco doesn’t support strongly-typed models out of the box, you will run into a few issues when you try to render out rich text on your website. The three main issues you will encounter, are:

1. If for example a content editor adds some HTML within the text editor, when you use a strongly-typed model this will get stripped out and displayed as text.
2. Internal links created in Umbraco won’t render correctly
3. Macro’s won’t render correctly

The reason why rich text doesn’t render correctly, is that when you try to render content yourself, you skip the inner Umbraco workings on the page. These magic inner workings know what to do if the property contains a macro or internal link. So the fix is, to create a HTMl helper that mimicks this inner magic and then use that in your views whenever you need to render a rich-text property.

public static MvcHtmlString UmbracoContent<T>(this HtmlHelper<T> helper, Func<T, string> property)
{
var model = helper.ViewData.Model;
var richText = property(model);
var id = (model as IID).Id;
var withMacros = umbraco.library.RenderMacroContent(richText, id);
var withLinks = TemplateUtilities.ParseInternalLinks(withMacros);
return MvcHtmlString.Create(withLinks);
}

This code mimmicks what Umbraco does under the hood, it uses umbraco.library.RenderMacroContent and TemplateUtilities.ParseInternalLinks to parse the string and convert any internal links, and macros correctly. This snippet will assume that any model that you are using, implements an IID interface:

public interface IID
{
int Id { get; }
}
[/chsarp]

You can then

@Html.UmbracoContent(m => m.Body);

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *