在 HTML 模板中设置属性 – C# 示例

HTML 模板 – HTML Template

HTML 模板是一个标准的 HTML 文件，其中包含特殊的内联表达式(用双大括号表示)，用于将输入数据源映射到 HTML 页面标记。在模板处理过程中，这些内联表达式将被替换为 HTML 模板文章中规定的相应数据值。

Aspose.HTML for .NET 库允许您在 HTML 模板中设置属性，并在填充模板时控制属性的存在。下面的文章将通过 C# 示例向您展示如何使用这一功能。

在 HTML 模板中设置属性

属性(attributes)用于 HTML 元素，可提供元素的附加信息、指定其特征或设置 id、class、style 等属性。这些属性在 HTML 元素的开头标签中指定，可以使用静态值或动态数据(内联表达式)进行设置：

静态值是 HTML 的固定内容，如文本、元素和属性名称，在最终的 HTML 输出中保持不变。
动态数据是可以改变的数据，通常由数据源提供。动态数据使用内联表达式插入 HTML 模板。

为 HTML 复选框设置属性 `checked`

例如，下面是一个 HTML 模板：

1<input type="checkbox" {{attr}} disabled />

这是一个复选框表单元素，它设置了一个 disabled 属性，使其不可编辑，还有一个 {{attr}} 标签，可根据数据源添加属性。在这个标签中，使用以下数据源，我们将设置属性 checked，在绘制时将在这个 HTML 复选框中显示一个复选标记：

1<Data><attr>checked</attr></Data>

填写模板的完整 C# 示例如下：

 1// Bind XML data to HTML template and export as HTML and PNG using C#
 2
 3// Create a template with a string of HTML code
 4string htmlCode = "<input type=\"checkbox\" disabled {{attr}} />";
 5
 6// Set data for the template in XML format
 7string dataSource = "<Data><attr>checked</attr></Data>";
 8
 9// Convert template to HTML
10using (HTMLDocument htmlDocument = Converter.ConvertTemplate(htmlCode, string.Empty,
11           new TemplateData(new TemplateContentOptions(dataSource, TemplateContent.XML)),
12           new TemplateLoadOptions()))
13{
14    // Request the input checkbox element that we specified in the template
15    HTMLInputElement input = (HTMLInputElement)htmlDocument.GetElementsByTagName("input").First();
16
17    // Check if it has a checkmark 
18    Console.WriteLine("Checked: " + input.Checked);
19    Console.WriteLine("Attributes.Length: " + input.Attributes.Length);
20    Console.WriteLine("Attributes[0].Name: " + input.Attributes[0].Name);
21    Console.WriteLine("Attributes[1].Name: " + input.Attributes[1].Name);
22    Console.WriteLine("Attributes[2].Name: " + input.Attributes[2].Name);
23
24    /*
25    This example produces the following results:
26
27    Checked: True
28    Attributes.Length: 3
29    Attributes[0].Name: type
30    Attributes[1].Name: disabled
31    Attributes[2].Name: checked
32    */
33
34    // Save the HTML document to a file
35    htmlDocument.Save(Path.Combine(OutputDir, "out-checked.html"));
36
37    // Prepare a path to the output image file
38    string outputPath = Path.Combine(OutputDir, "out-checked.png"); 
39    
40    // Convert HTML to PNG using RenderTo() method
41    htmlDocument.RenderTo(new ImageDevice(new ImageRenderingOptions(), outputPath));
42}

Example-FillHtmlTemplate.cs hosted with ❤ by GitHub

让我们仔细看看这个 C# 代码片段：

在示例中，我们从零开始创建 HTML 模板，即从代码字符串开始。因此，我们首先要编写 HTML 代码。
我们使用 ConvertTemplate(content, baseUrl, data, options) 方法来转换模板。该方法包含四个参数，可将 HTML 内容字符串转换为格式完整的 htmlDocument 对象。
创建 HTML 文档后，我们访问文档中的<input>元素，并验证它是否具有正确的属性，例如本例中的 checked。
要将 HTML 文档渲染为图像文件，我们使用 RenderTo() 方法。
最后，我们调用 Save(path) 方法。HTML 文档将保存到 out-checked.html 文件中。该文件的内容如下：

1<html>
2    <head>
3    </head>
4    <body>
5        <input type="checkbox" disabled="" checked="">
6    </body>
7</html>

空复选框

如果您想在此模板的基础上创建一个带有空复选框元素的文档，请使用以下数据源：

1<Data><attr></attr></Data>

如您所见，要得到这样的结果，只需传递一个空值即可。完整的转换示例如下

 1// Populate HTML template with XML data using attribute control in C#
 2
 3// Create a template with a string of HTML code
 4string htmlCode = "<input type=\"checkbox\" disabled {{attr}} />";
 5
 6// Create an empty data source that won't set an attribute
 7string dataSource = "<Data><attr></attr></Data>";
 8
 9// Convert template to HTML
10using (HTMLDocument htmlDocument = Converter.ConvertTemplate(htmlCode, string.Empty,
11           new TemplateData(new TemplateContentOptions(dataSource, TemplateContent.XML)),
12           new TemplateLoadOptions()))
13{
14    // Request the input checkbox element that we specified in the template
15    HTMLInputElement input = (HTMLInputElement)htmlDocument.GetElementsByTagName("input").First();
16
17    // Сheck if the checkbox is checked - it should not be there
18    Console.WriteLine("Checked: " + input.Checked);
19    Console.WriteLine("Attributes.Length: " + input.Attributes.Length);
20    Console.WriteLine("Attributes[0].Name: " + input.Attributes[0].Name);
21    Console.WriteLine("Attributes[1].Name: " + input.Attributes[1].Name);
22   
23    /*
24    This example produces the following results:
25
26    Checked: False
27    Attributes.Length: 2
28    Attributes[0].Name: type
29    Attributes[1].Name: disabled
30    */
31
32    // Save the HTML document to a file
33    htmlDocument.Save(Path.Combine(OutputDir, "out-unchecked.html"));
34
35    // Prepare a path to the output file
36    string outputPath = Path.Combine(OutputDir, "out-unchecked.png");
37
38    // Convert HTML to PNG
39    htmlDocument.RenderTo(new ImageDevice(new ImageRenderingOptions(), outputPath));
40}

Example-PopulateHtmlTemplateUsingAttributeControl.cs hosted with ❤ by GitHub

Aspose.HTML 提供免费的在线 转换器，用于将 HTML、XHTML、MHTML、EPUB、XML 和 Markdown 文件转换为各种流行格式。您可以轻松地将 HTML 转换为 PDF、 HTML 转换为图像、 EPUB 转换为 PDF、 SVG 转换为 PDF、 MHTML 转换为 PDF 或 MD 转换为 HTML。只需选择一个文件，选择要转换的格式，就大功告成了。现在就免费试用我们的强力转换器吧！

将模板转换为 HTML

在 HTML 模板中设置属性 – C# 示例

HTML 模板 – HTML Template

在 HTML 模板中设置属性

为 HTML 复选框设置属性 checked

空复选框

为 HTML 复选框设置属性 `checked`