Using Blazor in Your Existing ASP.Net Core MVC Applications
During lock-down; whilst working from home, I had the opportunity to investigate Server Side Blazor; Microsoft’s new SPA framework that allows developers to use C# instead of JavaScript to build interactive web UIs. I was very impressed with its component-based approach and simplicity, especially if you are already an experienced C# developer.
My main concern was the daunting task of redeveloping a multitude of existing ASP.Net Core applications to make use of Blazor. I started to investigate whether it is possible to integrate Blazor into existing ASP.Net Core MVC applications; so that the transition could be done gradually with a component at a time rather than in one hit. If you want to find out more about ASP.Net Core MVC applications, take a look at this article from Microsoft here.
After conducting some research, it appeared reasonably straight forward to achieve, therefore I thought it would be useful to demonstrate the steps required in this article. I decided to use the example MvcMovie ASP.Net Core tutorial available from Microsoft to carry out the integration, with a view to replacing the table that displays the movies with a Blazor component. Before we begin, I want to point out that if you haven’t used Blazor before, then you might want to head over to Microsoft’s Blazor site in order to understand the concepts around Blazor.
So, let’s dive in.
Visual Studio Version
For this demo I will be using Visual Studio 2019 v 16.7.5 and ASP.Net Core 3.1 which is the minimum version required for Blazor.
Download and open up the MvcMovie tutorial app from Microsoft.
The first thing we must do is configure the application to use the Server Side Blazor service. So, let’s go ahead and add in an additional line to the existing ConfigureServices section of the Startup.cs file.
Server Side Blazor executes its C# code on the server and uses SignalR to communicate with the browser, therefore we need to add an additional entry into the Configure method in the same Startup.cs file to enable the SignalR endpoint. To find out more about SignalR take a look here.
Before we can add our component, we need to create a new folder to contain our Blazor components. There is no convention for naming this folder, however I am going to call it Components as that correctly conveys its usage.
Creating our Blazor component
Okay, now all the setup is in place we can start to re-write the MVC Index view for movies to use our Blazor component. The Index view currently looks like this:
Let’s start by right clicking on the Components folder we created earlier and selecting Add and then choose Razor Component. In the dialog box that opens change the file name to MovieList.razor and press Add. Once the component has been created replace the contents with the following Blazor code:
You will see that this component closely resembles the table in the original Index view. Notice the @code section, this is one of the options for writing your C# code in Blazor and I am using this technique here for ease of displaying the code in this post. However, when writing production code, I use a separate code-behind .cs file that encapsulates the C# logic from the view.
In the C# code, the Movies parameter will contain a collection of movies which will be passed into the component from the Index view. The foreach statement then iterates over the collection and creates a new row in the table for each movie. I have also added a couple of buttons PreviousMovie and NextMovie purely to demonstrate that the application responds to events without any JavaScript being written. Each time a button is clicked the movieIndex is changed and the current title field is updated to match the current row in the table by using the Skip(movieIndex) command on the Movies list.
In order to fix the reference errors in our component; we could add some using statements to the MovieList.razor file, however if we add the using statements to a file called _Imports instead, then all our Blazor components will be able to reference them. Let’s create our _Imports.razor file in the root of the project and add the following using statements. These references include our own MvcMovie namespaces as well as the most common framework references used by Blazor components.
Integrating our Blazor component
Now, let’s update our original Index view to make use of the MovieList component.
As you can see, the component element is referencing our MovieList Blazor component and specifying a render-Mode of ServerPrerendered.
The render modes available according to Microsoft are:
Server: Renders a marker for a Blazor server-side application. This doesn’t include any output from the component. When the user-agent starts, it uses this marker to bootstrap a Blazor application.
ServerPrerendered: Renders the component into static HTML and includes a marker for a Blazor server-side application. When the user-agent starts, it uses this marker to bootstrap a Blazor application.
Static: Renders the component into static HTML.
So, what do these terms mean in reality? Well, if you want your page to be dynamic and found by search engines; including our rendered Blazor table then you shouldn’t use Server. You want to use ServerPrerendered instead, as this will effectively render a static version of the Blazor table component to begin with and then wire it up to the Blazor server application afterwards. This means it will be able to react to events e.g. clicking the Next Movie button on the page. If you choose Static, then the page will not respond to any events.
We are also passing in a parameter containing the Model to our Blazor component. If you recall from earlier, we specified a parameter in our component called Movies and the contents of our Movie list will be passed to our component via this parameter.
Now at this point you will see some more unresolved references for MvcMovie.Models and MvcMovie.Components, that’s because we need to add some using statements. Now we could add these to the Razor page, but I have added them to the _ViewImports file instead. Adding the references to _ViewImports allows any Blazor components to be visible to all the ASP.Net Core Razor pages in our application. Okay, go ahead and add the references so that your _ViewImports file looks like mine below.
After a quick rebuild, your Index.cshtml view should now look like the one above with all references resolved. The final step is to add the script tag for the blazor.server.js file which you could do directly in the Index page, but I prefer to add it to the _Layout file which contains all the script tags in one place.
Viewing the final result
Now let’s run the application and see if it still works.
Summary
There you have it; the ASP.Net Core app has loaded and when we click on the MovieApp link, we see a Movie table rendered using the Blazor component we built.
Try out the Previous Movie and Next Movie buttons to see the Current Movie Title change, without the use of JavaScript.
As you can see it’s quite straight forward to include Blazor components in your ASP.Net Core applications, once the initial boilerplate code has been created, adding further components should be relatively simple.
Ready to take your career to the next level? Check out our open roles here and consider joining the Microsoft Team at Capgemini.
