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. -
Register Blazor server service and Syncfusion Blazor service in the
ConfigureServices
method on~/Startup.cs
file.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 byAdd -> 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 usingcomponent
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.