Modèle HTML

Découvrez comment remplir un modèle HTML à partir de sources de données et le convertir en document HTML

Comment utiliser le modèle HTML

Un modèle HTML est un fichier HTML standard qui contient des expressions en ligne spéciales (espaces réservés) qui spécifient le mappage de la source de données d’entrée avec le balisage de la page HTML. Les espaces réservés marqués par des doubles accolades indiquent les zones dans lesquelles les données réelles provenant des sources de données doivent être insérées. Aspose.HTML for .NET propose un ensemble de méthodes ConvertTemplate() pour convertir le modèle HTML en un document HTML rempli de données. Voyons donc comment remplir le modèle HTML à partir d’une source de données et le convertir en fichier HTML.

Tout d’abord, assurez-vous que la bibliothèque Aspose.HTML for .NET est installée dans votre projet. C’est assez facile à faire. Vous pouvez l’installer via la console NuGet Package Manager à l’aide de la commande suivante :

Installer Aspose.HTML pour .NETInstall-Package Aspose.HTML

Source de données

Pour créer et remplir un document HTML à partir d’un modèle, vous aurez besoin d’une source de données à remplir. Aspose.HTML fournit la syntaxe des expressions en ligne pour fonctionner avec des modèles et divers types de sources de données, tels que XML et JSON. Une source de données typique au format XML pourrait ressembler à ceci :

Source de données 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>

Balisage du modèle

Le balisage de modèle est un ensemble de syntaxes utilisé pour intégrer du contenu dynamique dans un modèle HTML. Les expressions en ligne sont utilisées dans le balisage de modèle pour exécuter du code ou générer des valeurs dynamiques directement dans le document HTML. Voici quelques règles simples pour préparer un modèle HTML à remplir à partir d’une source de données :

L’expression de liaison de données est utilisée pour définir les valeurs de l’élément de contrôle en fonction des informations contenues dans la source de données avec la syntaxe suivante : {{ expression de liaison de données }}. Par exemple, les expressions à l’intérieur du modèle, telles que {{FirstName}}, {{LastName}}, {{Address.Street}}, {{Address.Number}} et {{Telephone}}, indiquez les champs de la source de données qui doivent être insérés dans les cellules correspondantes du tableau.
L’attribut data_merge spécifie que la source de données est une liste d’objets et que le tableau doit être répété pour chaque objet.
L’expression de directive foreach est utilisée pour parcourir la liste d’éléments en combinaison avec une expression de liaison de données.

La structure d'un modèle 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>

Convertir le modèle en HTML

Une fois que votre modèle HTML et votre fichier source de données sont prêts, vous pouvez les fusionner, c’est-à-dire convertir le modèle en un fichier HTML rempli de données. Aspose.HTML pour .NET propose un ensemble de méthodes ConvertTemplate() pour convertir un modèle en document HTML. Les méthodes prennent plusieurs paramètres et renvoient un document HTML. Utilisons la méthode ConvertTemplate(HTMLDocument, TemplateData, TemplateLoadOptions, string) qui prend quatre paramètres :

L’objet HTMLDocument est utilisé comme source pour le modèle.
L’objet TemplateData contient les données qui seront utilisées pour remplir le modèle.
L’objet TemplateLoadOptions fournit des options pour charger le modèle.
Un paramètre string est utilisé pour spécifier le chemin complet du fichier HTML comme résultat de conversion de sortie.

Code C# pour convertir le modèle en fichier 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();

Un tableau rempli avec les données du fichier XML ci-dessus et utilisant le modèle HTML ressemblera à ceci :

Texte “Tableau HTML rempli de données à l’aide du modèle”

En fonction de la signature de la méthode ConvertTemplate() , vous pouvez définir une source de modèle HTML à partir d’un fichier, d’une URL ou d’un contenu en ligne (string content). Vous pouvez également ajouter configuration comme paramètre.

Pour en savoir plus sur l’API Aspose.HTML, veuillez visiter notre documentation . Dans le chapitre Working with HTML Templates , vous trouverez des informations sur la façon de remplir un modèle HTML à partir de sources de données XML ou JSON, comment convertir un modèle en HTML, comment définir des attributs dans un modèle HTML et comment contrôler la présence d’attributs lors du remplissage des modèles.