HTMLテンプレート

データソースから HTML テンプレートを設定し、それを HTML ドキュメントに変換する方法を学習します。

HTMLテンプレートの使用方法

HTML テンプレートは、HTML ページマークアップへの入力データソースマッピングを指定するいくつかの特別なインライン式 (プレースホルダー) を含む通常の HTML ファイルです。二重中括弧でマークされたプレースホルダーは、データソースからの実際のデータを挿入する必要がある領域を示します。 Aspose.HTML for .NET は、HTML テンプレートをデータが埋め込まれた HTML ドキュメントに変換するための一連の ConvertTemplate() メソッドを提供します。それでは、データソースから HTML テンプレートを入力し、それを HTML ファイルに変換する方法を見てみましょう。

まず、Aspose.HTML for .NET ライブラリがプロジェクトにインストールされていることを確認します。これは非常に簡単です。次のコマンドを使用して、NuGet パッケージマネージャーコンソールからインストールできます。

Aspose.HTML for .NET をインストールするInstall-Package Aspose.HTML

データソース

テンプレートから HTML ドキュメントを作成してデータを取り込むには、データを取り込むためのデータソースが必要です。 Aspose.HTML は、テンプレートや XML や JSON などのさまざまなデータソースタイプを操作するためのインライン式構文を提供します。 XML 形式の一般的なデータソースは次のようになります。

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>

テンプレートのマークアップ

テンプレートマークアップは、HTML テンプレートに動的コンテンツを埋め込むために使用される構文のセットです。インライン式は、HTML ドキュメント内で直接コードを実行したり動的値を出力したりするために、テンプレートマークアップ内で使用されます。データソースから入力される HTML テンプレートを準備するための簡単なルール を次に示します。

データバインディング式は、構文 {{ データバインディング式 }} を使用して、データソースに含まれる情報に基づいてコントロール要素の値を設定するために使用されます。たとえば、テンプレート内の式 ({{FirstName}}、{{LastName}}、{{Address.Street}}、{{Address.Number}}、{{Telephone}} など)テーブルの対応するセルに挿入する必要があるデータソースのフィールドを示します。
data_merge 属性は、データソースがオブジェクトのリストであり、オブジェクトごとにテーブルを繰り返す必要があることを指定します。
foreach ディレクティブ式は、データバインディング式と組み合わせて要素のリストを反復処理するために使用されます。

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>

テンプレートをHTMLに変換

HTML テンプレートとデータソースファイルの準備ができたら、それらをマージできます。つまり、テンプレートをデータが入力された HTML ファイルに変換できます。 Aspose.HTML for .NET は、テンプレートを HTML ドキュメントに変換するための ConvertTemplate() メソッドのセットを提供します。これらのメソッドはいくつかのパラメータを受け取り、HTML ドキュメントを返します。 4 つのパラメーターを取る ConvertTemplate(HTMLDocument, TemplateData, TemplateLoadOptions, string) メソッドを使用してみましょう。

HTMLDocument オブジェクトはテンプレートのソースとして使用されます。
TemplateData オブジェクトは、テンプレートを設定するために使用されるデータを保持します。
TemplateLoadOptions オブジェクトは、テンプレートをロードするためのオプションを提供します。
string パラメータは、出力変換結果として HTML ファイルの完全なパスを指定するために使用されます。

テンプレートを HTML ファイルに変換する C# コードusing 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();

上記の XML ファイルのデータを入力し、HTML テンプレートを使用したテーブルは次のようになります。

テキスト「テンプレートを使用してデータを埋め込んだ HTML テーブル」

ConvertTemplate() メソッドシグネチャに応じて、ファイル、URL、またはインラインコンテンツから HTML テンプレートソースを定義できます(string content)。 configurationをパラメータとして追加することもできます。

Aspose.HTML API の詳細については、ドキュメントを参照してください。 Working with HTML Templates の章では、XML または JSON データソースから HTML テンプレートを設定する方法、テンプレートを HTML に変換する方法、HTML テンプレートに属性を設定する方法、およびテンプレートを設定するときに属性の存在を制御する方法。