Blazor is awesome.  If you don’t know what it is, you can check it out here but to summarize, it’s a framework that allows .net code to run in your browser using the power of Web Assembly.

I’ve found a lot of tutorials using the official blazor templates but only hints on how exactly using Blazor when you already have an exisiting mvc app.  This is why I wrote this piece.  There are a few steps to accomplish but it’s worth the hassle, believe me !

1. Prerequesites

To start working with Blazor you need the following :

• Visual studio 2019 (Microsoft currently recommends to use the 2019 preview to work with .net core 3 but it’s not necessary as you can allow the preview framework in the release version of Visual Studio 2019).
• .Net core 3 (you can download it here).  If you work with the release version of Visual Studio 2019 you need to allow the use of the preview framework (as .net core 3 is still in preview).
  To do so, I found this tutorial on the web but it wasn’t working with my Visual Studio 2019 professional edition.  The setting I was looking for is in Visual Studio Options > Environment > Preview Features > Use previews of the .net framework
  

2. Migrate your application to .net core 3

To do so, all I did was right click on the project name in solution explorer > properties > Applications > Target Framework

Now after you do this, there is a good chance that your solution won’t compile anymore because of incompatible versions of some nuget packages.  All you need to do is update the packages to a compatible version (note that many of them might still be in preview).

If you happen to encounter this error : “The project ‘project name’ must provide a value for Configuration“, you might check out tomRedox’s solution here on github (In short, just delete the Microsoft.Aspnetcore.Razor.Design package which isn’t needed anymore as it is now part of the .net core framework).

3. install blazor

Obviously you need to add the Blazor package in your solution.  To do so just open the package manager console and type this command :

install-package microsoft.aspnetcore.blazor

At the time of this writing, the latest stable version is 0.7.0 but you can use the preview versions as well.

4. Edit the startup.cs and the _layout.cshtml file

we need to do some edition in the startup.cs file to enable Blazor.

• First we need to configure MVC so that the application can launch without any issue.  Find in the ConfigureServices method where this line is :

  services.AddMvc();

  And edit it as such :

  services.AddMvc(options => options.EnableEndpointRouting = false);

• After you edited this line, just add this

  services.AddServerSideBlazor();

  This effectively tells the mvc app that we will use Blazor.

• Now in the Configure method, find the line where mvc is configured as something like this :

  app.UseMvc(routes =>
  {
  routes.MapRoute(
  name: "default",
  template: "{controller=Home}/{action=Index}/{id?}");
  });

  and change it into :

  app.UseRouting();
  app.UseMvc();
  app.UseEndpoints(endpoints =>
  {
  endpoints.MapControllerRoute(
  name: "default",
  pattern: "{controller=Home}/{action=Index}/{id?}");
  endpoints.MapBlazorHub();
  });

• In the _layout.cshtml we need to add this

  <script src="_framework/blazor.server.js"></script>

  Like so :
  

5. Create a blazor component:

To include Blazor inside an exisiting page, you need to create a Blazor component, which is basically a razor page with the extension .razor instead of .cshtml.  You can configure your project to treat the cshtml files as Blazor components but I wouldn’t advise it as you still need your existing code to be running.

To mark a simple distinction between your existing pages and your Blazor components, it’s advisable to put them into a Components folder.  To do so just right click on your project > Add New Folder > Type in Components > Hit enter

Then you add a new item like this

Now a Blazor component is very similar to a razor page.  We’re going to implement a simple counter that will increment a value on the page, without refreshing the page, because that is what Blazor does.

The Blazor component is divided into two parts, the HTML code and the c# code.

The c# code is hosted inside the @functions section like so :

@code{
    int p = 0;
    void Increment()
    {
        p++;
    }
}

Here we just declare a variable p and a method that will just increment it.

Now this will be use in the HTML code like this :

@page "/Counter"

<div id="counter">
    <h1>@p</h1>
    <button onclick="@Increment">Increment</button>
</div>

The value of the p variable will be displayed in the H1 block.  Everytime the button will be click the Increment method will be called.  Note that we just use the signature of the method (without parentheses)

6. Insert your Blazor component into your MVC view

Luckily there is only one line of code that we need to put into your existing MVC view (cshtml file)

@(await Html.RenderComponentAsync<Blazorify.Components.Counter>())

Et voilà !  Blazor is now working in your existing application and you can now enjoy the benefits of writing c# code that will be executed inside your browser à la javascript, without javascript.  That’s the beauty of it.

You can find the source code in https://github.com/HerraHak/Blazorify