Вернуть пользовательский HTML из ViewComponent

Question

В приложении ASP.NET Core я хочу вернуть пользовательский HTML из ViewComponent. Я могу вернуть пользовательский текст, но HTML будет закодирован, а не встроен:

public class BannerViewComponent : ViewComponent
{
  public async Task<IViewComponentResult> InvokeAsync(string param1, int param2)
  {
    return Content("<strong>some custom html</strong>");
  }
}

Я использую это на своей странице.cshtml:

    @await Component.InvokeAsync("BannerView")

На странице это покажет как <strong>some custom html</strong> вместо некоторых пользовательских HTML.
Как мне напрямую вернуть HTML вместо текста из ViewComponent?

Answer 1

Ваш ViewComponent также может иметь свой собственный вид, и вы можете отобразить HTML там. Решение будет следующим:

public class BannerViewComponent : ViewComponent
{
  public async Task<IViewComponentResult> InvokeAsync(string param1, int param2)
  {
    string model = "<strong>some custom html</strong>";
    return View("Index", model);
  }
}

Добавьте следующее в вашу папку Views: Views\Shared\Components\BannerViewComponent\Index.cshtml и поместите следующее в представление ViewComponent:

@model string
@Html.Raw(Model)

Вы можете изменить модель на класс, а не просто на строку, чтобы можно было структурировать вывод ViewComponent, но ключевой частью является Html.Raw() метод для вывода незашифрованного HTML.

Answer 2

Если вы не хотите возвращать представление, вы можете вернуть HTML без представления:

return new HtmlContentViewComponentResult(new HtmlString("Not bold - <b>bold</b>"));

Answer 3

Хотя я рекомендовал бы использовать представление в большинстве случаев (и помещать весь HTML в представление вместо того, чтобы использовать его просто для вывода HTML, созданного компонентом представления), для очень простых компонентов вы можете рассмотреть это:

Invoke() метод на компоненте представления не должен возвращаться IViewComponentResultможет вернуться HtmlString,

Например:

public HtmlString Invoke()
{
    return new HtmlString(@"<b>Hello World</b>");
}