When you render HTML using a website powered by Umbraco CMS, I always recommend trying to work with strongly -typed models to render out data. When rendering data from the CMS within a view, it is better to reference the data using objects created from C# classes. In Umbraco, the C# classes should be b generated from the CMS based on the document types created within the CMS. The alternative is to hard-code the document-type property names in the HTML. This is not an ideal approach. If a document type is updated in the CMS, this will break your website. What's worse, you won't know that it is broken. When you work with an object that represents your Umbraco page, you can write nice clean code. For example, to render a text area called main from a document-type called home-page:
I hope you agree, rendering CMS data like this results in clean code. This code is much nicer and easier to maintain. If you don't work with a class, you end up with code like this:
For me, this is a code smell. If the properties name is changed in the CMS, you won't know where their property is referenced in your codebase. When you use a class to render CMS data and things change, Visual Studio will show you all the files that reference the property when you compile the site and it fails to build. This is not the only benefit of using classes, however, it is reason enough why you should adopt strongly-typed models.
Unfortunately, in V7, Umbraco doesn't support strongly-typed models out-of-the-box and you will need to install a community plug-in if you want to work in this way, like uSiteBulider. As the packages are not part of the core product, if you use a third-party package to generate models from document types you will run into a few issues. One big caveat is that rich text might not render correctly on your website. The three main issues you will encounter, are:
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 the HTML will display as text.
Internal links created in Umbraco won't render correctly
Macros won't render correctly.
The reason why the 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. To fix this, you can create a custom HTML helper that mimics this inner magic. You can then use this custom helper within your views whenever you need to render a rich-text property from a strong-typed model! Let us look at the code to create this helper:
This code mimics 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. In order for the helper to only parse rich-text properties, you will need a way to tell it that the passed-in property type is definitely rich-text. In this code, I do that through the use of a custom interface. This snippet will assume that any model that you are using, implements an IID interface. The code for this interface is simple, as seen below:
You can then use the HTML helper in a view liek this:
YOu now have a way to render rich-text correct in a view. Happy Coding 🤘
