How to Add Blazor Component into Existing ASP.NET Core MVC Application

7 Jul 20224 minutes to read

This section explains how to add Syncfusion Blazor component on an existing ASP.NET Core MVC application.

Open your existing ASP.NET Core MVC application on Visual Studio 2019.
Right-click on the project and select Manage NuGet Package.
Search Syncfusion.Blazor.Grid and install the NuGet package.

 using Syncfusion.Blazor;

 public void ConfigureServices(IServiceCollection services)
 {
     ....
     ....
     services.AddServerSideBlazor();
     services.AddSyncfusionBlazor();
 }

Add BlazorHub endpoint in the Configure method on ~/Startup.cs file.

 public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
 {
     app.UseEndpoints(endpoints =>
     {
         ....
         ....
         // Map Blazor SignalR hub.
         endpoints.MapBlazorHub();
     });
 }

Create ~/_Imports.razor file in the root of your application and add the below namespaces.

 @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.AspNetCore.Components.Web.Virtualization
 @using Microsoft.JSInterop
 @using AspCoreMvcApp;
 @using Syncfusion.Blazor
 @using Syncfusion.Blazor.Grids

Add Blazor script references at the end of <body> tag and Syncfusion theme reference inside the <head> tag on ~/Views/Shared/_Layout.cshtml file.

 <head>
     ....
     ....
     <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
 </head>
 <body>
     ....
     ....
     <script src="_framework/blazor.server.js"></script>
 </body>

Create a new folder ~/Components at the root of application. Right-click on the ~/Components folder and add a new razor component by Add -> Razor Component.

Add the Syncfusion Blazor component in the created razor file.

 <SfGrid DataSource="@Orders" AllowPaging="true">
     <GridPageSettings PageSize="5"></GridPageSettings>
     <GridColumns>
         <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" Width="120"></GridColumn>
         <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
         <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Width="130"></GridColumn>
         <GridColumn Field=@nameof(Order.Freight) Format="C2" Width="120"></GridColumn>
     </GridColumns>
 </SfGrid>

 @code{
     public List<Order> Orders { get; set; }

     protected override void OnInitialized()
     {
         Orders = Enumerable.Range(1, 50).Select(x => new Order()
         {
             OrderID = 1000 + x,
             CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
             Freight = 2.1 * x,
             OrderDate = DateTime.Now.AddDays(-x),
         }).ToList();
     }

     public class Order
     {
         public int? OrderID { get; set; }
         public string CustomerID { get; set; }
         public DateTime? OrderDate { get; set; }
         public double? Freight { get; set; }
     }
 }

Now, add the razor component in the ~/Views/Home/Index.cshtml page using component tag helper. The .razor file name will be considered as a Razor component. For example, the above SfGrid component is added on ~/Components/MyGrid.razor file.
```
@using AspCoreMvcApp.Components;

<component type="typeof(MyGrid)" render-mode="ServerPrerendered" />
```
Run the application by pressing F5 key. Now, the Syncfusion Blazor Grid component will be rendered in the ASP.NET Core MVC application.

How to Add Blazor Component into Existing ASP.NET Core MVC Application

See Also