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 템플릿에서 속성을 설정하는 방법 및 템플릿을 채울 때 속성의 존재를 제어하는 ​​방법.