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

HTML Template

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

Библиотека Aspose.HTML для .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# выглядит так:

using Aspose.Html;
using Aspose.Html.Converters;
using Aspose.Html.Loading;
using Aspose.Html.Rendering.Image;
using System.IO;
using System.Linq;
...
    // 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 
        Assert.True(input.Checked);
        Assert.Equal(3, input.Attributes.Length);
        Assert.Equal("type", input.Attributes[0].Name);
        Assert.Equal("disabled", input.Attributes[1].Name);
        Assert.Equal("checked", input.Attributes[2].Name);

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

        // Save the HTML document to a file
        htmlDocument.Save(Path.Combine(OutputDir, "out-checked.html"));
    }

Давайте внимательнее посмотрим на этот фрагмент кода 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>

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

using Aspose.Html;
using Aspose.Html.Converters;
using Aspose.Html.Loading;
using Aspose.Html.Rendering.Image;
using System.IO;
using System.Linq;
...
    // 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
        Assert.False(input.Checked);
        Assert.Equal(2, input.Attributes.Length);
        Assert.Equal("type", input.Attributes[0].Name);
        Assert.Equal("disabled", input.Attributes[1].Name);

        // 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. Просто выберите файл, выберите формат для преобразования, и все готово! Попробуйте наши мощные Конвертеры бесплатно прямо сейчас!