Setting Attributes in HTML Template – C# Examples

HTML Template

The HTML template is a standard HTML file that contains special inline expressions, indicated by double curly brackets, which map the input data source to the HTML page markup. During template processing, these inline expressions will be replaced with the corresponding data values as specified by the rules outlined in the HTML Template article.

Aspose.HTML for .NET library allows you to set attributes in HTML template and control the presence of attributes when populating templates. The following article shows you how to use this feature in C# examples.

Set Attribute in HTML Template

Attributes are used for HTML elements to provide additional information about an element, specify its characteristics or set properties such as id, class, style, etc. These attributes are specified in the opening tag of an HTML element and can be set using static values or dynamic data (inline expressions):

• Static values are the fixed content of the HTML, such as text, element, and attribute names, that remain unchanged in the final HTML output.
• Dynamic data is data that can change and is typically provided by a data source. Dynamic data is inserted into the HTML template using inline expressions.

Set Attribute checked for HTML Checkbox

For example, let’s take the following HTML template:

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

It’s a checkbox form element that has a disabled attribute set which makes it uneditable and a {{attr}} label that can be added an attribute based on the data source. In this label, using the following data source, we will set the attribute checked which will display a checkmark in this HTML checkbox when drawn:

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

A complete C# example of filling the template looks like this:

// Create a template with a string of HTML code
var htmlCode = "<input type=\"checkbox\" disabled {{attr}} />";

// Set data for the template in XML format
var dataSource = "<Data><attr>checked</attr></Data>";

// Convert template to HTML
using (var htmlDocument = Converter.ConvertTemplate(htmlCode, string.Empty,
           new TemplateData(new TemplateContentOptions(dataSource, TemplateContent.XML)),
           new TemplateLoadOptions()))
{
    // Request the input checkbox element that we specified in the template
    var input = (HTMLInputElement)htmlDocument.GetElementsByTagName("input").First();

    // Check if it has a checkmark 
    Console.WriteLine("Checked: " + input.Checked);
    Console.WriteLine("Attributes.Length: " + input.Attributes.Length);
    Console.WriteLine("Attributes[0].Name: " + input.Attributes[0].Name);
    Console.WriteLine("Attributes[1].Name: " + input.Attributes[1].Name);
    Console.WriteLine("Attributes[2].Name: " + input.Attributes[2].Name);

    /*
    This example produces the following results:

    Checked: True
    Attributes.Length: 3
    Attributes[0].Name: type
    Attributes[1].Name: disabled
    Attributes[2].Name: checked
    */

    // Save the HTML document to a file
    htmlDocument.Save(Path.Combine(OutputDir, "out-checked.html"));

    // Prepare a path to the output image file
    string outputPath = Path.Combine(OutputDir, "out-checked.png"); 
    
    // Convert HTML to PNG using RenderTo() method
    htmlDocument.RenderTo(new ImageDevice(new ImageRenderingOptions(), outputPath));
}

Let’s take a closer look at this C# code snippet:

1. In the example, we create an HTML template from scratch, i.e., from the code string. So, first, we prepare HTML code.
2. We use the ConvertTemplate(content, baseUrl, data, options) method to convert the template. This method takes four parameters and converts an HTML content string into a fully-formed htmlDocument object:
   • content (htmlCode) – a string with HTML code to use as the template;
   • baseUrl (string.Empty) – an empty string in this example because this parameter is not used;
   • data (TemplateData) – the data source for populating the template. In this case, it is an XML string stored in the dataSource variable;
   • options (TemplateLoadOptions) – load options for the template. You can create it using the TemplateLoadOptions() constructor.
3. After creating the HTML document, we access an <input> element within the document and verify that it has the correct attributes, such as checked in this case:
   • We use the GetElementsByTagName() method to retrieve the first <input> element.
   • Then, we execute several assertions to check the properties of the <input> element. The first assertion, Assert.True(input.Checked), checks if the checkbox is checked. The following two assertions, Assert.Equal(3, input.Attributes.Length) and Assert.Equal("type", input.Attributes[0].Name), check the number of attributes and the name of the first attribute of the input element, respectively, and so on.
4. To render HTML document to an image file, we use the RenderTo() method.
5. Finally, we call the Save(path) method. HTML document is saved to the out-checked.html file. The content of this file can be seen below:

<html>
    <head>
    </head>
    <body>
        <input type="checkbox" disabled="" checked="">
    </body>
</html>

Empty Checkbox

If you want to create a document based on this template with an empty checkbox element, then use the following data source:

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

As you can see, to get such a result, it is enough to pass an empty value simply. The complete conversion example looks like this:

// Create a template with a string of HTML code
var htmlCode = "<input type=\"checkbox\" disabled {{attr}} />";

// Create an empty data source that won't set an attribute
var dataSource = "<Data><attr></attr></Data>";

// Convert template to HTML
using (var htmlDocument = Converter.ConvertTemplate(htmlCode, string.Empty,
           new TemplateData(new TemplateContentOptions(dataSource, TemplateContent.XML)),
           new TemplateLoadOptions()))
{
    // Request the input checkbox element that we specified in the template
    var input = (HTMLInputElement)htmlDocument.GetElementsByTagName("input").First();

    // Сheck if the checkbox is checked - it should not be there
    Console.WriteLine("Checked: " + input.Checked);
    Console.WriteLine("Attributes.Length: " + input.Attributes.Length);
    Console.WriteLine("Attributes[0].Name: " + input.Attributes[0].Name);
    Console.WriteLine("Attributes[1].Name: " + input.Attributes[1].Name);
   
    /*
    This example produces the following results:

    Checked: False
    Attributes.Length: 2
    Attributes[0].Name: type
    Attributes[1].Name: disabled
    */

    // Save the HTML document to a file
    htmlDocument.Save(Path.Combine(OutputDir, "out-unchecked.html"));

    // Prepare a path to the output file
    string outputPath = Path.Combine(OutputDir, "out-unchecked.png");

    // Convert HTML to PNG
    htmlDocument.RenderTo(new ImageDevice(new ImageRenderingOptions(), outputPath));
}

Aspose.HTML offers free online Converters for converting HTML, XHTML, MHTML, EPUB, XML and Markdown files to a variety of popular formats. You can easily convert HTML to PDF, HTML to Image, EPUB to PDF, SVG to PDF, MHTML to PDF, or MD to HTML. Just select a file, choose the format to convert, and you’re done. Try our forceful Converters for free now!