Set Attributes in HTML Template in C#

To set attributes in an HTML template in C#, place an inline expression inside the element tag, pass XML or JSON data through TemplateData, and call Converter.ConvertTemplate() to generate HTML with the required attribute.

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 are replaced with corresponding data values, as described in the HTML Template article.

Aspose.HTML for .NET lets you set attributes in an HTML template and control whether an attribute appears in the populated output. This is useful for boolean attributes such as checked, disabled, or selected, and for dynamic attributes whose value depends on the data source.

Static and Dynamic Attributes

Attributes provide additional information about HTML elements, specify characteristics, or set properties such as id, class, style, and form state. They are placed in the opening tag of an HTML element and can use static values or dynamic data:

• Static values are fixed HTML content, such as element names, attribute names, or constant attribute values that remain unchanged in the final HTML output.
• Dynamic data comes from a data source and is inserted into the HTML template using inline expressions.

Set the checked Attribute for HTML Checkbox

For example, take the following HTML template:

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

It is a checkbox form element with the disabled attribute, which makes the checkbox uneditable. The {{attr}} expression is placed inside the opening tag and can insert an attribute based on the data source. In the following XML data source, the attr value is checked, so the populated output includes the checked attribute:

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

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

1. Prepare HTML markup with an inline expression inside the <input> tag.
2. Prepare an XML data source where attr contains the checked attribute name.
3. Call ConvertTemplate(content, baseUrl, data, options) to create the populated HTML document.
4. Read the generated <input> element and verify that checked is present.
5. Render or save the resulting HTML document.

// Bind XML data to HTML template and export as HTML and PNG using C#

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

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

// Convert template to HTML
using (HTMLDocument 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
    HTMLInputElement 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));
}

In this example, the template is created from a code string. The ConvertTemplate() overload takes content, baseUrl, data, and options, and returns a populated HTMLDocument. The code then uses GetElementsByTagName() to retrieve the <input> element and verify its attributes. The document can be rendered with RenderTo() and saved with Save(path).

The saved out-checked.html file contains the generated checkbox:

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

Create an Empty Checkbox

If you want to create a document based on the same template but without a checked checkbox, pass an empty value for the attr field:

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

When the expression resolves to an empty value, no checked attribute is inserted. The complete conversion example looks like this:

1. Use the same <input type="checkbox" {{attr}} disabled /> template.
2. Pass a data source where attr is empty.
3. Populate the template with Converter.ConvertTemplate().
4. Save the generated HTML document.
5. Check the output to confirm that the checkbox is not checked.

// Populate HTML template with XML data using attribute control in C#

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

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

// Convert template to HTML
using (HTMLDocument 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
    HTMLInputElement 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));
}

You can download the complete examples and data files from GitHub.

FAQ

How do I set an HTML attribute from template data?

Place an inline expression inside the element opening tag, then provide the attribute name or value through TemplateData.

How do I omit a boolean attribute such as checked?

Pass an empty value for the expression that controls the attribute. In the example, an empty attr value produces an unchecked checkbox.

Can dynamic attributes use XML or JSON data?

Yes. The data can come from XML or JSON and be passed to the template through TemplateData.

Related Articles

• HTML Template Syntax in C# – learn data-binding expressions, foreach, XML data, and JSON data.
• Convert HTML Template to HTML in C# – use Converter.ConvertTemplate(), TemplateData, and TemplateLoadOptions.
• Aspose.HTML for .NET Examples on GitHub – complete C# examples and data files.