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.

Image for post
Server Side Blazor service

In the same startup.cs file go ahead and add an endpoint for the Blazor SignalR hub.

Image for post
Blazor SignalR hub endpoint

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:

Image for post
Pages folder which will host the different Blazor Components

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:

Image for post
Blazor 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.

Image for post
Invoking a Blazor component from inside an MVC view

Note: There are threeRenderMode configurations that you can choose from. They basically differ in performance and how they work with Search Engines.

Image for post
Different Blazor component render modes

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.

Image for post
Static RenderMode

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:

Image for post
Server RenderMode

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:

Image for post
ServerPrerendered RenderMode

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:

Image for post
Make the Pages namespace accessible from all MVC views

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.

Image for post
Different namespaces that bring in the web specific parts of Blazor

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.

Premier Consultant @Microsoft. I am a Web Enthusiast. Oh and Public Speaking is kinda my thing. #Microsoft, #emp, #Msftemployee,

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store