Plantilla HTML – HTML Template – ejemplos de C#
Este artículo describe cómo crear un documento HTML basado en una plantilla y completarlo desde una fuente de datos. Aspose.HTML for .NET proporciona la sintaxis de expresiones en línea para trabajar con plantillas y varios tipos de fuentes de datos, como XML y JSON.
Marcado de plantilla – Template Markup
La plantilla HTML es un archivo HTML normal que contiene algunas expresiones en línea especiales que especifican la asignación de la fuente de datos de entrada al marcado de la página HTML. Estas expresiones en línea utilizan notación con corchetes dobles. Los marcadores de la plantilla se reemplazarán con los valores de datos respectivos durante el procesamiento de la plantilla siguiendo las reglas que se describen a continuación.
Expresiones en línea
A continuación se muestra la lista de sintaxis de expresiones en línea admitidas.
{{ … }} – expresión de enlace de datos
La expresión de enlace de datos (data-binding expression) se utiliza para establecer valores del elemento de control en función de la información contenida en la fuente de datos.
La siguiente es la sintaxis básica de la expresión de enlace de datos:
{{ expresión de enlace de datos }}
La siguiente demostración muestra cómo utilizar la expresión de enlace de datos para obtener información de la fuente de datos 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>La expresión de enlace de datos en la plantilla de página HTML:
Plantilla HTML
Este es un ejemplo de una plantilla HTML que utiliza expresiones en línea para vincular datos. La plantilla incluye una tabla con dos columnas para “Person” y “Address”. Las celdas de la columna “Person” muestran los valores de {{FirstName}} y {{LastName}} de la fuente de datos. Las celdas de la columna “Address” muestran los valores de {{Address.Street}} {{Address.Number}} y {{Address.City}}. La sintaxis de llaves se utiliza para indicar una expresión en línea.
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… }} – expresión directiva foreach
La expresión directiva foreach (foreach directive expression) se utiliza para iterar a través de la lista de elementos en combinación con la expresión de enlace de datos.
La siguiente demostración muestra cómo obtener todas las personas de una fuente de datos XML y completar una plantilla:
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>La expresión de directiva foreach en la plantilla de página HTML:
Plantilla HTML
El atributo data_merge especifica que la fuente de datos es una lista de objetos y la tabla debe repetirse para cada objeto de la lista. Las expresiones dentro de la plantilla, como {{FirstName}}, {{LastName}}, {{Address.Street}} y {{Address.Number}}, indique los campos de la fuente de datos que se deben insertar en las celdas correspondientes de la tabla.
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>Tenga en cuenta que la implementación actual solo admite expresiones directivas foreach para los siguientes elementos HTML: DIV, OL, UL y TABLE.
Fuente de datos
Como se mencionó anteriormente, la fuente de datos podría representarse en formatos XML y JSON. Los siguientes son ejemplos de ambas fuentes de datos que se prepararon para este artículo:
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 }Convierta una plantilla a HTML con una sola línea de código
Una vez que haya preparado una plantilla HTML, puede convertirla a HTML en su aplicación C# literalmente con una sola línea de código. Para hacer esto, debe pasar los parámetros requeridos al método
ConvertTemplate() (sourcePath, data, options, outputPath).
1// Convert template to HTML
2Converter.ConvertTemplate(
3 Path.Combine(DataDir, "template.html"),
4 new TemplateData(Path.Combine(DataDir, "data-source.json")),
5 new TemplateLoadOptions(),
6 Path.Combine(OutputDir, "template-with-single-line.html")
7);El fragmento de código anterior muestra cómo utilizar el método ConvertTemplate() para crear un documento HTML basado en una plantilla y completarlo con datos de una fuente de datos JSON. El método toma cuatro argumentos: la ruta al archivo de plantilla, la fuente de datos, las opciones de carga de la plantilla y la ruta donde se debe guardar el documento HTML de salida. El documento resultante se completará con los datos de la fuente de datos, utilizando la sintaxis de expresiones en línea para completar la plantilla.
Para obtener más información sobre cómo convertir una plantilla a HTML, visite el artículo
Convertir plantilla a HTML.
Puede descargar los ejemplos completos y los archivos de datos desde
GitHub.