Установка атрибутов в шаблоне HTML – примеры C#

HTML Template

Шаблон HTML (HTML Template) представляет собой стандартный HTML-файл, содержащий специальные встроенные выражения, обозначенные двойными фигурными скобками, которые сопоставляют источник входных данных с разметкой HTML-страницы. Во время обработки шаблона эти встроенные выражения будут заменены соответствующими значениями данных, как указано в правилах, изложенных в статье HTML Template.

Библиотека Aspose.HTML for .NET позволяет устанавливать атрибуты в шаблоне HTML и контролировать наличие атрибутов при заполнении шаблонов. В следующей статье показано, как использовать эту функцию в примерах C#.

Установить атрибут в шаблоне HTML

Атрибуты используются для HTML-элементов, чтобы предоставить дополнительную информацию об элементе, указать его характеристики или задать такие свойства, как идентификатор, класс, стиль и т. д. Эти атрибуты указываются в открывающем теге HTML-элемента и могут быть установлены с использованием статических значений или динамические данные (встроенные выражения):

• Статические значения – это фиксированное содержимое HTML, такое как текст, имена элементов и атрибутов, которые остаются неизменными в конечном выводе HTML.
• Динамические данные – это данные, которые могут изменяться и обычно предоставляются источником данных. Динамические данные вставляются в шаблон HTML с помощью встроенных выражений.

Установите атрибут checked для флажка HTML (HTML Checkbox)

Например, возьмем следующий HTML-шаблон:

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

Это элемент формы флажка с отключенным набором атрибутов, который делает его недоступным для редактирования, и меткой {{attr}}, к которой можно добавить атрибут на основе источника данных. В этой метке, используя следующий источник данных, мы установим атрибут «checked», который будет отображать галочку в этом флажке HTML при рисовании:

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

Полный пример заполнения шаблона на C# выглядит так:

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

Давайте внимательнее посмотрим на этот фрагмент кода C#:

1. В примере мы создаем HTML-шаблон с нуля, т. е. из строки кода. Итак, сначала подготавливаем HTML-код.
2. Мы используем ConvertTemplate(content, baseUrl, data, options) для преобразования шаблона. Этот метод принимает четыре параметра и преобразует строку содержимого HTML в полностью сформированный объект htmlDocument:
   • content (htmlCode) – строка с HTML-кодом для использования в качестве шаблона;
   • baseUrl (string.Empty) – в данном примере пустая строка, так как этот параметр не используется;
   • data (TemplateData) – источник данных для заполнения шаблона. В данном случае это строка XML, хранящаяся в переменной dataSource;
   • options (TemplateLoadOptions) – загрузить опции для шаблона. Вы можете создать его с помощью конструктора TemplateLoadOptions().
3. После создания HTML-документа мы обращаемся к элементу <input> внутри документа и проверяем, что он имеет правильные атрибуты, такие как checked в этом случае:
   • Мы используем метод GetElementsByTagName() для получения первого элемента <input>.
   • Затем мы выполняем несколько утверждений для проверки свойств элемента <input>. Первое утверждение Assert.True(input.Checked) проверяет, установлен ли флажок. Следующие два утверждения, Assert.Equal(3, input.Attributes.Length) и Assert.Equal("type", input.Attributes[0].Name), проверяют количество атрибутов и имя первый атрибут входного элемента соответственно и так далее.
4. Чтобы преобразовать документ HTML в файл изображения, мы используем метод RenderTo().
5. Наконец, мы вызываем метод Save(path). HTML-документ сохраняется в файле out-checked.html. Содержимое этого файла можно увидеть ниже:

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

Вы можете скачать полные примеры и файлы данных с GitHub.

Пустой флажок – Empty Checkbox

Если вы хотите создать документ на основе этого шаблона с пустым элементом флажка, используйте следующий источник данных:

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

Как видите, для получения такого результата достаточно просто передать пустое значение. Полный пример преобразования выглядит так:

// 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 предлагает бесплатные онлайн Конвертеры для преобразования HTML, XHTML, MHTML, EPUB, XML и Markdown. файлы в различные популярные форматы. Вы можете легко конвертировать HTML в PDF, HTML в изображение, EPUB to PDF, SVG в PDF, MHTML в PDF, или MD в HTML. Просто выберите файл, выберите формат для преобразования, и все готово! Попробуйте наши мощные Конвертеры бесплатно прямо сейчас!