Question

在ASP.NET Core应用程序中，我想从ViewComponent返回自定义html。我可以返回自定义文本，但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 。
如何直接从ViewComponent返回HTML而不是文本？

Answer 1

如果您不想返回视图，可以在没有视图的情况下以这种方式返回HTML：

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

Answer 2

您的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的Html.Raw()方法。

Answer 3

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

视图组件上的Invoke()方法不需要返回IViewComponentResult，它可以返回HtmlString。

例如：

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

从ViewComponent返回自定义html

3 个答案: