Load Infragistics Blazor Grid in an ASP.NET Core MVC project dynamically

I have an ASP.NET Core 8.0 MVC project in which I'm adding some Blazor components from Infragistics and I'm having an issue.

I already have set this on my Startup.cd file:

services.AddServerSideBlazor();   // <-------...app.UseEndpoints(endpoints =>{    endpoints.MapControllerRoute(        name: "default",        pattern: "{controller=Home}/{action=Index}/{id?}");    endpoints.MapBlazorHub();  // <-------});

In my _Layout.cshtml, I added this at the end of my body:

<script src="_framework/blazor.server.js"></script> 

I also installed the necessary NuGet packages.

Later in my Shared folder, I added another folder called Components in which I added 2 .razor files:

The in my index.cshtml file from Home/Index, I added this code:

<hr /><div>    @(        await Html.RenderComponentAsync<TW5.Mvc.Web.Views.Shared.Components.Grid>(        RenderMode.ServerPrerendered,        new { Name = "BlazorGrid" }        ))</div>

This is my Grid.razor file:

@using IgniteUI.Blazor.Controls@using MyProject.Entity.Models.Views@using MyProject.DataService@inject BlazorDataService _dataService@inject IJSRuntime JS@code {    protected override async Task OnAfterRenderAsync(bool firstRender)    {        var grid2 = this.grid2;    }    private IgbGrid grid2;    [Parameter]    public string Name { get; set; } = string.Empty;    [Parameter]    public List<Opportunity> OpportunitiesData    {        get        {            return _dataService.GetOpportunityBlazorData();        }        set        {        }    }}<div class="container vertical ig-typography"><div class="container vertical fill"><IgbGrid Height="100%"                 Width="100%"                 AutoGenerate="false"                 PrimaryKey="ID"                 DisplayDensity="DisplayDensity.Cosy"                 AllowFiltering="true"                 FilterMode="FilterMode.ExcelStyleFilter"                     Data="OpportunitiesData"                 Name="grid2"                 @ref="grid2"><IgbPaginator PerPage="20"></IgbPaginator><IgbColumn Field="ID" Header="ID" DataType="GridColumnDataType.Number" Sortable="true" Editable="false" Resizable="true" Hidden=true></IgbColumn><IgbColumn Field="FormatedID" Header="ID" DataType="GridColumnDataType.String" Sortable="true" Editable="false" Resizable="true"></IgbColumn><IgbColumn Field="ReferenceCode" Header="Reference Code" DataType="GridColumnDataType.String" Sortable="true" Editable="false" Resizable="true"></IgbColumn><IgbColumn Field="Name" Header="Name" DataType="GridColumnDataType.String" Sortable="true" Editable="false" Resizable="true"></IgbColumn><IgbColumn Field="SalesConsultantName" Header="Sales & Design Consultant" DataType="GridColumnDataType.String" Sortable="true" Editable="false" Resizable="true"></IgbColumn><IgbColumn Field="Status" Header="Status" DataType="GridColumnDataType.String" Sortable="true" Editable="false" Resizable="true"></IgbColumn><IgbColumn Field="BusinessUnits" Header="Business Units" DataType="GridColumnDataType.String" Sortable="true" Editable="false" Resizable="true"></IgbColumn><IgbColumn Field="EstimateValue" Header="Estimate Value" DataType="GridColumnDataType.Currency" Sortable="true" Editable="false" Resizable="true"></IgbColumn><IgbColumn Field="ExpectedFirstDeliveryDate" Header="Expected First Delivery" DataType="GridColumnDataType.Date" Sortable="true" Editable="false" Resizable="true"></IgbColumn><IgbColumn Field="ExpectedCompletionDate" Header="Expected Completion Date" DataType="GridColumnDataType.Date" Sortable="true" Editable="false" Resizable="true"></IgbColumn></IgbGrid></div></div>

When my project loads for the first time, the grid loads. But the issue here is when I'm trying to load it from added HTML code. In my Javascript, I have an Ajax function that appends a details.cshtml file like this:

$pageBody.append("<div>" + html +"</div>");

In the details.cshtml file, I have the same code that I used to load the Blazor component in my Home/Index page. In this scenario, the Blazor component does not load. The project does not throw any exception, nor do I see any error in my browser console.

The flow of my project is when I load it, on the navigation panel I load another index the same way as the append on my JS file, and then I load another page which is the details.cshtml file with the component. The HTML from the Home/Index view is destroyed by Javascript.

I tried using blazor.reconnect() in my Javascript, but it does not work.