Using Telerik UI for Blazor in ASP.NET Web Applications

Environment

Product

UI for Blazor

Description

How can I modernize my ASP.NET Core web application by adding Blazor components in it, and eventually migrate the project to Blazor?

Considerations

You can use an ASP.NET Core web application to render Blazor components by following the requirements, considerations, and steps below:

1. Add Blazor to the project. This includes the client-side assets, the service, and the SignalR hub. In the sample project linked below, these are added to the layout so that all pages can use them. Make sure you don't add them twice on a certain page.
2. Add the Telerik components as usual. Add the TelerikRootComponent around the contents of every Blazor component. Otherwise, it is not possible to render it in a shared location like in an actual Blazor app.
3. Use the Blazor components according to the current framework approach by using the <component type="typeof(MyComponent)" render-mode="ServerPrerendered" param-SomeParameter="@ObjectToPass" /> approach. In previous versions, the recommended approach was by using Razor components like partial views through the Html.RenderComponentAsync() helper, where you has to pass their parameters as fields in an anonymous model object.
4. If you wish to use Alert, Confirm, or Prompt Dialogs, you need to do this in a nested Razor component of the TelerikRootComponent. Otherwise, if you try to define the DialogFactory CascadingParameter in the same Razor component that includes the TelerikRootComponent, then the cascading parameter will be null.

5. If you are already using Kendo UI components in such a project, make sure to only use the Telerik UI for Blazor Themes. They match the SASS-based themes from Kendo UI and you must only have one theme referenced.

   It is recommended that you use the latest Kendo UI and Telerik UI for Blazor versions. If not possible, try using Kendo UI and Telerik UI for Blazor versions that are close together, so that there are as little differences in their theming as possible.

To see the full implementation of the suggested approach, go to the Razor components GitHub repo containing the sample project with comments and also other examples.