ASP.NET Core Razor Pages Ajax grid with Ajax request issue

Question

I got Main View which contains table, on row click ajax request will be send.

$.ajax({
        url: `/home/setViewBag/${id}`,
        type: "get",
        success: function (msg) {
            $("#modal").html("");
            $("#modal").append(msg);
            modal.style.display = "block";
        },
    });

"SetViewBag"

[HttpGet]
[Route("setViewBag/{id}")]
public async Task<ActionResult> SetViewBag(int id)
{
   ViewBag.Id = id;
   return View("AjaxGrid");
}

AjaxGrid.cshtml

@using NonFactors.Mvc.Grid
@Html.AjaxGrid(
        Url.Action("TestMethod", "Main", new { Id = ViewBag.Id }))

"TestMethod"

[HttpGet]
[Route("TestMethod/{id}")]
public async Task<ActionResult> TestMethod(int id)
{
   return PartialView(await _service.Get(id));
}

PROBLEM: Ajax request append to my modal new div without TABLE

<div class="mvc-grid" data-url="/main/testMethod/1"></div>

As you can see on image, modal is empty

Modal should contains rendered table

@Html.Grid(Model).Build(columns =>
{
    columns.Add(model => model.Id).Titled("Id");
    columns.Add(model => model.Name).Titled("Name");
}).Pageable(pager =>
{
    pager.PageSizes = new Dictionary<Int32, String> {{0, "All"}, {1, "1"}, {20, "20"}};
    pager.ShowPageSizes = true;
    pager.PagesToDisplay = 3;
    pager.CurrentPage = 1;
    pager.RowsPerPage = 1;
})

App: Asp.Net CORE 3.1 MVC-Grid v6.2.4

Answer 1

First of all there is a problem with your ajax call. You would like to return html to put it in your modal.

$.ajax({
        url: `/home/setViewBag/${id}`,
        type: "get",
        dataType: 'html',
        success: function (msg) {
            $("#modal").html("");
            $("#modal").append(msg);
            modal.style.display = "block";
        },
});

Then in controller you should return PartialView instead of View. I am not familiar with component you are using, but if it returns table you should just use in your success function $('#modal').html(msg); . If data is correctly returned from conroller and modal dialog is still empty, there is a problem with your modal setup. Make sure where you put your data.