Twig in Razor¶

Whenever you are building a website, you choose how to design your front-end. Different platforms each offer their own ways; in PHP, the selection of options is by far the most extensive.

Introduction¶

When developing on ASP.NET Core, you simply go with Razor. There’s not much to think about there. In PHP, on the other hand, you can use whatever the framework recommends or whatever you like; the options are plentiful. You can use pure HTML, Smarty, a WYSIWYG editor in your CMS, Blade, Mustache, Volt, Calypso, PHPTAL, Dwoo, or with Symfony, Laravel, PicoCMS and Drupal, you can use the Twig templating language.

Imagine you’re integrating an existing PHP website designed in Twig into a Razor powered website. One option is to rewrite and maintain both designs in two different languages, or as shown in this article – we can render the Twig parts directly into the Razor page.

Typical usage¶

In PHP, you include the library as a composer package named “twig/twig”. Then in your code follow the documentation, create a Twig Loader object, parse your twig files and render them using the TwigTemplate::render() function. The following is the simplified code:

$loader = new \Twig\Loader\FilesystemLoader('/path/to/templates');
$twig = new \Twig\Environment($loader);
$template = $twig->load('index.html');
echo $template->render(['the' => 'variables', 'go' => 'here']); 

How to Twig in C¶

Thanks to PeachPie, the same library is also available in .NET. Of course we don’t want to write a whole bunch of code just to render a component, which is why we’re introducing a light-weight wrapper available as a NuGet package – Twig.AspNetCore.

This library references the original twig/twig library compiled to a netstandard2.0 assembly file and provides a few helper methods that work nicely in Razor pages, including the use of ViewData and providing the IHtmlHelper extension.

Assuming you have an ASP.NET Core web application, add a package reference to the latest Twig.AspNetCore package:

Copy or create some twig files, for example one named index.html in your wwwroot/templates folder:

<p>
    Hello {{ Name }}!
</p>

The content of the wwwroot will be deployed with your application; if you decide to put your twig files anywhere else, make sure you mark the files as Content.

Now go to your razor page, for example index.cshtml:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
    ViewData["Name"] = "John Doe";
}

and render the twig file in there:

@Html.Twig("./templates", "index.twig")

The Twig(string path, string name[, object model]) method will handle the loading of the twig templates and the rendering. If you don’t provide the third argument, it will pass your ViewData as variables to the rendered twig template. If you prefer, you can pass the variables on your own, as you are used to from C#:

@Html.Twig("./templates", "index.twig", new { Name = "John Doe" })

Rendering Twig blocks in C¶

Usually there are blocks defined in twig files and we want to render just those parts within our web page, like a footer or a contact card.

For those purposes there is a similar method – TwigBlock(string path, string name, string block[, object model]).

@Html.TwigBlock("./templates", "parts.twig", "footer", new { Name = "John Doe" })

Give it a shot¶

It’s never been easier to render Twig in C# or Razor views. If you feel like giving it a shot, grab the sample here: https://github.com/jakubmisek/dotnet-twig/tree/master/Twig.AspNetCore.Demo.

We’re continuously working on bringing awesome PHP libraries to the world of .NET, which is one of the core missions of the PeachPie project. If there are any particular PHP libraries you’d like to see PeachPie support, drop us a note somewhere and we’ll do our best.