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

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

模板标记

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

内联表达式

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

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

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

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

{{ 数据绑定表达式 }}

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

XML Data Source

<Data>
    <FirstName>John</FirstName>
    <LastName>Doe</LastName>
    <Address>
        <City>Dallas</City>
        <Street>Austin rd.</Street>
        <Number>200</Number>
    </Address>
</Data>

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

HTML 模板

这是一个使用内联表达式绑定数据的 HTML 模板示例。该模板包含一个表格，其中有 “Person” 和 “Address” 两列。“Person” 列中的单元格显示数据源中 {{FirstName}} 和 {{LastName}} 的值。“Address” 列中的单元格显示 {{Address.Street}} 和 {{Address.Number}} 的值。{{Address.Number}} 和 {{Address.City}} 的值。大括号语法用于表示内联表达式。

<table border=1>
    <tr>
        <th>Person</th>
        <th>Address</th>
    </tr>
    <tr>
        <td>{{FirstName}} {{LastName}}</td>
        <td>{{Address.Street}} {{Address.Number}}, {{Address.City}}</td>
    </tr>
</table>

{{#foreach …}}- foreach指令表达式

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

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

XML Data Source

 <Data>
     <Persons>
         <Person>
             <FirstName>John</FirstName>
 			<LastName>Doe</LastName>
             <Address>
                 <Number>200</Number>
                 <Street>Austin rd.</Street>
                 <City>Dallas</City>
             </Address>
             <Phone1>345-345-34-55</Phone1>
             <Phone2>345-555-09-09</Phone2>
         </Person>
         <Person>
             <FirstName>Jack</FirstName>
             <LastName>Fox</LastName>
             <Address>
                 <Number>25</Number>
                 <Street>Broadway</Street>
                 <City>New York</City>
             </Address>
             <Phone1>081-544-12-15</Phone1>
         </Person>
         <Person>
             <FirstName>Sherlock</FirstName>
             <LastName>Holmes</LastName>
             <Address>
                   <Number>65</Number>
                   <Street>Baker str.</Street>
                   <City>London</City>
             </Address>
             <Phone1>012-5344-334</Phone1>
         </Person>
     </Persons>
 </Data>

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

HTML 模板

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

 <table border=1 data_merge='{{#foreach Persons.Person}}'>
     <tr>
         <th>Person</th>
         <th>Address</th>
     </tr>
     <tr>
         <td>{{FirstName}} {{LastName}}</td>
         <td>{{Address.Street}} {{Address.Number}}, {{Address.City}}</td>
     </tr>
 </table>

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

数据来源

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

XML Data Source

 <Data>
     <FirstName>John</FirstName>\
     <LastName>Doe</LastName>\
     <Address>\
         <City>Dallas</City>\
         <Street>Austin rd.</Street>\
         <Number>200</Number>\
     </Address>
 </Data>

JSON Data Source

{
     "FirstName": "John",
     "LastName": "Doe",
     "Address": {
         "City": "Dallas",
         "Street": "Austin rd.",
         "Number": "200"
     }
 }

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

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

// Convert Template to HTML using C#

// Convert template to HTML
Converter.ConvertTemplate(
    Path.Combine(DataDir, "template.html"),
    new TemplateData(Path.Combine(DataDir, "data-source.json")),
    new TemplateLoadOptions(),
    Path.Combine(OutputDir, "template-with-single-line.html")
);

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

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