Modèle HTML – Comment remplir le formulaire en utilisant C#
Cet article décrit comment créer un document HTML basé sur un modèle et le remplir à partir d’une source de données. Aspose.HTML for .NET fournit la syntaxe des expressions en ligne pour travailler avec des modèles et divers types de sources de données, tels que XML et JSON.
Balisage du modèle
Le modèle HTML (HTML template) est un fichier HTML ordinaire qui contient des expressions en ligne spéciales qui spécifient la correspondance entre les sources de données d’entrée et le balisage de la page HTML. Ces expressions en ligne utilisent la notation des doubles crochets bouclés. Les marqueurs du modèle seront remplacés par les valeurs de données correspondantes lors du traitement du modèle, conformément aux règles décrites ci-dessous.
Expressions en ligne
Voici la liste des expressions en ligne prises en charge.
{{ … }} – expression de liaison de données
L’expression data-binding 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.
Voici la syntaxe de base de l’expression de liaison de données :
{{ expression de liaison de données }}
La démonstration suivante montre comment utiliser l’expression data-binding pour obtenir des informations à partir de la source de données 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>L’expression de liaison de données dans le modèle de page HTML :
HTML Template
Voici un exemple de modèle HTML qui utilise des expressions en ligne pour lier les données. Le modèle comprend un tableau avec deux colonnes pour “Person” et “Address”. Les cellules de la colonne “Person” affichent les valeurs de {{FirstName}} et {{LastName}} de la source de données. Les cellules de la colonne “Address” affichent les valeurs de {{Address.Street}} {{Address.Number}} et {{Address.City}}. La syntaxe des accolades est utilisée pour indiquer une expression en ligne.
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 … }} – expression de la directive foreach
L’expression directive foreach est utilisée pour parcourir la liste des éléments en combinaison avec l’expression data-binding.
La démo suivante montre comment récupérer toutes les personnes d’une source de données XML et remplir un modèle :
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>L’expression de la directive foreach dans le modèle de page HTML :
HTML Template
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 de la liste. Les expressions contenues dans le modèle, telles que {{FirstName}}, {{LastName}}, {{Address.Street}} et {{Address.Number}}, indiquent les champs de la source de données qui doivent être insérés dans les cellules correspondantes du tableau.
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>Veuillez noter que l’implémentation actuelle ne prend en charge l’expression de la directive foreach que pour les éléments HTML suivants : DIV, OL, UL et TABLE.
Source des données
Comme indiqué précédemment, la source de données peut être représentée aux formats XML et JSON. Voici les exemples de ces deux sources de données préparés pour cet article :
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 }Convertir un modèle en HTML avec quelques lignes de code
Une fois que vous avez préparé un modèle HTML, vous pouvez convertir le modèle en HTML dans votre application C#, littéralement avec quelques lignes de code ! Pour ce faire, vous devez passer les paramètres requis à la méthode
ConvertTemplate() (sourcePath, data, options, outputPath).
1// Convert Template to HTML using C#
2
3// Convert template to HTML
4Converter.ConvertTemplate(
5 Path.Combine(DataDir, "template.html"),
6 new TemplateData(Path.Combine(DataDir, "data-source.json")),
7 new TemplateLoadOptions(),
8 Path.Combine(OutputDir, "template-with-single-line.html")
9);L’extrait de code ci-dessus montre comment utiliser la méthode ConvertTemplate() pour créer un document HTML basé sur un modèle et le remplir avec des données provenant d’une source de données JSON. La méthode prend quatre arguments : le chemin vers le fichier de modèle, la source de données, les options de chargement du modèle et le chemin où le document HTML de sortie doit être sauvegardé. Le document résultant sera rempli avec les données de la source de données, en utilisant la syntaxe des expressions en ligne pour remplir le modèle.
Pour plus d’informations sur la manière de convertir un modèle en HTML, veuillez consulter l’article Convertir un modèle en HTML
Vous pouvez télécharger les exemples complets et les fichiers de données sur GitHub.