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

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core 7

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

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

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

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

        output.Content.SetHtmlContent(listContent);
    }
}

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

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

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

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

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

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

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

public class User
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

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

public class UserInfoTagHelper : TagHelper
{
	public User User { get; set; }
	public override void Process(TagHelperContext context, TagHelperOutput output)
	{
		output.TagName = "div";
		var content = $@"<p>Имя: <b>{User.Name}</b></p><p>Возраст: <b>{User.Age}</b></p>";
		output.Content.SetHtmlContent(content);
	}
}

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

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

@using TagHelpersApp.Models @*Пространство имен модели User*@
@{
    User tom = new User { Id = 5, Name = "Tom", Age = 35 };
}

<user-info user="tom"></user-info>

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