Tag-хелперы и модели

С помощью атрибутов тегов мы можем передавать сложные данные - объекты классов, коллекции объектов.

Коллекции объектов

Например, мы хотим создать тег для вывода в виде списка произвольной коллекции строк. Для этого определим следующий класс tag-хелпера:

public class ListTagHelper : TagHelper
{
    public List<string> Elements { get; set; } = new();
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "ul";
		string listContent = "";
        foreach (string item in Elements)
            listContent = $"{listContent}<li>{item}</li>";

        output.Content.SetHtmlContent(listContent);
    }
}

Данный хелпер через свойство Elements будет получать коллекцию строк в виде объекта List<string>. А в методе Process из этих элементов будет создаваться html-элемент ul.

Теперь определим в представлении следующий код:

@addTagHelper *, MvcApp

@{ 
    List<string> countries = new List<string> { "Бразилия", "Аргентина", "Уругвай" };
    List<string> cities = new List<string> { "Бразилиа", "Буэйнос-Айрес", "Монтевидео" };
}

<list elements="countries"></list>
<list elements="cities"></list>

В блоке кода создаются два списка: страны и города. Затем эти списки передаются в тег. В итоге веб-страница выведет эти страны и города в виде элементов ul:

Сложные объекты

Аналогично идет работа со сложными моделями. Например, пусть у нас определена следующая модель Person:

namespace MvcApp.Models
{
    public record class Person(int Id, string Name,  int Age);
}

Для вывода информации об одном объекте данной модели создадим следующий класс хелпера:

using Microsoft.AspNetCore.Razor.TagHelpers;
using MvcApp.Models;  // пространство имен модели Person

namespace MvcApp.TagHelpers
{
    public class PersonInfoTagHelper : TagHelper
    {
        public Person? Person { get; set; }
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "div";
            output.TagMode = TagMode.StartTagAndEndTag;
            string content = "";
            if(Person != null)
                content = $"<p>Имя: <b>{Person.Name}</b></p><p>Возраст: <b>{Person.Age}</b></p>";
            output.Content.SetHtmlContent(content);
        }
    }
}

Также, как и в предыдущем случае, через свойство Person класс получает переданные из представления данные и с их помощью создает разметку html.

Далее определим в представлении следующий код:

@addTagHelper *, MvcApp
@using MvcApp.Models @*Пространство имен модели User*@

@{
    Person tom = new(1, "Tom", 37);
}
 
<person-info person="tom" />

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