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

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

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

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

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

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

HTML Template

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

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

// 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.

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