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

29 Jan 20244 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 2022.
Right-click on the project and select Manage NuGet Package.
Search the Syncfusion.Blazor.Grid and Syncfusion.Blazor.Themes NuGet packages and install them.

 using Syncfusion.Blazor;
 ....
 builder.Services.AddServerSideBlazor();
 builder.Services.AddSyncfusionBlazor();

Add BlazorHub in the ~/Program.cs file.

 // Map your endpoints here...

 app.MapRazorPages();
 app.MapBlazorHub();
 app.MapFallbackToPage("/_Host");

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 and script references inside the <head> tag on ~/Views/Shared/_Layout.cshtml file.

 <head>
     ....
     ....
     <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </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