Integrating Blazor Components into Existing Asp.Net Core MVC Applications
Blazor offers many benefits to .Net developers ranging from providing a Single Page Application (SPA) framework option, to features like two-way binding and offline support just to name a few. But one of the main benefits that has been resonating with a lot of .Net developers is the fact that it’s component based. Whereas its highly recommended to start with a Blazor application whenever possible, it’s also plausible to consider integrating Blazor components into existing ASP.Net Core MVC applications(or Razor pages for that matter). The aforementioned scenario comes up in one of two cases:
- You have a huge investment in an existing ASP.Net Core MVC application and you are not ready to migrate to Blazor but would like to make use of Blazor components
- You would like to migrate to Blazor eventually but you are planning on gradually getting there
The solution is the same in both cases. It basically involves adding Blazor to your ASP.Net Core middleware. Now there are several posts out there that address this topic but most of them are either outdated or incomplete. Here is my attempt to provide a complete picture using the latest version of .Net Core (version 3.1 at the time of writing this post). The source code can be found here.
The first step towards this integration involves adding support for server side Blazor by adding it to your project’s dependency injection container. This is achieved by adding the Server Side Blazor service inside the Startup.cs file as shown below.
In the same startup.cs file go ahead and add an endpoint for the Blazor SignalR hub.
At this point you are almost ready to to add your Blazor component to your project. Blazor components must go into a Pages subfolder under the Components folder. This folder doesn’t exist under the MVC template . Go ahead and create that folder and sub-folder. Your project structure should now look like this:
Now you can start adding the different Blazor components just like you would do under a regular Blazor project. Here is a simple person component:
Now, within your MVC View, you can invoke your component using the the Component Tag Helper as shown below. Notice that the type attribute specifies the Blazor component and the param attribute specifies the parameter name inside the Blazor component followed by the value.
Note: Prior to .Net Core version 3.1 the syntax used an HTML helper and the server side rendering did not allow passing parameters.
Note: There are three
RenderModeconfigurations that you can choose from. They basically differ in performance and how they work with Search Engines.
The table above shows the definition of the three render modes from the official documentation but lets decipher them a little bit more.
Static: The whole rendering process happens in one call and the component will be non-interactive. As you can see below, the markup for the Blazor component was rendered on the initial request but clicking on the “Change Name” doesn’t do anything.
Server: The component won’t be rendered on the initial request, but instead Blazor will render it using a WebSocket connection. The component will be interactive, but the search engine won’t see the component markup at the time of indexing the page. This is demonstrated below:
ServerPrerendered: This is considered a hybrid mode. It basically provides you with the initial markup of the component while preserving an interactive component by providing a Blazor WebSocket for further interactions. This is demonstrated below:
In addition, notice that I had to include blazor.server.js file. Please note that the order matters here. If you include the javascript file before the component is rendered then the events won’t trigger inside the Blazor component. I also had to add the pages namespace to the _ViewImports.cshtml file to make the namespace accessible from different MVC views as shown here:
Finally, I realized that I also had to add the _Imports.razor file to the root of the project. This file brings in the web specific parts of Blazor. Its typically included by default inside a new Blazor project but doesn’t exist in the default ASP.Net MVC template.
Now that we have successfully integrated a Blazor component inside an ASP.Net Core MVC application lets answer some other questions that I typically get from teams embarking on this journey. Can we use Blazor WebAssembly instead of server side Blazor? The answer is yes. Blazor WebAssembly doesn’t have any specific server dependency. It’s possible to use Blazor WebAssembly with any server platform you want that can serve up some static files and handle SPA style routing for deep links. Blazor provides integration between Blazor WebAssembly and ASP.NET Core to make this easy to setup. The second question that I get a lot is can Blazor WebAssembly be used with non ASP.Net Core MVC applications? The answer again is yes, but the recommended setup is to use Blazor with ASP.NET Core as this gives you the most flexible and feature rich setup. For example, if you want to do server prerendering of the Blazor WebAssembly app, that’s only supported with ASP.NET Core.
There you have it, you now know all your options next time you think about integrating a Blazor component within an ASP.Net Core MVC application.
