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

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

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

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

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

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

ContentViewComponentResult

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

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

using System;
using Microsoft.AspNetCore.Mvc;

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

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

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

using System;
using Microsoft.AspNetCore.Mvc;

namespace ViewComponentsApp.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 System;
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ViewComponents;

namespace ViewComponentsApp.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, то в этом случае лучше использовать ViewViewComponentResult, который будет рассмотрен в следующей теме.