How to wrap a Syncfusion component in a ASP.NET Core ViewComponent to be called via Component.InvokeAsync method

[Rui Mendes]

Hello,

In my ASP.NET Core Razor Pages project I tend to create ViewComponents, which are then reusable in multiple Razor pages, either via AJAX or via Component.InvokeAsync methods.

I was trying to do the same with a Syncfusion component (Circular Gauge) - wrapping it up in a ViewComponent and calling it via Component.InvokeAsync  but the component does not render. It seems that the cause is that syncfusion js scripts are not being generated, as in the page source I can see that the ejs tag helpers from the ViewComponent are presented as they were defined and no js is generated.

To be noted that using the Syncfusion component directly on the same page, works perfectly.

The simple ViewComponent default.cshtml used for testing:

That said, woud you have a simple example or quick guidelines on how to achieve this?

.

 Edit: spelling

[Swetha Babu]

Hi Rui,

Thank you for contacting Syncfusion support.

We can achieve your requirement using the ASP.NET core with Razor UI library class. We need to add tag helper of the circular gauge in the razor class which is missing in your provided code snippet. Please find the  code snippet for tag helper below for your reference. 

  

Code Snippet: 

 @using DemoWebApp 

@namespace DemoWebApp.Pages

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@addTagHelper *, Syncfusion.EJ2

 

  

We have created a simple application to demonstrate the same and it can be downloaded from the below link.

https://www.syncfusion.com/downloads/support/forum/160988/ze/ViewComponent_EmbeddedViews-1047460333

In the above sample, we need to add the tag helper in the ViewImports.cshtml file in the ASP.NET application. Also, we need to add the same in "Message.cshtml" file in Razor class. We need to add the reference to the script file in the "Layout.cshtml" file. We have created the circular gauge by calling the <partial name="_Message"> to render the gauge from the "Message.cshtml" file from the Razor class library. 

  

Please let us know if the above sample meets your requirement. If not, please modify the above sample and share the same with us. It will be helpful for us to analyze further and assist you better.

Please let us know if you need any further assistance.

Regards,
Swetha Babu 

[Rui Mendes]

Thank you for your feedback.

The explanation and resources are perfect, and provide valuable insight on how to address my question/problem.

Best Regards,

Rui Mendes

P.S. the quality of your support (resources and at-length explanations) are in my opinion unmatched!

[Swetha Babu]

Hi Rui,

Thank you for your update.

Most Welcome! We have given a basic explanation for your requirement. We are happy to assist you if you need any other assistance.

Regards,
Swetha Babu