-
Notifications
You must be signed in to change notification settings - Fork 23
Templates
A must-have feature is the ability of merge a common HTML template with the actual content of a page. This is accomplished (like in the .NET version) using four special symbols:
@LayoutPage: indicate the HTML page to use for the structure
@RenderBody: where to place the actual content of the page (used only in templates, or layout pages)
@ExtraHeader { … } is used within the specific HTML page to add extra header information (a title, more JS files, specific CSS files...) to the template. Optional (and not in the current demo).
@RenderHeader indicates where to add the extra header of the page, if available. Optional (and not in the current demo).
The template file can be in the same folder of the HTML file or in the template folder specified in the RazorEngine component. The demo uses the following template (BaseTemplate.html):
<!-- !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
<html>
<head>
<title>Sample Razor Project</title>
</head>
<body>
<div id="mainDiv">
<h1>Sample Razor Project</h1>
<div id="contentDiv">
@RenderBody
</div>
</div> <!-- mainDiv -->
</body>
</html>
This is referenced in the first line of most HTML files of the demo:
@LayoutPage BaseTemplate
<h2>If Test</h2>
...
It should be quite obvious how the two files are merged, with entire content of the specific file replacing the @RenderBody token. Notice that the template is subject to processing of razor tags, using the same processor object (hence the same dictionary objects and OnValue event handlers).