Асинхронные операции в View Component

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

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

Для примера возьмем асинхронное считывание из файла. Для этого определим в проекте папку Files, а в нее добавим файл header.html с каким-нибудь простеньким кодом:

<h2>Изучаем View Component.</h2>
<h3>Асинхронный метод InvokeAsync</h3>

Далее добавим в проект новый компонент Header:

using Microsoft.AspNetCore.Mvc;
using System;
using System.Threading.Tasks;
using System.IO;
using Microsoft.AspNetCore.Mvc.ViewComponents;
using Microsoft.AspNetCore.Html;

namespace ViewComponentsApp.Components
{
    public class Header : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync()
        {
            string htmlContent = String.Empty;
            using (StreamReader reader = new StreamReader("Files/header.html"))
            {
                htmlContent = await reader.ReadToEndAsync();
            }
            return new HtmlContentViewComponentResult(new HtmlString(htmlContent));
        }
    }
}

Метод InvokeAsync помечается с помощью ключевого слова async и содержит выражение await - await reader.ReadToEndAsync(). Считанное содержимое затем возвращается в виде html-фрагмента через объект HtmlContentViewComponentResult.

Определим вызов компонента Header в представлении Index.cshtml:

@await Component.InvokeAsync("Header")

или так

<vc:header />

Запустим на выполнение и увидим вставку на веб-станицу кода из файла header.html:

При определении метода надо учитывать, что в компоненте должен быть только один метод, который называется Invoke или InvokeAsync. Если в дополнение к InvokeAsync мы определим синхронный метод Invoke, например:

public class Header : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync()
    {
         // содержимое метода
    }

    public string Invoke()
    {
        return "hi world!";
    }
}

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