Showing Data Table in partial view

Mark Tabor

Dear All , I met with an issue I need to show my partial view listing as data table for that I have set up everything I needed and I am able to see the datatable in partial view as well ,
THE PROBLEM IS THAT main main view render twice with two times menu and main content in which i am calling partial view and the code never ends I debug the code and it comes in index controller method for infinit number of times below is my code.

My main view code is below

@model WEB.ViewModels.MyVm
@using WEB.Classes

Listing

Student Details

Student Type

@await Html.PartialAsync("~/Views/details/studentdetails.cshtml")

@section Scripts {

}
My partial view code is below

@model WEB.ViewModels.MyVm

student List

@foreach(var item in Model.student details)
{

}

student Type	Category	Description	Delete
@item.student.SubCategory	@item.student.Category	@item.Description	Delete

@section scripts{

}
Controller Index method is bwlow

[HttpGet]

public IActionResult Index()
{

try
{
List students = new List();
students = DbContext.Students.Include(a => a.Students).Include(a => a.Tracking).Take(20).ToList();
if(Students.Any())
{

myvm model = new myvm
{
studentDetail = students.ToList(),
};
return View("Index", model);
}

return View();
}
catch (Exception ex)
{

return BadRequest("There is something wrong with this request!");
}
}
ignore speeling and other stuff the issue is main loop is not ending and it call index for infinite time and load the main view content multiple times and cannot get out from dubugging

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tuhin Paul2y ago

Accepted answer

HTML

    @await Html.PartialAsync("~/Views/details/studentdetails.cshtml")


---------------

JavaScript
function LoadPartialView() { 
    $.ajax({
        url: '@Url.Action("GetStudentDetails", "studentdetails")',
        type:'GET',
        success: function (data) {
            $('#PartialViewContainer').html(data);
            $('#tblApplications').DataTable();
        }
    });
}

-----------------------------


[HttpGet]
public IActionResult GetStudentDetails()
{
    // Return the partial view with the student details
    return PartialView("~/Views/details/studentdetails.cshtml", model);
}

Mark Tabor2y ago
Thanks can yoou share the fixed code.?
Tuhin Paul2y ago
The issue you're facing is due to the recursive loading of the partial view in the main view.

In your main view, you're calling @await Html.PartialAsync("~/Views/details/studentdetails.cshtml") which loads the partial view.

In the partial view, you're calling LoadPartialView() function which makes an AJAX call to the Index action in the studentdetails controller. The Index action returns the main view again, which in turn loads the partial view again, and so on. This creates an infinite loop where the main view and partial view keep loading each other. To fix this, you should remove the recursive loading of the partial view.