Mustache is a logic-less templating engine for creating dynamic content like HTML. Because modern websites take advantage of both client side and server side to create the best user experience, in this blog, we will try to minimize maintenance by sharing Mustache templates between both the server and the client.
Our Goal
By the end of this blog, you will be able to share mustache templates between your client-side Javascript and your ASP.NET (Umbraco 8) server-side application while Server-Side rendering our initial content using the same Mustache template! In this blog, we will be setting up the following:
- Installing & Configuring our Server-Side Mustache View Engine
- Rendering Umbraco content using a Mustache template Server-Side
- Sharing said Mustache template to our front-end to use on the Client-Side
Getting Started
The first thing we will do is install a new View Engine. Since we are interested in rendering part of our data through a Mustache template instead of a Razor template, we will be using & configuring the following NuGet package:
Nustache will give us access to the Nustache View Engine, which will be responsible for rendering our content! Simply install this the same way you would any other package, either through Visual Studio, or through the Install-Package command from the Package Manager.
Next step is to configure our View Engine! For this, we will head over/create a file for our Global.asax to inherit from. With the default Umbraco 8 installation, we will already have a basic file setup that our Global.asax inherits from, that registers our custom routes & areas. If you do not have this file setup, you can create a new Class file anywhere in your application (the standard is to place it under the Global.asax file), and have it inherit from UmbracoApplication. Your Global.asax file will contain the following line, where the Inherits path is either your custom file's location, or the Umbraco default.
<%@ Application Inherits="#PROJECTNAMESPACE#.Global" Language="C#" %>
Now that we have the class that's responsible for our Application's major lifecycle events, we can extend them and add on View Engine! To register our View Engine, we will be using and overriding the Init() Event, which is fired when an application initializes or is first called. It is invoked for all HttpApplication object instances. This will result in the following file:
Our Nustache View Engine is now registered in our application, and allows us to render Mustache templates! Note the additional comments in the code snippet. With our current configuration, we will be able to access the properties of our Model in our Mustache Template's view using the name of the property all by itself, e.g. instead of writing {{Model.Title}}, we define our fields as {{Title}}. However, this does mean we will no longer have access to other methods on our Model such as ViewData, so be sure to uncomment this line if you want to have access to that!
Creating a template
Let's create a simple Mustache template for us to render! For demonstration purpose, let's say we are creating a simple Blog, in which we want to render the Blog details in a Mustache template. (Lucky for us, we already have some basic templates and styling setup when using the Umbraco Starter Kit). We will be adding some simple fields to our Blog page Doctype, like the Categories, Title, an Excerpt and an TextArea, to house our contents! Under our Views -> Shared, we will create a Partial called "BlogDetails.mustache", and fill in the following:
Now let's have render our newly created Partial! Since I am using the Umbraco Starter Kit, we already have our Blogpost.cshtml that currently renders our BlogDetails using Razor. Let's strip out the rendering of our blog details, and replace it with out newly created Partial. In our Blogpost.cshtml, we will be rendering our Partial within the container div. This results in the following .cshtml:
Because we installed our Nustache View Engine, not only will we be able to render Razor partials, but the rendering pipeline will also look for Mustache partials! If we head over to the detail page for this blog, we can see we are now rendering the Umbraco contents to our front-end using our newly created Mustache template!
Attachment 1 - Blog Detail Page using Mustache
Sharing the Template
We are able to render our Mustache template Server Side, but let's make it available to our Front-end next! We will start by creating a simple extension method for the default HtmlHelper, so that we can output the Mustache view file into our Razor view. This will allow us to render the raw contents of our file into the Mustache script that the Front-end will be able to use to manipulate our DOM!
The following extension will be able to read the mustache file and return it to our view as a simple HtmlString:
Now all that's left to do, is to render the raw contents of our Mustache template to our frontend, and we are good to go! Let's add the script section for our front-end mustache template to our Blogpost.cshtml that we used earlier, and call our RenderRawContent extension method as follows:
And there we have it! We now have everything in place to work on the Front-End of our application (not counting any API's for fetching the data) for changing the contents shown on the blog detail page! 🔥
I won't be getting into the details of implementing the Front-End rendering of Mustache templates in this post, but if you are interested in reading more about it, check out the Mustache.js GitHub repository.
Conclusion
This article shows the process of installing & configuring the Nustache View Engine in order to Server-Side render Mustache Templates, using a new Umbraco 8 installation. We are rendering our Umbraco contents using Mustache, and rendering the raw contents of our Template to our front-end for the front-end side to use! 🚀
If you have any further questions, feel free to contact me over at my socials available at the Contact page, and I'd love to hear about the amazing creations you're able to come up with, with this setup!
Sources used in this article:
Using Mustache to share templates between both server and client, https://24days.in/umbraco-cms/2017/mustache-client-and-server-templates/
Building a Custom ViewEngine for ASP.NET MVC, https://exceptionnotfound.net/a-simple-custom-viewengine-for-asp-net-mvc/
Nustache.Mvc3 Package, https://www.nuget.org/packages/Nustache.Mvc3/
Major Events in Global.Asax, https://www.c-sharpcorner.com/uploadfile/aa04e6/major-events-in-global-asax-file/
