Configuración de atributos en una plantilla HTML – ejemplos de C#

Plantilla HTML

La plantilla HTML es un archivo HTML estándar que contiene expresiones en línea especiales, indicadas por llaves dobles, que asignan la fuente de datos de entrada al marcado de la página HTML. Durante el procesamiento de la plantilla, estas expresiones en línea se reemplazarán con los valores de datos correspondientes según lo especificado por las reglas descritas en el artículo Plantilla HTML.

La biblioteca Aspose.HTML for .NET le permite establecer atributos en la plantilla HTML y controlar la presencia de atributos al completar las plantillas. El siguiente artículo le muestra cómo utilizar esta característica en ejemplos de C#.

Establecer atributo en plantilla HTML

Los atributos se utilizan para que los elementos HTML proporcionen información adicional sobre un elemento, especifiquen sus características o establezcan propiedades como id, clase, estilo, etc. Estos atributos se especifican en la etiqueta de apertura de un elemento HTML y se pueden configurar usando valores estáticos o datos dinámicos (expresiones en línea):

• Los valores estáticos son el contenido fijo del HTML, como texto, elementos y nombres de atributos, que permanecen sin cambios en la salida HTML final.
• Los datos dinámicos son datos que pueden cambiar y normalmente los proporciona una fuente de datos. Los datos dinámicos se insertan en la plantilla HTML mediante expresiones en línea.

Establecer atributo checked para la casilla de verificación HTML

Por ejemplo, tomemos la siguiente plantilla HTML:

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

Es un elemento de formulario de casilla de verificación que tiene un conjunto de atributos deshabilitado que lo hace no editable y una etiqueta {{attr}} a la que se le puede agregar un atributo basado en la fuente de datos. En esta etiqueta, utilizando la siguiente fuente de datos, estableceremos el atributo checked que mostrará una marca de verificación en esta casilla HTML cuando se dibuje:

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

Un ejemplo completo de C# sobre cómo completar la plantilla se ve así:

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

Echemos un vistazo más de cerca a este fragmento de código C#:

1. En el ejemplo, creamos una plantilla HTML desde cero, es decir, a partir de la cadena de código. Entonces, primero, preparamos el código HTML.
2. Usamos el método ConvertTemplate(content, baseUrl, data, options) para convertir la plantilla. Este método toma cuatro parámetros y convierte una cadena de contenido HTML en un objeto htmlDocument completamente formado:
   • content (htmlCode): una cadena con código HTML para usar como plantilla;
   • baseUrl (string.Empty): una cadena vacía en este ejemplo porque este parámetro no se utiliza;
   • data (TemplateData): la fuente de datos para completar la plantilla. En este caso, es una cadena XML almacenada en la variable dataSource;
   • options (TemplateLoadOptions): opciones de carga para la plantilla. Puedes crearlo usando el constructor TemplateLoadOptions().
3. Luego de crear el documento HTML, accedemos a un elemento <input> dentro del documento y verificamos que tenga los atributos correctos, como por ejemplo checked en este caso:
   • Usamos el método GetElementsByTagName() para recuperar el primer elemento <input>.
   • Luego, ejecutamos varias afirmaciones para comprobar las propiedades del elemento <input>. La primera afirmación, Assert.True(input.Checked), verifica si la casilla de verificación está marcada. Las siguientes dos afirmaciones, Assert.Equal(3, input.Attributes.Length) y Assert.Equal("type", input.Attributes[0].Name), verifican el número de atributos y el nombre del primer atributo del elemento de entrada, respectivamente, y así sucesivamente.
4. Para representar un documento HTML en un archivo de imagen, utilizamos el método RenderTo().
5. Finalmente, llamamos al método Save(path). El documento HTML se guarda en el archivo out-checked.html. El contenido de este archivo se puede ver a continuación:

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

Casilla vacía – Empty Checkbox

Si desea crear un documento basado en esta plantilla con un elemento de casilla de verificación vacío, utilice la siguiente fuente de datos:

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

Como puede ver, para obtener ese resultado, basta con pasar un valor vacío. El ejemplo de conversión completo se ve así:

// 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 ofrece Convertidores en línea gratuitos para convertir archivos HTML, XHTML, MHTML, EPUB, XML y Markdown a una variedad de formatos populares. Puede convertir fácilmente HTML a PDF, HTML a imagen, EPUB a PDF, SVG a PDF, MHTML a PDF, o MD a HTML. Simplemente seleccione un archivo, elija el formato a convertir y listo. ¡Prueba nuestros potentes convertidores gratis ahora!