View Engine

One of the most popular use-cases for a high-performance Templating engine like ServiceStack Templates is as a server-side HTML View Engine for .NET Web Applications where it can provide a simpler, cleaner and portable alternative than Razor and Razor Pages in ASP.NET and ASP.NET Core Web Apps.

View Engine in ServiceStack

The TemplatePagesFeature plugin provides a first-class experience for generating dynamic websites where it's able to generate complete server-generated websites (like this one) without requiring any additional Controllers or Services.

To enable Template Pages as a View Engine in ServiceStack you just need to register the TemplatePagesFeature plugin:

public void Configure(Container container)
{
    Plugins.Add(new TemplatePagesFeature());
}

TemplatePagesFeature is a subclass of TemplateContext which defines the context on which all ServiceStack Template Pages are executed within. It provides deep integration within ServiceStack by replacing the TemplateContext's stand-alone dependencies with ServiceStack AppHost providers, where it:

If preferred, you can change which .html extension gets handled by Template Pages with:

Plugins.Add(new TemplatePagesFeature { HtmlExtension = ".htm" });

Runs Everywhere

The beauty of ServiceStack Templates working natively with ServiceStack is that it runs everywhere ServiceStack does which is in all major .NET Server Platforms. That is, your same Templates-based Web Application is able to use the same Templates implementation, "flavour" and feature-set and is portable across whichever platform you choose to host it on:

Calling Pages Directly

Once registered, TemplatePagesFeature gives all your .html pages Template super powers where sections can be compartmentalized and any duplicated content can now be extracted into reusable partials, metadata can be added to the top of each page and its page navigation dynamically generated, contents of files and urls can be embedded directly and otherwise static pages can come alive with access to Default Filters.

Any .html page available from your AppHost's configured Virtual File Sources can be called directly, typically this would mean the File System which in a .NET Core Web App starts from the WebRootPath (usually /wwwroot) so a request to /docs/view-engine goes through all configured VirtualFileSources to find the first match, which for this website is the file /src/wwwroot/docs/view-engine.html.

Pages with an _ underscore prefix can't be accessed directly making them a good convention for layouts and partials

Layout Selection

Unless it's a complete HTML Page (e.g. starts with html or HTML5 tag) the page gets rendered using the closest _layout.html page it can find starting from the directory where the page is located, traversing all the way up until it reaches the root directory. Which for this page uses the /src/wwwroot/_layout.html template in the WebRoot directory, which as it's in the root directory, is the fallback Layout for all .html pages.

Pages can change the layout they use by either adding their own _layout.html page in their sub directory or specifying a different layout in their pages metadata header, e.g:

<!--
layout: mobile-layout
-->

Where it instead embed the page using the closest mobile-layout.html it can find, starting from the Page's directory. If your templates are instead embedded in the different folder you can request it directly from the root dir:

<!--
layout: templates/mobile-layout
-->

Pretty URLs by default

HTML pages can also take advantage of Pretty URLs by default which no longer need file extensions, so you can request this page using either:

In addition an index.html page can be called with or without its name, e.g:

Request Variables

The QueryString and FORM variables sent to the page are available as arguments within the page, so a request like /docs/view-engine?id=1 can access the id param with {{ id }}. To help with generating navigation, the following Request Variables are also available:

You can use {{ PathInfo }} to easily highlight the active link in a links menu as done in sidebar.html:

<nav id="sidebar">
<div class="inner">

<ul>
    <li>
        <h5>docs</h5>
    </li>
    {{ docLinks | select: <li class="{ 'active' | if(equals(it.Key, PathInfo)) }"><a href="{ it.Key }">{ it.Value }</a></li> }}

    <li>
        <h5>use cases</h5>
    </li>
    {{ useCaseLinks | select: <li class="{ 'active' | if(equals(it.Key, PathInfo)) }"><a href="{ it.Key }">{ it.Value }</a></li> }}

    <li>
        <h5>linq examples</h5>
    </li>
    {{ linqLinks | select: <li class="{ 'active' | if(equals(it.Key, PathInfo)) }"><a href="{ it.Key }">{ it.Value }</a></li> }}
</ul>

</div>
</nav>

Forbidden Pages

Pages that are prefixed with an underscore, e.g. _layout.html cannot be called directly. As you'd normally never want layouts and partials to accessed directly it's a good idea to name them with an _ prefix.

Ignoring Pages

You can ignore ServiceStack Templates from evaluating static .html files with the following page arguments:

<!--
ignore: page
-->

Nothing in this page will be evaluated but will still be rendered inside the closest Layout.
<!--
ignore: template
-->

This page will not be evaluated nor will it have a Layout.
<!--
layout: none
-->

This page will be evaluated but rendered without a layout.
Complete .html pages starting with <!DOCTYPE HTML> or <html have their layouts ignored by default.

ServiceStack Filters

Filters for integrating with ServiceStack are available in ServiceStack Filters and Info Filters both of which are pre-registered when registering the TemplatePagesFeature Plugin.

made with by ServiceStack