Bootstrap-treeview with Ajax ASP.NET Core

Question

Im using ASP.NET Core and trying to populate a bootstrap treeview from a ajax call. I can get the response from the server but the tree view doesnt create a tree on the view.

I have installed the package via npm and linked to the css and script. Here is the view:

<div class="row">
        <label for="treeview"></label>
        <div id="treeview" />
    </div>

function getTree() {

            $.ajax({
                type: 'GET',
                url: '/Home/GetTreeNodes',
                dataType: "json",
            })
                .done(function (response) {

                    $("#treeview").treeview({ data: response })
                    console.log(response);
                })
                .fail(function (response) {
                    console.log(response);
                });
        }

        getTree();

And here is the Json action in my controller:

 [HttpGet]
    public JsonResult GetTreeNodes(string query)
    {
        // Tree nodes from db
        List<TreeNodes> treeNodes;
        // Tree nodes view model
        List<TreeNodesViewModel> treeNodesViewModel;

        treeNodes = _context.TreeNodes.ToList();

        if (!string.IsNullOrWhiteSpace(query))
        {
            treeNodes = treeNodes.Where(q => q.Name.Contains(query)).ToList();
        }

        treeNodesViewModel = treeNodes.Where(l => l.ParentId == null)
                .Select(l => new TreeNodesViewModel
                {
                    Text = l.Name,
                    Id = l.Id,
                    ParentId = l.ParentId,                       
                    @Checked = l.Checked,
                    Children = GetChildren(treeNodes, l.Id)
                }).ToList();


        return Json(treeNodesViewModel);
    }

private List<TreeNodesViewModel> GetChildren(List<TreeNodes> nodes, int parentId)
    {
        return nodes.Where(l => l.ParentId == parentId).OrderBy(l => l.OrderNumber)
            .Select(l => new TreeNodesViewModel
            {
                Text = l.Name,
                Id = l.Id,
                ParentId = l.ParentId,                   
                @Checked = l.Checked,
                Children = GetChildren(nodes, l.Id)
            }).ToList();
    }

The only thing that shows up on the view is the root node:

Any help would be greatly appreciated, been searching the net for examples and help but not managed to find anything that descibes why im getting this problem.

Answer 1

Just in case somebody in the future stumbles across this i figured it out. My code was fine, i had to change the structure of the viewmodel with text first and also change the name of children to nodes then it worked fine.

On a side note, i have tried running this with bootstrap 4 alpha 6 and it doesn't show the checkboxes. So use it as stated on the site with bootstrap <= 3.