return 来自 ViewComponent 的自定义 html

Question

在 ASP.NET 核心应用程序中，我想从 ViewComponent return 自定义 html。我可以 return 自定义文本，但是 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.
我如何直接 return 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)

您可以将模型更改为 class 而不是字符串，这样您就可以构造 ViewComponent 的输出，但关键部分是 Html.Raw() 方法来输出未编码的 html.

Answer 2

虽然我建议在大多数情况下使用视图（并将所有 HTML 放在视图中，而不是仅仅使用它来输出视图组件创建的 HTML），因为非常您可能需要考虑的简单组件：

视图组件上的Invoke()方法不需要returnIViewComponentResult，可以returnHtmlString.

例如：

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

Answer 3

如果您不想 return 一个视图，您可以 return HTML 这种没有视图的方式：

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

return 来自 ViewComponent 的自定义 html

return custom html from ViewComponent

c#

asp.net-core

asp.net-core-viewcomponent