Генерация контента в View Component

В прошлых темах все классы компонентов представлений в качестве выходного результата использовали строку, то есть объект string. Однако такой тип для генерации результата не всегда является удобным, и обычно в качестве результата в View Component используется объект интерфейса IViewComponentResult. Имеется три встроенных класса, которые реализуют этот интерфейс:

• ViewComponentResult: используется для генерации представления Razor с возможностью передачи модели. Для создания этого объекта может применяться метод View() класса ViewComponent

• ContentViewComponentResult: применяется для отправки текстового контента. Для создания объекта используется метод Content()

• HtmlContentViewComponentResult: представляет фрагмент кода HTML, который инкорпорируется в веб-станицу

ContentViewComponentResult

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

В предыдущих темах метод Invoke компонента возвращал строку - объект string. По сути же возвращался тот же объект ContentViewComponentResult, так как фреймворк MVC автоматически преобразовывает строку в объект типа ContentViewComponentResult. Например:

using Microsoft.AspNetCore.Mvc;

namespace MvcApp.Components
{
    public class Timer : ViewComponent
    {
        public IViewComponentResult Invoke()
        {
            string time = $"Текущее время: {DateTime.Now.ToString("HH:mm:ss")}";
            return Content(time);
        }
    }
}

Стоит отметить, что в подобном случае необходимо наследовать класс компонента от ViewComponent, иначе мы не сможем воспользоваться методом Content().

Если эта форма определения компонента не является предпочтительной, то можно явным образом создать объект ContentViewComponentResult:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ViewComponents;

namespace MvcApp.Components
{
	[ViewComponent]
    public class Timer
    {
        public IViewComponentResult Invoke()
        {
            string time = $"Текущее время: {DateTime.Now.ToString("HH:mm:ss")}";
            return new ContentViewComponentResult(time);
        }
    }
}

При вызове компонента:

<div>
    @await Component.InvokeAsync("Timer")
</div>
<div>
    <vc:timer />
</div>

мы бы увидели в браузере ту же самую строку:

HTML-фрагменты

Для генерации html-фрагментов, которые вставляются в основное представление, применяется класс HtmlContentViewComponentResult. Для создания html-содержимого в конструктор этого класса передается объект HtmlString с кодом html:

using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ViewComponents;

namespace MvcApp.Components
{
    [ViewComponent]
    public class Timer
    {
        public IViewComponentResult Invoke()
        {
            return new HtmlContentViewComponentResult(
                new HtmlString($"<p>Текущее время:<b>{DateTime.Now.ToString("HH:mm:ss")}</b></p>")
            );
        }
    }
}

В отличие от ContentViewComponentResult все html-теги будут должным образом интерпретироваться:

Данный способ удобен, когда необходимо возвратить какой-то небольшой кусочек кода html для вставки на веб-страницу. Если же надо сгенерировать довольно много разметки html, то в этом случае лучше использовать ViewComponentResult, который будет рассмотрен в следующей теме.