Can't Get Syncfusion Blazor Components Working In Razor Pages?

[Ryan Turcotte]

I'm working in a new ASP.NET Core 3.1 With Razor Pages application (as opposed to the pure Blazor app template default) and I want to use Syncfusion Blazor components in it but I'm having trouble getting it to work. I've followed the instructions on numerous sites about how to enable Blazor components in an MVC based application that uses Razor pages (changing the Configure and ConfigureServices methods in startup.cs, adding the endpoint, including the .js for Blazor, etc.).

If I write a component myself and use that it seems to work just fine so it appears that Blazor is indeed working as expected. But I tried using Syncfusion's Blazor library and it just refuses to work. I've tried things in the Razor page like:

@(await Html.RenderComponentAsync<Syncfusion.EJ2.Blazor.Calendars.EjsDateTimePicker>(RenderMode.ServerPrerendered))

which works just fine for my manually created Blazor component but not the third party EjsDateTimePicker component. I've also made sure to include the @using references that are needed and VS finds everything, as well as including the JS references to ej2.min.js and ej2.interop.min.js in my layout file.

I also tried including the third party component into my manually created component since Blazor allows for that and VS recognizes the component/tag but still refuses to render it. In that case, when I call my own component like:

<CustomRazorTest>@(await Html.RenderComponentAsync<TestProj.Components.Pages.CustomRazorTest>(RenderMode.ServerPrerendered))CustomRazorTest>

it renders everything except the Syncfusion EjsDateTimePickercomponent. I also tried the different rendering methods just in case that might fix it. But nothing seems to work.

[Saranya Murugasamy]

Hi Ryan, 

Greetings from Syncfusion. 

We have checked the customer query in our end and we need further details to validate the customer query. Can you please share the below details for us? It will be helpful for us to focus on specific area and assist you at the earliest.  

              1. Please share your application 

              2. Please let us know the blog which is referred for creating the sample. 

Regards, 

Saranya M 

[Ryan Turcotte]

I used the instructions on the following pages to help enable Razor components in an ASP.NET Core 3.1 project with Razor pages.  The changes are relatively straightforward and were only a few lines of code to get my own .razor components to work.  I'm not sure what's preventing third party components from working.

https://mikaelkoskinen.net/post/combining-razor-blazor-pages-single-asp-net-core-3-application

https://fizzylogic.nl/2019/08/18/integrating-blazor-in-an-existing-asp-net-core-application/

https://visualstudiomagazine.com/articles/2019/05/01/integrating-blazor-aspnet-core.aspx?m=1

https://chrissainty.com/using-blazor-components-in-an-existing-mvc-application/

https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#integrate-components-into-razor-pages-and-mvc-apps

I can't really share the entire project.  It's a big large and has customized business logic in it already, along with API keys and other sensitive information.

[Ryan Turcotte]

I have a bit more information that may help.  I created a brand new Core 3.1 with Razor pages project and made the changes to enable blazor and razor components.  It worked a lot better but not fully.  The components show up as expected in the browser but I get runtime errors related to events.  For example, when using Syncfusions test code for a toggle button, the runtime error is related to the onclick event not being recognized as an html property.  However, this works fine in the default Blazor app template from Visual Studio.

Hovering over that part of the code in the Blazor app project shows it to be identified as type:

Microsoft.AspNetCore.Components.EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs>

which is correct and therefore the Blazor app works.  However the same code in Razor pages after making the project adjustments doesn't get recognized in the same way.  It doesn't show anything and the @onclick text is red instead of purple and therefore treated differently during runtime.  It doesn't see it as an event.

I'm still not quite sure why in my main project I can't even seem to get the components to display at all.  But it seems to be something different in my main project as well as something missing in the test Razor pages project so there seems to be multiple issues and it's not quite as straightforward as those articles suggest.

[Sridurgha Uthayakumaran]

Hi Ryan, 

 

Thanks for your update. 

 

We have followed the below mentioned blog and could render both Syncfusion ASP.Net Core and Blazor Components in ASP.Net Core 3.1 project. 

 

Blog: https://mikaelkoskinen.net/post/combining-razor-blazor-pages-single-asp-net-core-3-application  

 

Kindly follow the steps mentioned in the above blog for providing Blazor support in ASP.Net Core project. Next, follow the below steps for rendering Blazor component in the same application. 

 

• Install the Syncfusion.EJ2.Blazor Nuget package in your application by right clicking on the project and select Manage Nuget Packages.

 

Note: Ensure to check Include Prerelease check box before installation of Syncfusion.EJ2.Blazor Nuget package. 

 

• Search for Syncfusion.EJ2.Blazor package and install them.

 

• Open _Imports.razor file and import Syncfusion.EJ2.Blazor.

 

 

@using Syncfusion.EJ2.Blazor 

@using Syncfusion.EJ2.Blazor.Calendars 

 

 

• Add the script and style files in Pages/Shared/_Layout.cshtml file.

 

 

<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.3.29/material.css" rel="stylesheet" /> 

<script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js"></script> 

<script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ejs.interop.min.js"></script> 

 

 

• Add the Syncfusion Blazor DatePicker component in Pages/Counter.razor file

 

 

<EjsDatePicker Placeholder='Choose a Date'></EjsDatePicker> 

 

 

We would like to let you know that in the application created we have also included toggle button and validated on the reported query and found on hovering the onclick event in Syncfusion toggle button (in ASP.Net Core project), it displays the correct type. Kindly refer the below screenshot for your reference. 

 

 

 

We have created the sample with the following configurations. Please refer the same from the below table. 

 

Visual Studio Version	Version 16.4.0 Preview 6.0
Syncfusion Blazor Nuget version	17.3.0.29-beta
Syncfusion Asp.Net Core Nuget version	17.3.0.31
.NET Core version	.NET Core 3.1
.NET Core SDK version	.NET Core 3.1 Preview 3

 

However, we have created a sample for your reference and the same can be referred from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/149667/ze/CORE-W~11371871511  

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Sridurgha U 

 

[Ryan Turcotte]

I was able to get it working.  There were several slight changes that had to be made to my project and some of them I'm not entirely sure why.

For anyone else who may be having issues, here's some of the issues I had to fix.

1.  For whatever reason, ~/_framework/blazor.server.js is NOT the same as _framework/blazor.server.js.  My project refused to work without the ~/ even though examples on MSFT's own pages don't use that.

2.  After proper declaration of blazor.server.js, I needed the following code to get events working correctly or else things like button clicks wouldn't register.  It must be placed AFTER the blazor.server.js above:

<script>

  Blazor.start({

    configureSignalR: function (builder) {

      builder.withUrl('/_blazor');

    }

  });

</script>

3.  I had some references to the MVC .js packages for Syncfusion because once I had an issue with the Blazor components I tried the MVC tools and I had left those references in.  They were apparently causing a conflict and unexpected behavior.

I think there was one or two more things that also needed adjustment, but I am forgetting them right now.  I will update my response if I remember anything else.

[Saranya Murugasamy]

Hi Ryan, 

Thanks for your suggestion. We are happy to hear that your issue has been resolved. 

Regards, 

Saranya M