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

29 Nov 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