Using Blazor in Your Existing ASP.Net Core MVC Applications
By: Simon Goodwin
Tags: Software Engineering, Blazor, Csharp, Development, Software Development

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.

Add service for Server Side Blazor

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.

Add mapping for Signal R Hub

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.

New Component folder to contain the Blazor Components

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:

Existing code in Index.cshtml view

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:

The new Blazor component called MovieList.razor

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.

The _Imports.razor file containing the using statements for all Blazor components

Integrating our Blazor component

Now, let’s update our original Index view to make use of the MovieList component.

The modified Index.cshtml page with integrated 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.

Adding using statements to _ViewImports.cshtml

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.

Adding blazor.server.js to _Layout

Viewing the final result

Now let’s run the application and see if it still works.

MvcMovie application with a table rendered using Blazor

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.