Attribute in HTML-Vorlage setzen – C# Beispiele

HTML-Vorlage

Die HTML-Vorlage ist eine Standard-HTML-Datei, die spezielle Inline-Ausdrücke enthält, die durch doppelte geschweifte Klammern gekennzeichnet sind und die Eingabedatenquelle auf das HTML-Seitenlayout abbilden. Bei der Verarbeitung der Schablone werden diese Inline-Ausdrücke durch die entsprechenden Datenwerte gemäß den im Artikel HTML-Schablone dargelegten Regeln ersetzt.

Die Aspose.HTML for .NET-Bibliothek ermöglicht es Ihnen, Attribute in HTML-Vorlagen zu setzen und das Vorhandensein von Attributen beim Auffüllen von Vorlagen zu kontrollieren. Der folgende Artikel zeigt Ihnen, wie Sie diese Funktion in C#-Beispielen verwenden können.

Attribut in HTML-Vorlage setzen

Attribute werden für HTML-Elemente verwendet, um zusätzliche Informationen über ein Element zu liefern, seine Merkmale zu spezifizieren oder Eigenschaften wie id, class, style usw. festzulegen. Diese Attribute werden im öffnenden Tag eines HTML-Elements angegeben und können durch statische Werte oder dynamische Daten (Inline-Ausdrücke) festgelegt werden:

• Statische Werte sind die festen Inhalte des HTML, wie Text, Element- und Attributnamen, die in der endgültigen HTML-Ausgabe unverändert bleiben.
• Dynamische Daten sind Daten, die sich ändern können und normalerweise von einer Datenquelle bereitgestellt werden. Dynamische Daten werden mithilfe von Inline-Ausdrücken in die HTML-Vorlage eingefügt.

Attribut checked für HTML-Checkbox setzen

Nehmen wir zum Beispiel die folgende HTML-Vorlage:

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

Es handelt sich um ein Formular-Element für ein Kontrollkästchen, das mit einem deaktivierten Attribut versehen ist, das es uneditierbar macht, sowie um ein Label, dem ein Attribut auf der Grundlage der Datenquelle hinzugefügt werden kann. In dieser Beschriftung wird unter Verwendung der folgenden Datenquelle das Attribut checked gesetzt, das ein Häkchen in diesem HTML-Ankreuzfeld anzeigt, wenn es gezeichnet wird:

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

Ein vollständiges C#-Beispiel für das Ausfüllen der Vorlage sieht wie folgt aus:

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

Schauen wir uns dieses C#-Codefragment genauer an:

1. In diesem Beispiel erstellen wir eine HTML-Vorlage von Grund auf, d. h. aus dem Code-String. Zuerst bereiten wir also den HTML-Code vor.
2. Wir verwenden die Methode ConvertTemplate(content, baseUrl, data, options) zur Konvertierung der Vorlage. Diese Methode nimmt vier Parameter entgegen und konvertiert einen HTML-Inhaltsstring in ein vollständig geformtes htmlDocument-Objekt:
   • 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. Nach der Erstellung des HTML-Dokuments greifen wir auf ein <input>-Element innerhalb des Dokuments zu und überprüfen, ob es die richtigen Attribute hat, wie z.B. checked in diesem Fall:
   • 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. Um ein HTML-Dokument in eine Bilddatei umzuwandeln, verwenden wir die Methode RenderTo().
5. Schließlich rufen wir die Methode Save(path) auf. Das HTML-Dokument wird in der Datei out-checked.html gespeichert. Der Inhalt dieser Datei ist unten zu sehen:

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

Leeres Kontrollkästchen

Wenn Sie ein Dokument auf der Grundlage dieser Vorlage mit einem leeren Ankreuzfeld erstellen möchten, verwenden Sie die folgende Datenquelle:

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

Wie Sie sehen können, genügt es, einen leeren Wert zu übergeben, um ein solches Ergebnis zu erhalten. Das vollständige Konvertierungsbeispiel sieht wie folgt aus:

// 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 bietet kostenlose Online- Konverter für die Konvertierung von HTML-, XHTML-, MHTML-, EPUB-, XML- und Markdown-Dateien in eine Vielzahl von gängigen Formaten. Sie können ganz einfach HTML in PDF, HTML in Bild, EPUB in PDF, SVG in PDF, MHTML in PDF oder MD in HTML konvertieren. Wählen Sie einfach eine Datei aus, wählen Sie das zu konvertierende Format, und schon sind Sie fertig. Testen Sie unsere Konvertierungsprogramme jetzt kostenlos!