View Component

Определение компонента представлений

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

View Component (или компонент представлений) представляет новую концепцию, которая появилась в ASP.NET Core MVC, и которая во многом схожа с частичными представлениями. При этом View Component предназначен для таких задач, которые, возможно, сложно решить с помощью одних частичных представлений, например, создание динамических меню, облако тегов, панель логина, корзина покупок и так далее.

View Component состоит из двух частей: класса на C# и частичного представления, которое вызывает методы этого класса. При этом View Component не может обрабатывать HTTP-запросы, а генерируемый им контент включается в код родительского представления, в котором вызывается компонент. Нередко View Component используется на мастер-странице _layout.cshtml.

И подобно контроллерам view component должен представлять класс с модификатором public. Кроме того, класс компонента не должен быть вложенным или абстрактным.

View Component поддерживает внедрение зависимостей, поэтому в коде view component можно получить зависимости из провайдера сервисов. В то же время комопонент не является частью жизненного цикла контроллера, поэтому к нему нельзя применять фильтры.

Есть три способа определения компонента:

• определение компонента как обычного класса (класс POCO)

• наследование от базового класса ViewComponent

• применение к классу атрибута [ViewComponent]

Для работы с компонентами представлений создадим новый проект ASP.NET Core по типу ASP.NET Core Web App (Model-View-Controller).

Определение View Component

Компонент как обычный класс

Теоретически классы компонентов могут размещаться в любой папке проекта. Однако как правило, для компонентов создается отдельная папка Components или ViewComponents. Поэтому добавим в проект папку с названием Components. Далее добавим в нее новый класс, который назовем TimerViewComponent:

using System;
namespace ViewComponentsApp.Components
{
    public class TimerViewComponent
    {
        public string Invoke()
        {
            
            return $"Текущее время: {DateTime.Now.ToString("hh:mm:ss")}";
        }
    }
}

При определении компонента в виде обычного класса C# название этого класса должно оканчиваться на суффикс ViewComponent, плюс в самом классе должен быть определен метод Invoke() (если он должен выполнять действия в синхронном режиме) или InvokeAsync (если он должен выполнять действия в асинхронном режиме).

В данном случае в коде компонента в методе Invoke возвращается текущее время в виде простой строки.

Наследование класса ViewComponent

Второй способ создания компонента связан с наследованием от базового класса ViewComponent из пространства имен Microsoft.AspNetCore.Mvc. Так, перепишем предыдущий код компонента следующим образом:

using System;
using Microsoft.AspNetCore.Mvc;
namespace ViewComponentsApp.Components
{
    public class Timer : ViewComponent
    {
        public string Invoke()
        {
            return $"Текущее время: {DateTime.Now.ToString("hh:mm:ss")}";
        }
    }
}

Фактически здесь только было добавлено наследование, а в названии класса убран суффикс "ViewComponent". Остальной код остался прежним.

Применение атрибута ViewComponent

Третий способ представляет применение атрибута ViewComponent. Для его использования уберем наследование и добавим атрибут:

using System;
using Microsoft.AspNetCore.Mvc;
namespace ViewComponentsApp.Components
{
    [ViewComponent]
    public class Timer
    {
        public string Invoke()
        {
            return $"Текущее время: {DateTime.Now.ToString("hh:mm:ss")}";
        }
    }
}

Применение View Component

Теперь мы можем использовать компонент. При этом его использоваие не зависит от способа его определения. Есть два способа применения компонента в представлении.

Метод Component.InvokeAsync

По умолчанию у нас уже есть контроллер HomeController, а значит в папке Views есть каталог Home, в котором находится представление Index.cshtml. Добавим в него вызов определенного нами компонента:

@await Component.InvokeAsync("Timer")

В качестве параметра в метод InvokeAsync() передается название компонента. В нашем случае это "Timer". Пи этом не важно, какой из трех вышеописанных способов определения компонента мы используем. Если компонент определен как класс TimerViewComponent, то именем считается так часть названия класса, которая идет до суффикса ViewComponent, то есть "Timer". В осталных случаях используется имя класса.

В итоге при запуске приложения вместо кода компонента мы увидим его вывод - текущее время:

Tag-хелпер vc

Также мы можем встраивать комопонент с помощью тег-хелпера vc в формате

<vc:[имя_компонента]></vc:[имя_компонента]>

В нашем случае имя комопонента - "Timer", поэтому чтобы обратиться к компоненту в представлении, можно использовать следующую разметку

<vc:timer></vc:timer>

или так

<vc:timer />

Однако перед использованием тега нобходимо зарегистрировать наш компонент в качестве tag-хелпера. Для этого в файл _ViewImports.cshtml в папке Views добавим следующую директиву:

@addTagHelper *, [Название_сборки_проекта]

Название сборки проекта как правило совпадает с названием самого проекта. То есть в моем случае проект называется ViewComponents, поэтому я добавляю в файл _ViewImports.cshtml строку

@addTagHelper *, ViewComponentsApp