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

Компоненты представлений в ASP.NET Core MVC могут использовать в своей работе различные данные, получаемые из вне. Это могут быть какие-то параметры в виде строк, чисел и т.д., объекты, содержащие наборы параметров или зависимости. В этой части мы рассмотрим несколько возможных вариантов передачи данных в компоненты представлений.

Передача зависимостей в компонент представлений

Для передачи зависимостей в компонент представлений такой компонент должен иметь конструктор с параметрами, например, передадим в компонент представлений сервис для логирования:

namespace AspNetMvcComponents.Components
{
    public class DayInfoViewComponent
    {
        readonly ILogger<DayInfoViewComponent> _logger;
        
        public DayInfoViewComponent(ILogger<DayInfoViewComponent> logger)
        {
            _logger = logger;
        }
        public string Invoke()
        {
            _logger.LogInformation($"Вызван метод Invoke компонента DayInfo");
            return $"{DateTime.Now:dddd}";
        }
    }
}

В результате, после вызова компонента представления, например, на главной странице приложения, мы увидим следующее:

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

Передача параметров в компоненты представлений

Простые параметры

Чтобы передать параметры в компонент представления, метод Invoke()/InvokeAsync() должен содержать эти параметры. Например,

public class DayInfoViewComponent
{
    readonly ILogger<DayInfoViewComponent> _logger;
    
    public DayInfoViewComponent(ILogger<DayInfoViewComponent> logger)
    {
        _logger = logger;
    }
    public string Invoke(bool fullName = true)
    {
        _logger.LogInformation($"Вызван метод Invoke компонента DayInfo");
        if (fullName)
        {
            return $"{DateTime.Now:dddd}";
        }
        else
        {
            return $"{DateTime.Now:ddd}";
        }
        
    }
}

здесь наш компонент принимает в качестве параметра значение fullName, указывающее на то какой формат вывода названия дня недели использовать. По умолчанию этот параметр будет иметь значение true. Теперь мы можем использовать этот параметр при вызове компонента так:

<vc:day-info 
   full-name="false">
</vc:day-info>

(обратите внимание на то, как записан параметр — в kebab-case). Или, если используется директива Razor, то так:

@await Component.InvokeAsync("DayInfo", new{ fullName = false })

Если сделать такой вызов:

@await Component.InvokeAsync("DayInfo", new{ fullName=true})

<vc:day-info full-name="false"></vc:day-info>

Результат будет следующий:

Объекты в качестве параметров компонента

Таже мы можем передавать в компоненты представлений целые объекты, содержащие необходимую для работы компонента информацию. Например,

namespace AspNetMvcComponents.Components
{
    public class DayInfoOptions
    {
        public string StartString { get; set; } = string.Empty;
        public bool FullName {  get; set; } = true;
    }

    public class DayInfoViewComponent
    {
        readonly ILogger<DayInfoViewComponent> _logger;
        
        public DayInfoViewComponent(ILogger<DayInfoViewComponent> logger)
        {
            _logger = logger;
        }
        public string Invoke(DayInfoOptions options)
        {
            _logger.LogInformation($"Вызван метод Invoke компонента DayInfo");
            
            string content = options?.StartString ?? string.Empty;
            if ((options != null)&&(options.FullName == false))
            {
                return $"{content} {DateTime.Now:ddd}";
            }
            else
            {
                return $"{content} {DateTime.Now:dddd}";
            }
            
        }
    }
}

В качестве параметра мы передаем объект класса DayInfoOptions, содержащий строку, которая будет выводится перед днем недели и флаг, отвечающий за формат вывода названия дня недели. Воспользуемся компонентом, используя tag-хэлпер vc следующим образом:

<vc:day-info 
   options="@(new DayInfoOptions(){StartString="День недели:", FullName=true})">
</vc:day-info>

результат работы компонента:

Итого

Компоненты представлений могут принимать различные данные, необходимые для работы. Мы можем передавать в компоненты представлений зависимости (сервисы), простые типы данных или объекты в качестве параметров компонента.