Integrating Blazor components into Razor Pages and MVC apps

Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. While you can do a whole application in Blazor, you may not want to rewrite your existing ASP.NET Core MVC applications to take advantage of Blazor. You can integrate Blazor Components into an existing MVC application or Razor pages.

1. Create an ASP.NET Core Razor pages application

   Shellcopy

   dotnet new "ASP.NET Core Web App"

2. Add an _Imports.razor file to the root folder of the project with the following content

   Razorcopy

   @using System.Net.Http
   @using Microsoft.AspNetCore.Authorization
   @using Microsoft.AspNetCore.Components.Authorization
   @using Microsoft.AspNetCore.Components.Forms
   @using Microsoft.AspNetCore.Components.Routing
   @using Microsoft.AspNetCore.Components.Web
   @using Microsoft.JSInterop
   @* 👇 Change this namespace to match your application namespace *@
   @using DemoBlazor

3. Create the Blazor Component. Add a file named Components/Counter.razor and set the following content:

   Razorcopy

   <p>Current count: @currentCount</p>
   <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
   
   @code {
       private int currentCount = 0;
   
       [Parameter]
       public int InitialValue { get; set; }
   
       private void IncrementCount() => currentCount++;
   
       protected override void OnParametersSet()
       {
           currentCount = InitialValue;
       }
   }

   

4. Change the Startup.cs file to add Blazor services services.AddServerSideBlazor() and map the required endpoints endpoints.MapBlazorHub():

   C#copy

   public class Startup
   {
       public void ConfigureServices(IServiceCollection services)
       {
           services.AddRazorPages();
   
           // 👇 Add this line
           services.AddServerSideBlazor();
       }
   
       public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
       {
           if (env.IsDevelopment())
           {
               app.UseDeveloperExceptionPage();
           }
           else
           {
               app.UseExceptionHandler("/Error");
               app.UseHsts();
           }
   
           app.UseHttpsRedirection();
           app.UseStaticFiles();
           app.UseRouting();
           app.UseAuthorization();
           app.UseEndpoints(endpoints =>
           {
               endpoints.MapRazorPages();
   
               // 👇 Add this line
               endpoints.MapBlazorHub();
           });
       }
   }

5. Integrate the Blazor component into a razor page, such as Index.razor, using the component tag helper, and add the Blazor server script. You can add the script using the Scripts section if the section is defined in the _Layout.razor file or you can include the script tag directly in the _Layout.razor or the current page.

   Razorcopy

   @page
   
   <component type="typeof(DemoBlazor.Components.Counter)" param-InitialValue="0" render-mode="Server" />
   
   @section Scripts {
       <script src="_framework/blazor.server.js"></script>
   }

6. Run the application

   Shellcopy

   dotnet run

In the previous code we use render-mode="Server". There are 3 available render modes:

• Static: Renders the component into static HTML. In this case, there is no interactivity and you can remove the blazor.server.js script.
• 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. This means until the SignalR connection is set up, there is nothing visible for the user.
• 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. This means until the SignalR connection is set up, the user can see the content of the component but cannot interact with it.

#Additional resources

• Component Tag Helper in ASP.NET Core
• Prerender and integrate ASP.NET Core Razor components

Do you have a question or a suggestion about this post? Contact me!