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.
Create an ASP.NET Core Razor pages application
dotnet new "ASP.NET Core Web App"
Add an
_Imports.razor
file to the root folder of the project with the following content@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
Create the Blazor Component. Add a file named
Components/Counter.razor
and set the following content:<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; } }
Change the
Startup.cs
file to add Blazor servicesservices.AddServerSideBlazor()
and map the required endpointsendpoints.MapBlazorHub()
: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(); }); } }
Integrate the Blazor component using the
component
tag helper, and add the Blazor script:@page <component type="typeof(DemoBlazor.Components.Counter)" param-InitialValue="0" render-mode="Server" /> @section Scripts { <script src="_framework/blazor.server.js"></script> }
Run the application
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 theblazor.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.
Do you have a question or a suggestion about this post? Contact me!