HTML 模板 – 如何使用 C# 进行填充

本文介绍了如何基于模板创建 HTML 文档，并从数据源填充该文档。Aspose.HTML for .NET 提供了内联表达式语法，可用于模板和各种数据源类型(如 XML 和 JSON)。

模板标记

HTML 模板是一个普通的 HTML 文件，其中包含一些特殊的内联表达式，用于指定输入数据源与 HTML 页面标记的映射关系。这些内联表达式使用双曲括号符号。在模板处理过程中，模板标记将按照下述规则用相应的数据值替换。

内联表达式

以下是支持的内联表达式语法列表。

{{ …}}- 数据绑定表达式

数据绑定表达式*用于根据数据源中包含的信息设置控制元素的值。

数据绑定表达式的基本语法如下：

下面的演示展示了如何使用数据绑定表达式从 XML 数据源获取信息：

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>

HTML 页面模板中的数据绑定表达式：

HTML 模板

这是一个使用内联表达式绑定数据的 HTML 模板示例。该模板包含一个表格，其中有 “Person” 和 “Address” 两列。“Person” 列中的单元格显示数据源中 {{FirstName}} 和 {{LastName}} 的值。“Address” 列中的单元格显示 {{Address.Street}} 和 {{Address.Number}} 的值。{{Address.Number}} 和 {{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指令表达式

foreach指令表达式与* 数据绑定表达式*相结合，用于遍历元素列表。

下面的演示展示了如何从 XML 数据源获取所有人员并填充模板：

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>

HTML 页面模板中的 foreach 指令表达式：

HTML 模板

data_merge 属性指定数据源为对象列表，列表中的每个对象都应重复填写表格。模板内的表达式(如 {{FirstName}}、{{LastName}}、{{Address.Street}} 和 {{Address.Number}})表示数据源中应插入表格相应单元格的字段。

 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>

请注意，目前的实现只支持以下 HTML 元素的 foreach 指令表达式：DIV、OL、UL 和 TABLE。

数据来源

如前所述，数据源可以 XML 和 JSON 格式表示。以下是为本文准备的这两种数据源的示例：

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 }

用几行代码将模板转换为 HTML

准备好 HTML 模板后，只需几行代码即可在 C# 应用程序中将模板转换为 HTML！为此，您需要向 ConvertTemplate() 方法 (sourcePath、data、options、outputPath) 传递所需的参数。

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

上面的代码片段展示了如何使用 ConvertTemplate() 方法根据模板创建 HTML 文档，并从 JSON 数据源填充数据。该方法需要四个参数：模板文件的路径、数据源、模板的加载选项以及保存输出 HTML 文档的路径。生成的文档将使用内联表达式语法，用数据源中的数据填充模板。

有关如何将模板转换为 HTML 的详细信息，请访问 将模板转换为 HTML。

使用 HTML 模板将模板转换为 HTML