Définition d'attributs dans un modèle HTML – Exemples en C#

Modèle HTML – HTML Template

Le modèle HTML est un fichier HTML standard qui contient des expressions en ligne spéciales, indiquées par des doubles crochets, qui font correspondre la source de données d’entrée au balisage de la page HTML. Lors du traitement du modèle, ces expressions en ligne seront remplacées par les valeurs de données correspondantes, conformément aux règles énoncées dans l’article HTML Template.

La bibliothèque Aspose.HTML for .NET vous permet de définir des attributs dans les modèles HTML et de contrôler la présence d’attributs lors du remplissage des modèles. L’article suivant vous montre comment utiliser cette fonctionnalité dans des exemples en C#.

Définir un attribut dans un modèle HTML

Les attributs sont utilisés pour les éléments HTML afin de fournir des informations supplémentaires sur un élément, de spécifier ses caractéristiques ou de définir des propriétés telles que l’identifiant, la classe, le style, etc. Ces attributs sont spécifiés dans la balise d’ouverture d’un élément HTML et peuvent être définis à l’aide de valeurs statiques ou de données dynamiques (expressions en ligne) :

• Les valeurs statiques sont le contenu fixe du HTML, tel que le texte, les noms d’éléments et d’attributs, qui restent inchangés dans la sortie HTML finale.
• Les données dynamiques sont des données qui peuvent changer et qui sont généralement fournies par une source de données. Les données dynamiques sont insérées dans le modèle HTML à l’aide d’expressions en ligne.

Définir l’attribut checked pour les cases à cocher HTML

Prenons par exemple le modèle HTML suivant :

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

Il s’agit d’un élément de formulaire checkbox qui possède un attribut disabled qui le rend non éditable et un label {{attr}} auquel on peut ajouter un attribut basé sur la source de données. Dans ce label, en utilisant la source de données suivante, nous allons définir l’attribut checked qui affichera une coche dans cette case à cocher HTML lorsqu’elle sera dessinée :

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

Un exemple complet de remplissage du modèle en C# ressemble à ceci :

// 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));
}

Examinons de plus près cet extrait de code C# :

1. Dans l’exemple, nous créons un modèle HTML à partir de zéro, c’est-à-dire à partir de la chaîne de code. Nous commençons donc par préparer le code HTML.
2. Nous utilisons la méthode ConvertTemplate(content, baseUrl, data, options) pour convertir le modèle. Cette méthode prend quatre paramètres et convertit une chaîne de contenu HTML en un objet htmlDocument complètement formé :
   • 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. Après avoir créé le document HTML, nous accédons à un élément <input> dans le document et vérifions qu’il possède les bons attributs, tels que checked dans ce cas :
   • 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. Pour convertir un document HTML en un fichier image, nous utilisons la méthode RenderTo().
5. Enfin, nous appelons la méthode Save(path). Le document HTML est enregistré dans le fichier out-checked.html. Le contenu de ce fichier peut être vu ci-dessous :

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

Case à cocher vide

Si vous souhaitez créer un document basé sur ce modèle avec un élément case à cocher vide, utilisez la source de données suivante :

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

Comme vous pouvez le constater, pour obtenir un tel résultat, il suffit de passer une valeur vide. L’exemple de conversion complet ressemble à ceci :

// 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));
}

Aspose.HTML propose des Convertisseurs gratuits en ligne pour convertir des fichiers HTML, XHTML, MHTML, EPUB, XML et Markdown dans une variété de formats populaires. Vous pouvez facilement convertir HTML en PDF, HTML en Image, EPUB en PDF, SVG en PDF, MHTML en PDF, ou MD en HTML. Il vous suffit de sélectionner un fichier, de choisir le format à convertir et le tour est joué. Essayez gratuitement nos convertisseurs puissants dès maintenant !