Modelo HTML

Aprenda como preencher um modelo HTML a partir de fontes de dados e convertê-lo em um documento HTML

Como usar o modelo HTML

Um modelo HTML é um arquivo HTML regular que contém algumas expressões embutidas especiais (espaços reservados) que especificam o mapeamento da fonte de dados de entrada para a marcação da página HTML. Os espaços reservados marcados por chaves duplas indicam áreas onde os dados reais das fontes de dados devem ser inseridos. Aspose.HTML for .NET oferece um conjunto de métodos ConvertTemplate() para converter o modelo HTML em um documento HTML preenchido com dados. Então, vamos descobrir como preencher o modelo HTML a partir de uma fonte de dados e convertê-lo em um arquivo HTML.

Primeiro, certifique-se de ter a biblioteca Aspose.HTML for .NET instalada em seu projeto. Isso é muito fácil de fazer. Você pode instalá-lo por meio do Console do Gerenciador de Pacotes NuGet usando o seguinte comando:

Instale Aspose.HTML para .NETInstall-Package Aspose.HTML

Fonte de dados

Para criar e preencher um documento HTML a partir de um modelo, você precisará de uma fonte de dados para preencher. Aspose.HTML fornece a sintaxe de expressões embutidas para trabalhar com modelos e vários tipos de fontes de dados, como XML e JSON. Uma fonte de dados típica em formato XML pode ter esta aparência:

Fonte de dados XML<Data>
    <Persons>
        <Person>
            <FirstName>Sherlock</FirstName>
			<LastName>Doe</LastName>
			<Address>
				<City>Dallas</City>
				<Street>Main rd.</Street>
				<Number>114</Number>
			</Address>
			<Telephone>012-5344-334</Telephone>
        </Person>
        <Person>
            <FirstName>Jack</FirstName>
            <LastName>Fox</LastName>
            <Address>
                <Number>25</Number>
                <Street>Broadway</Street>
                <City>New York</City>
            </Address>
            <Telephone>081-544-12-15</Telephone>
        </Person>
    </Persons>
 </Data>

Marcação de modelo

A marcação de modelo é um conjunto de sintaxe usado para incorporar conteúdo dinâmico em um modelo HTML. Expressões embutidas são usadas na marcação de modelo para executar código ou gerar valores dinâmicos diretamente no documento HTML. Aqui estão algumas regras simples para preparar um modelo HTML para ser preenchido a partir de uma fonte de dados:

A expressão de ligação de dados é usada para definir valores do elemento de controle com base nas informações contidas na fonte de dados com a seguinte sintaxe: {{ expressão de ligação de dados }}. Por exemplo, as expressões dentro do modelo, como {{FirstName}}, {{LastName}}, {{Address.Street}}, {{Address.Number}} e {{Telephone}}, indicar os campos da fonte de dados que devem ser inseridos nas células correspondentes da tabela.
O atributo data_merge especifica que a fonte de dados é uma lista de objetos e a tabela deve ser repetida para cada objeto.
A expressão da diretiva foreach é usada para iterar pela lista de elementos em combinação com uma expressão de ligação de dados.

A estrutura de um modelo HTML<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Person Information</title>
	</head>
	<body>
		<table border=1 data_merge="{{#foreach Persons.Person}}">
			<tr>
				<th>Person</th>
				<th>Address</th>
				<th>Telephone</th>
			</tr>
			<tr>
				<td>{{FirstName}} {{LastName}}</td>
				<td>{{Address.Street}} {{Address.Number}}, {{Address.City}}</td>
				<td>{{Telephone}} </td>
			</tr>
		</table>
	</body>
</html>

Converter modelo em HTML

Depois de ter o modelo HTML e o arquivo de fonte de dados prontos, você poderá mesclá-los, ou seja, converter o modelo em um arquivo HTML preenchido com dados. Aspose.HTML for .NET oferece um conjunto de métodos ConvertTemplate() para converter um modelo em um documento HTML. Os métodos recebem vários parâmetros e retornam um documento HTML. Vamos usar o método ConvertTemplate(HTMLDocument, TemplateData, TemplateLoadOptions, string) que leva quatro parâmetros:

O objeto HTMLDocument é usado como fonte para o modelo.
O objeto TemplateData contém os dados que serão usados para preencher o modelo.
O objeto TemplateLoadOptions fornece opções para carregar o modelo.
Um parâmetro string é usado para especificar o caminho completo do arquivo HTML como resultado da conversão de saída.

Código C# para converter modelo em arquivo HTMLusing System.IO;
using Aspose.Html.Converters;
using Aspose.Html.Loading;
...

    // Initialize an HTML document as a conversion source (HTML template)
    var document = new HTMLDocument(Path.Combine(DataDir, "html-template.html"), new Configuration());

    // Define a TemplateData object
    var templateData = new TemplateData(Path.Combine(DataDir, "template-data.xml"));

    // Define a default TemplateLoadOptions object
    var options = new TemplateLoadOptions();

    // Prepare a path to the result file
    var resultPath = Path.Combine(OutputDir, "document.html");

    // Convert template to HTML
    Converter.ConvertTemplate(document, templateData, options, resultPath);

    // Clear resources
    document.Dispose();

Uma tabela preenchida com dados do arquivo XML acima e usando o modelo HTML terá a seguinte aparência:

Texto “Tabela HTML preenchida com dados usando o modelo”

Dependendo da assinatura do método ConvertTemplate() , você pode definir uma fonte de modelo HTML a partir de um arquivo, URL ou conteúdo embutido (string content). Você também pode adicionar configuration como parâmetro.

Para saber mais sobre a API Aspose.HTML, visite nossa documentação . No capítulo Working with HTML Templates , você encontrará informações sobre como preencher um modelo HTML a partir de fontes de dados XML ou JSON, como converter um modelo em HTML, como definir atributos em um modelo HTML e como controlar a presença de atributos ao preencher modelos.