Syncfusion Blazor controls in a MVC web project - Is this possible??

Question

Hi,Is it possible to useSyncfusion Blazor controls in a MVC web project. We have added Blazor components to an existing MVC project but wanted to now if we can use Syncfusion controls? And if so do we use MVC or Blazor packages?Thanks,Alex

Muthukumar Kannan · Accepted Answer

Hi Alex,

Thanks for contacting Syncfusion support.

We have validated your query and it is possible to use Syncfusion Blazor controls in ASP.NET Core MVC Web Application.

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/prerendering-and-integration?view=aspnetcore-5.0&pivots=server

Please follow the below steps to create a ASP.NET Core MVC Web Application with Syncfusion Blazor controls.

Step 1: Create a new ASP.NET Core MVC Web Application in VS2019.

Step 2: Add the Syncfusion.Blazor NuGet package to the new application by using the NuGet Package Manager. Also, we can use the individual package.

Step 3: Add the _Imports.razor file to your root of the project which consists of the below code.

_Imports.razor

@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 {{YOUR PROJECT NAME}}

@using Syncfusion.Blazor

Step 4: The below code for Blazor script and Syncfusion.Blazor Styles to your application in _Layout.cshtml

_Layout.cshtml

<head>

. . .

@* For overall packages *@

@* For individual packages *@

@* <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/material.css" rel="stylesheet" />*@

</head>

<body>

. . .

. . .

</body>

Step 5: Add the below code in Startup.cs file to configure the Syncfusion Blazor

Startup.cs

using Syncfusion.Blazor;

namespace {{your project name}}
{
public class Startup
   {
      ....
      ....

      public void ConfigureServices(IServiceCollection services)
      {
         ....
          services.AddServerSideBlazor();
          services.AddSyncfusionBlazor();
      }
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
     ....
   ....

     app.UseEndpoints(endpoints =>
     {
        ....
        ....
        endpoints.MapBlazorHub();
      });
   }
}
}

Step 6: Now create a razor view file in under the folder location(Views/Shared/Component.razor) and add the Syncfusion Blazor controls on this. For example, we have added the Syncfusion Blazor Datagrid control in the below code.

Component.razor

@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" AllowPaging="true">

<GridPageSettings PageSize="5"></GridPageSettings>

<GridColumns>

<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>

<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>

<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>

<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

</GridColumns>

</SfGrid>

@code{

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

protected override void OnInitialized()

{

Orders = Enumerable.Range(1, 75).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; }

}

Step 7: Add the below code to render component on Index.cshtml view page.

Index.cshtml

<component type="typeof({{ YOUR PROJECT NAME }}.Views.Shared.Component)" render-mode="ServerPrerendered"/>

Step 8: Run the application.

Also, we have prepared a sample for your reference. Please refer the below link.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/7z/mvcblazor-1414400912

Please let us know if you need any assistance on this.

Regards,

Muthukumar K