HTML Template Syntax in C#

HTML templates in Aspose.HTML for .NET use inline expressions such as {{FirstName}} and {{#foreach Persons.Person}} to bind XML or JSON data to HTML markup before creating the final HTML document.

This article describes the template markup syntax used to create an HTML document from a template and a data source. Aspose.HTML for .NET supports inline expressions for data binding and list iteration, and it can populate templates from XML or JSON data.

Template Markup

An HTML template is a regular HTML file that contains special inline expressions. These expressions map input data to HTML page markup and use double curly bracket notation. During template processing, template markers are replaced with the corresponding values from the data source.

Inline Expressions

Aspose.HTML for .NET supports the following inline expression syntax.

{{ ... }} Data-Binding Expression

A data-binding expression sets element content based on information from the data source.

The basic syntax is:

The following XML data source contains a person name and address:

XML Data Source

1<Data>
2    <FirstName>John</FirstName>
3    <LastName>Doe</LastName>
4    <Address>
5        <City>Dallas</City>
6        <Street>Austin rd.</Street>
7        <Number>200</Number>
8    </Address>
9</Data>

The HTML template can use data-binding expressions to insert values from that XML data source:

HTML Template

The template includes a table with two columns: Person and Address. The cells in the Person column display {{FirstName}} and {{LastName}}. The cells in the Address column display {{Address.Street}}, {{Address.Number}}, and {{Address.City}}.

 1<table border=1>
 2    <tr>
 3        <th>Person</th>
 4        <th>Address</th>
 5    </tr>
 6    <tr>
 7        <td>{{FirstName}} {{LastName}}</td>
 8        <td>{{Address.Street}} {{Address.Number}}, {{Address.City}}</td>
 9    </tr>
10</table>

{{#foreach ... }} Foreach Directive Expression

The foreach directive expression iterates through a list of elements and is used together with data-binding expressions.

The following XML data source contains several Person elements:

XML Data Source

 1 <Data>
 2     <Persons>
 3         <Person>
 4             <FirstName>John</FirstName>
 5 			<LastName>Doe</LastName>
 6             <Address>
 7                 <Number>200</Number>
 8                 <Street>Austin rd.</Street>
 9                 <City>Dallas</City>
10             </Address>
11             <Phone1>345-345-34-55</Phone1>
12             <Phone2>345-555-09-09</Phone2>
13         </Person>
14         <Person>
15             <FirstName>Jack</FirstName>
16             <LastName>Fox</LastName>
17             <Address>
18                 <Number>25</Number>
19                 <Street>Broadway</Street>
20                 <City>New York</City>
21             </Address>
22             <Phone1>081-544-12-15</Phone1>
23         </Person>
24         <Person>
25             <FirstName>Sherlock</FirstName>
26             <LastName>Holmes</LastName>
27             <Address>
28                   <Number>65</Number>
29                   <Street>Baker str.</Street>
30                   <City>London</City>
31             </Address>
32             <Phone1>012-5344-334</Phone1>
33         </Person>
34     </Persons>
35 </Data>

The HTML template uses the foreach directive to repeat a table for each person in the data source:

HTML Template

The data_merge attribute specifies that the data source is a list of objects and that the table should be repeated for each object in the list. Expressions such as {{FirstName}}, {{LastName}}, {{Address.Street}}, and {{Address.Number}} identify fields that should be inserted into the corresponding table cells.

 1 <table border=1 data_merge='{{#foreach Persons.Person}}'>
 2     <tr>
 3         <th>Person</th>
 4         <th>Address</th>
 5     </tr>
 6     <tr>
 7         <td>{{FirstName}} {{LastName}}</td>
 8         <td>{{Address.Street}} {{Address.Number}}, {{Address.City}}</td>
 9     </tr>
10 </table>

Please note that the current implementation only supports the foreach directive expression for the following HTML elements: DIV, OL, UL, and TABLE.

Data Source

The data source can be represented in XML or JSON format. The following examples use the same fields so they can populate the same template expressions.

XML Data Source

1 <Data>
2     <FirstName>John</FirstName>
3     <LastName>Doe</LastName>
4     <Address>
5         <City>Dallas</City>
6         <Street>Austin rd.</Street>
7         <Number>200</Number>
8     </Address>
9 </Data>

JSON Data Source

1{
2     "FirstName": "John",
3     "LastName": "Doe",
4     "Address": {
5         "City": "Dallas",
6         "Street": "Austin rd.",
7         "Number": "200"
8     }
9 }

Convert Template to HTML

After preparing an HTML template and a data source, call ConvertTemplate() to create the final HTML document.

To populate an HTML template:

Prepare an HTML template with inline expressions.
Prepare an XML or JSON data source.
Create TemplateData from the data source.
Create TemplateLoadOptions.
Pass sourcePath, data, options, and outputPath to Converter.ConvertTemplate().

1// Convert Template to HTML using C#
2
3// Convert template to HTML
4Converter.ConvertTemplate(
5    Path.Combine(DataDir, "template.html"),
6    new TemplateData(Path.Combine(DataDir, "data-source.json")),
7    new TemplateLoadOptions(),
8    Path.Combine(OutputDir, "template-with-single-line.html")
9);

Example-ConvertTemplateToHtmlInOneLine.cs hosted with ❤ by GitHub

The code snippet shows how to use ConvertTemplate() to create an HTML document based on a template and populate it with data from a JSON data source. The method takes four arguments: the path to the template file, the data source, template loading options, and the output path. The resulting document is populated with data by using inline expressions in the template.

You can download the complete examples and data files from GitHub.

FAQ

What is an HTML template in Aspose.HTML for .NET?

It is an HTML file that contains inline expressions used to insert values from XML or JSON data into the final HTML document.

How do I repeat HTML markup for several data items?

Use the {{#foreach ... }} directive with data_merge on a supported element such as DIV, OL, UL, or TABLE.

Can I use both XML and JSON data sources?

Yes. TemplateData can be created from XML or JSON data and used by Converter.ConvertTemplate().

Convert HTML Template to HTML in C# – use Converter.ConvertTemplate() with template files, TemplateData, and TemplateLoadOptions.
Setting Attributes in HTML Template – control generated attributes such as checked while populating a template.
Aspose.HTML for .NET Examples on GitHub – complete C# examples and data files.

Working with HTML Templates Convert Template to HTML