HTML-Vorlage – Wie man mit C# auffüllt
Dieser Artikel beschreibt, wie man ein HTML-Dokument auf der Grundlage einer Vorlage erstellt und es aus einer Datenquelle füllt. Aspose.HTML for .NET bietet die Syntax für Inline-Ausdrücke, um mit Vorlagen und verschiedenen Datenquellentypen wie XML und JSON zu arbeiten.
Template-Auszeichnung
Die HTML-Schablone ist eine reguläre HTML-Datei, die einige spezielle Inline-Ausdrücke enthält, die die Zuordnung von Eingabedaten und -quellen zum HTML-Seitenlayout festlegen. Diese Inline-Ausdrücke verwenden die Notation in doppelt geschweiften Klammern. Die Schablonenmarkierungen werden bei der Verarbeitung der Schablone nach den unten beschriebenen Regeln durch die entsprechenden Datenwerte ersetzt.
Inline-Ausdrücke
Nachfolgend finden Sie eine Liste der unterstützten Syntax für Inline-Ausdrücke.
{{ … }} – datenbindender Ausdruck
Der Datenbindungsausdruck wird verwendet, um Werte des Kontrollelements auf der Grundlage der in der Datenquelle enthaltenen Informationen festzulegen.
Im Folgenden wird die grundlegende Syntax des Datenbindungsausdrucks beschrieben:
{{ data-binding expression }}
In der folgenden Demo wird gezeigt, wie der Datenbindungsausdruck verwendet wird, um Informationen aus der XML-Datenquelle zu erhalten:
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>Der Datenbindungsausdruck in der HTML-Seitenvorlage:
HTML-Vorlage
Dies ist ein Beispiel für eine HTML-Vorlage, die Inline-Ausdrücke zur Datenbindung verwendet. Die Vorlage enthält eine Tabelle mit zwei Spalten für “Person” und “Address”. Die Zellen in der Spalte “Person” zeigen die Werte von {{FirstName}} und {{LastName}} aus der Datenquelle an. Die Zellen in der Spalte “Address” zeigen die Werte von {{Address.Street}}, {{Address.Number}} und {{Address.City}}. Die Syntax der geschweiften Klammern wird verwendet, um einen Inline-Ausdruck anzuzeigen.
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 … }} – Ausdruck der foreach-Richtlinie
Der Ausdruck der foreach-Direktive wird verwendet, um in Kombination mit dem Datenbindungsausdruck durch die Liste der Elemente zu iterieren.
Die folgende Demo zeigt, wie man alle Personen aus einer XML-Datenquelle abruft und eine Vorlage ausfüllt:
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>Der Ausdruck foreach directive in der HTML-Seitenvorlage:
HTML-Vorlage
Das Attribut “data_merge” gibt an, dass die Datenquelle eine Liste von Objekten ist und die Tabelle für jedes Objekt in der Liste wiederholt werden soll. Die Ausdrücke innerhalb der Vorlage, wie {{FirstName}}, {{LastName}}, {{Address.Street}} und {{Address.Number}}, geben die Felder der Datenquelle an, die in die entsprechenden Zellen der Tabelle eingefügt werden sollen.
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>Bitte beachten Sie, dass die derzeitige Implementierung nur den Ausdruck der foreach-Direktive für die folgenden HTML-Elemente unterstützt: DIV, OL, UL und TABLE.
Datenquelle
Wie bereits erwähnt, kann die Datenquelle in den Formaten XML und JSON dargestellt werden. Im Folgenden finden Sie Beispiele für beide Datenquellen, die für diesen Artikel vorbereitet wurden:
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 }Vorlage in HTML umwandeln mit ein paar Zeilen Code
Sobald Sie eine HTML-Vorlage vorbereitet haben, können Sie die Vorlage in Ihrer C#-Anwendung buchstäblich mit ein paar Zeilen Code in HTML umwandeln! Dazu müssen Sie die erforderlichen Parameter an die Methode
ConvertTemplate() übergeben (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);Der obige Codeschnipsel zeigt, wie die Methode ConvertTemplate() verwendet wird, um ein HTML-Dokument auf der Grundlage einer Vorlage zu erstellen und es mit Daten aus einer JSON-Datenquelle zu füllen. Die Methode benötigt vier Argumente: den Pfad zur Vorlagendatei, die Datenquelle, die Ladeoptionen für die Vorlage und den Pfad, unter dem das HTML-Ausgabedokument gespeichert werden soll. Das resultierende Dokument wird mit den Daten aus der Datenquelle aufgefüllt, wobei die Syntax der Inline-Ausdrücke zum Ausfüllen der Vorlage verwendet wird.
Weitere Informationen über die Konvertierung von Vorlagen in HTML finden Sie im Artikel
Vorlage in HTML konvertieren.
Sie können die vollständigen Beispiele und Datendateien von GitHub herunterladen.