How To Get Third Party Blazor Components Working In Razor Pages?

Question

I'm working in a new ASP.NET Core 3.1 With Razor Pages application and I want to use third party 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 using 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. 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 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 loads everything except the third party component. I also tried the different rendering methods just in case that might fix it. But nothing seems to work.

Answer 1

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,

<script src="~/_framework/blazor.server.js" autostart="false"></script>

is NOT the same as

<script src="_framework/blazor.server.js" autostart="false"></script>

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.