HTML-шаблон – HTML Template – примеры C#

В этой статье описывается, как создать HTML-документ на основе шаблона и заполнить его из источника данных. Aspose.HTML предоставляет синтаксис встроенных выражений для работы с шаблонами и различными типами источников данных, такими как XML и JSON.

Разметка шаблона

HTML Template – это обычный файл 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 Template

Это пример шаблона HTML, который использует встроенные выражения для привязки данных. Шаблон включает в себя таблицу с двумя столбцами для «Person» и «Address». В ячейках столбца «Person» отображаются значения {{FirstName}} и {{LastName}} из источника данных. В ячейках столбца «Address» отображаются значения {{Address.Street}} {{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>

Выражение директивы foreach в шаблоне HTML-страницы:

HTML Template

Атрибут 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>

Обратите внимание, что текущая реализация поддерживает выражение директивы foreach только для следующих элементов HTML: 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 Template, вы можете преобразовать шаблон в HTML в своем приложении C# буквально с помощью одной строки кода! Для этого вам необходимо передать необходимые параметры в ConvertTemplate() (sourcePath, data, options, outputPath).

 1using System.IO;
 2using Aspose.Html.Converters;
 3using Aspose.Html.Loading;
 4...
 5    // Convert template to HTML
 6    Converter.ConvertTemplate(
 7        Path.Combine(DataDir, "template.html"),
 8        new TemplateData(Path.Combine(DataDir, "data-source.json")),
 9        new TemplateLoadOptions(),
10        Path.Combine(OutputDir, "template-with-single-line.html")
11    );

В приведенном выше фрагменте кода показано, как использовать метод ConvertTemplate() для создания HTML-документа на основе шаблона и заполнения его данными из источника данных JSON. Метод принимает четыре аргумента: путь к файлу шаблона, источник данных, параметры загрузки шаблона и путь, по которому следует сохранить выходной HTML-документ. Результирующий документ будет заполнен данными из источника данных с использованием синтаксиса встроенных выражений для заполнения шаблона.

Дополнительные сведения о преобразовании шаблона в HTML вы найдете в статье Преобразование шаблона в HTML.

Вы можете скачать полные примеры и файлы данных с GitHub.

Работа с HTML-шаблонами Преобразование шаблона в HTML