Компоненты представлений в ASP.NET Core MVC. Определение компонента

Компоненты представлений (View Components) в ASP.NET Core MVC — это ещё одна функциональная особенность платформы. Формально, компонент представления представляющие собой класс C# (обычно POCO), связанный с представлением и выполняющий определенные задачи в представлении. Например, мы можем выделить в приложении ASP.NET Core MVC какие-либо части — облако тегов, меню, различного рода виджеты, которые в коде могут быть представлены отдельными компонентами представлений. Компоненты представлений очень похожи на частичные представления, о которых мы уже знаем, но, при этом, обладают рядом особенностей, с которыми мы и познакомимся в этой части.

Способы определения компонентов представлений

Существует три способа определения компонентов представлений:

Создание класса производного от ViewComponent

Например, мы можем создать такой компонент:

using Microsoft.AspNetCore.Mvc;

namespace AspNetMvcComponents.Views.Home.Components
{
    public class DayInfo: ViewComponent
    {
        public string Invoke()
        {
            return $"{DateTime.Now:dddd}";
        }
    }
}

Всё, что делает такой компонент — выводит название дня недели.

Использование атрибута [ViewComponent]

Второй способ — применение к классу компонента атрибута [ViewComponent]:

using Microsoft.AspNetCore.Mvc;

namespace AspNetMvcComponents.Views.Home.Components
{
    [ViewComponent]
    public class DayInfo
    {
        public string Invoke()
        {
            return $"{DateTime.Now:dddd}";
        }
    }
}

Использование суффикса ViewComponent в названии класса

По аналогии с tag-хэлперами и контроллерами, мы можем добавить к названию класса суффикс ViewComponent и такой класс, в соответствии с соглашениями по умолчанию, будет использоваться как компонент:

namespace AspNetMvcComponents.Views.Home.Components
{
    public class DayInfoViewComponent
    {
        public string Invoke()
        {
            return $"{DateTime.Now:dddd}";
        }
    }
}

В любом случае, логика вывода компонента должна всегда содержаться в одном из двух методов: Invoke() или InvokeAsync(). Как следует из названия, второй метод используется для асинхронной работы компонента. Использования обоих методов внутри одного класса компонента недопустимо и приводит к ошибке приложеия следующего вида:

Использование компонента представления в проекте ASP.NET Core MVC

Вызов Component.InvokeAsync()

Создадим новый проект ASP.NET Core MVC, добавим в проект новую папку Components и размесим в этой папке компонент, представленный выше. В итоге, у вас должна получится следующая структура:

Теперь воспользуемся представлением Views/Home/Index.cshtml и вызовем в нём наш компонент следующим образом:

@{
    ViewData["Title"] = "Home Page";
}

@await Component.InvokeAsync("DayInfo")

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

по аналогии с частичными представлениями, мы используем разметку Razor для вызова нашего компонента:

@await Component.InvokeAsync("DayInfo")

передав в качестве параметра название компонента без суффикса ViewComponent, если таковой использовался в названии. Вообще, метод Component.InvokeAsync() может принимать два параметра — в первом название компонента, а во втором — анонимный тип с параметрами самого компонента, но так как наш компонент не использует пока никаких настроек, то второй параметр мы н использовали.

Теперь можно запустить приложение и увидеть результат работы компонента:

второй способ использования компонента в представлении — использование специального tag-хэлпера <vc:></vc:>.

Использование tag-хэлпера vc

Этот tag-хэлпер имеет следующим формат:

<vc:[название_компонента]
  parameter1="parameter1 value"
  parameter2="parameter2 value">
</vc:[название_компонента]>

Чтобы воспользоваться таким способом вызова компонента, наш компонент должен быть зарегистрирован в проекте как tag-хэлпер, то есть мы должны добавить в представление или в файл _ViewImports.cshtml следующую директиву Razor:

@addTagHelper *, AspNetMvcComponents

где AspNetMvcComponents — название нашего проекта (сборки). Второй момент, который следует учитывать, касается наименования компонента внутри tag-хэлпера. Если название компонента содержит более одной заглавной буквы, то для его названия внутри tag-хэлпера следует использовать т.н. kebab-case То есть, название нашего компонента DayInfo превращается в day-info, а, например, MySuperComponent — в my-super-component и т.д. И того, используя tag-хэлпер, мы можем вызвать наш компонент следующим образом:

@addTagHelper *, AspNetMvcComponents

@{
    ViewData["Title"] = "Home Page";
}

<vc:day-info></vc:day-info>

и получить точно такой же результат, как и на рисунке выше — вывод названия дня недели на главной странице приложения.

Итого

Компоненты представления (View Components) представляют собой обычные классы C#, которые связаны с представлением и используются для вывода какой-либо информации пользователям. По своим возможностям, компоненты представлений похожи на частичные представления. Вызов компонентов представлений может осуществляться как с использованием метода Component.InvokeAsync(), так и с использованием специального tag-хэлпера vc.