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 reusable HTML pages, document layouts, or email bodies.

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.

Create an HTML Email Template in C#

Aspose.HTML for .NET can populate an HTML email template with values from XML or JSON data. The result is a complete HTML document that your application can read as a string and pass to a mail library or email delivery service as the message body. Aspose.HTML generates the HTML content; it does not send the email.

The following email template uses inline styles and a presentation table for broader compatibility with email clients. Save it as email-template.html:

 1<!DOCTYPE html>
 2<html>
 3<body style="margin:0; padding:0; background-color:#f4f4f4;">
 4    <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
 5        <tr>
 6            <td align="center" style="padding:24px;">
 7                <table role="presentation" width="600" cellpadding="0" cellspacing="0"
 8                       style="background-color:#ffffff;">
 9                    <tr>
10                        <td style="padding:32px;">
11                            <h1 style="font-size:24px;">Order {{OrderNumber}}</h1>
12                            <p>Hello {{CustomerName}},</p>
13                            <p>Your order status is: <strong>{{OrderStatus}}</strong>.</p>
14                        </td>
15                    </tr>
16                </table>
17            </td>
18        </tr>
19    </table>
20</body>
21</html>

Save the template data as email-data.json:

1{
2    "CustomerName": "Olivia",
3    "OrderNumber": "A-1042",
4    "OrderStatus": "Ready for shipment"
5}

To create the HTML email body:

Prepare an email-compatible HTML template with data-binding expressions.
Store the recipient or message data in an XML or JSON file.
Create TemplateData and TemplateLoadOptions instances.
Call Converter.ConvertTemplate() to populate the template.
Read the generated HTML file when the mail API requires the body as a string.

 1// Create an HTML email template in C#
 2
 3string templatePath = Path.Combine(DataDir, "email-template.html");
 4string dataPath = Path.Combine(DataDir, "email-data.json");
 5string outputPath = Path.Combine(OutputDir, "email-body.html");
 6
 7TemplateData data = new TemplateData(dataPath);
 8TemplateLoadOptions options = new TemplateLoadOptions();
 9
10Converter.ConvertTemplate(templatePath, data, options, outputPath);

Example-CreateAnHtmlEmailTemplate.cs hosted with ❤ by GitHub

Use email-compatible markup when preparing the template. Prefer inline CSS, use absolute URLs or content IDs for images, and do not rely on JavaScript or complex browser-only layouts. Validate untrusted values before using them to generate content that will be sent to recipients.

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().

Can I use Aspose.HTML templates to create an HTML email in C#?

Yes. Use TemplateData, TemplateLoadOptions, and Converter.ConvertTemplate() to populate an email-compatible HTML template from XML or JSON data. The resulting HTML can be used as the message body by a mail library or delivery service. Aspose.HTML creates the HTML body but does not send the email.

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