Recursive ViewComponent causes infinite loop - recursion

Question

I'm trying to make a recursive category tree using a ViewComponent, but I seem to get stuck in an infinite loop, and end up with HTTP Error 502.3 - Bad Gateway after a minute or two.
My thinking has been like this:
In the main View, the component is invoked with an empty List<ViewModelProductCategory> as a parameter, to indicate that I want to get the root categories first.
The ViewComponent query the database for categories with ParentId == null and returns it to Default.cshtml.
In Default.cshtml, the component is invoked again, but this time with a list of children categories as parameter.
I'm invoking the ViewComponent like this:
#await Component.InvokeAsync("SelectCategories",
new List<MyStore.Models.ViewModels.ViewModelProductCategory> { })
The ViewComponent class looks like this:
using AutoMapper;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using MyStore.Models;
using MyStore.Models.ViewModels;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace MyStore.Areas.Admin.ViewComponents
{
public class SelectCategoriesViewComponent : ViewComponent
{
private readonly MyStoreContext _context;
private readonly IMapper _mapper;
public SelectCategoriesViewComponent(MyStoreContext context, IMapper mapper)
{
_context = context;
_mapper = mapper;
}
public async Task<IViewComponentResult> InvokeAsync(List<ViewModelProductCategory> catList)
{
List<ViewModelProductCategory> VM = await GetCategoriesAsync(catList);
return View(VM);
}
private async Task<List<ViewModelProductCategory>> GetCategoriesAsync(List<ViewModelProductCategory> catList)
{
List<ViewModelProductCategory> VM = new List<ViewModelProductCategory>();
if (catList.Count() == 0)
{
VM = _mapper.Map<List<ViewModelProductCategory>>
(await _context.ProductCategories
.Where(x => x.ParentId == null)
.ToListAsync());
}
else
{
VM = catList;
}
return VM;
}
}
}
The ViewComponent's Default.cshtml looks like this:
#model IEnumerable<MyStore.Models.ViewModels.ViewModelProductCategory>
<ul style="list-style:none;padding-left:0px;">
#if (Model != null)
{
foreach (var item in Model)
{
<li style="margin-top:4px;padding:0px;">
#Html.HiddenFor(m => item.Id)
#Html.CheckBoxFor(m => item.Checked)
#Html.LabelFor(m => item.Id, item.Title)
<ul>
#await Component.InvokeAsync("SelectCategories", item.Children)
</ul>
</li>
}
}
</ul>
Where is/are the error/s?
Edit
The comment from Tarek.Eladly made me realize I had a bad logic flaw in the GetCategoriesAsync-method. I have made these changes to my code, and now it works:
Invoking the ViewComponent first time:
#await Component.InvokeAsync("SelectCategories",
new
{
root = true,
catList = new List<MyStore.Models.ViewModels.ViewModelProductCategory>()
})
The ViewComponent-methods:
public async Task<IViewComponentResult> InvokeAsync(bool root, List<ViewModelProductCategory> catList)
{
List<ViewModelProductCategory> VM = await GetCategoriesAsync(root, catList);
return View(VM);
}
private async Task<List<ViewModelProductCategory>> GetCategoriesAsync(bool root, List<ViewModelProductCategory> catList)
{
List<ViewModelProductCategory> VM = new List<ViewModelProductCategory>();
if (root)
{
VM = _mapper.Map<List<ViewModelProductCategory>>
(await _context.ProductCategories
.Where(x => x.ParentId == null)
.ToListAsync());
}
else
{
VM = catList;
}
return VM;
}
Invoking the ViewComponent in Default.cshtml:
#await Component.InvokeAsync("SelectCategories",
new
{
root = false,
catList = item.Children
})
:)

Answer 1

if i am right just take a look at (.Where(x => x.ParentId == null)) in GetCategoriesAsync you always get the root category and never check anything else.