return custom html from ViewComponent
Asked Answered
U

3

7

In an ASP.NET Core app I want to return custom html from a ViewComponent. I can return custom text, but the html will be encoded instead of being embedded:

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

I use it in my .cshtml page:

    @await Component.InvokeAsync("BannerView")

On the page this will Show as <strong>some custom html</strong> instead of some custom html.
How do I directly return HTML instead of text from the ViewComponent?

Unavoidable answered 1/2, 2017 at 14:40 Comment(0)
C
5

Your ViewComponent could have its own view as well and you can render the html there. The solution would be the following:

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

Add the following to your Views folder: Views\Shared\Components\BannerViewComponent\Index.cshtml and put the following in the ViewComponent's view:

@model string
@Html.Raw(Model)

You can change the model to be a class instead of just a string so that you can structure the ViewComponent's output, but the key part is the Html.Raw() method to output unencoded html.

Chauffer answered 1/2, 2017 at 19:27 Comment(0)
S
10

If you don't want to return a view you can return HTML this way without a view:

return new HtmlContentViewComponentResult(new HtmlString("Not bold - <b>bold</b>"));
Spillman answered 15/9, 2017 at 15:2 Comment(0)
C
5

Your ViewComponent could have its own view as well and you can render the html there. The solution would be the following:

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

Add the following to your Views folder: Views\Shared\Components\BannerViewComponent\Index.cshtml and put the following in the ViewComponent's view:

@model string
@Html.Raw(Model)

You can change the model to be a class instead of just a string so that you can structure the ViewComponent's output, but the key part is the Html.Raw() method to output unencoded html.

Chauffer answered 1/2, 2017 at 19:27 Comment(0)
B
4

Although I would recommend using a view in most cases (and putting all the HTML in the view rather than using it just to output the HTML created by the view component), for very simple components you may want to consider this:

The Invoke() method on the view component does not need to return IViewComponentResult, it can return HtmlString.

For example:

public HtmlString Invoke()
{
    return new HtmlString(@"<b>Hello World</b>");
}
Balky answered 20/7, 2017 at 9:7 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.