How to implement a Treeview in a Razor Page

Question

I make a tree view in razor page

As I tried to call multiple tree views simultaneously in the .cshtml file, I ended up using a recursive function.

program sequence

1. Get all tree data from DB
2. Bind tree data to TreeNode
3. Display in html using recursive function

So while I was looking for it, I found something that can make html directly in the back and I'm going to use it. When creating jsonresult, "There was a case where the js function itself was not recognized due to a problem.

I want to know if there is a way

Is the way I'm building my tree a very strange way now?

 public class TreeNode
        {
            public List<TreeNode> subTreeNodes { get; set; } 
            public string dataName { get; set; }
            public bool deployment { get; set; }
            public string board_id { get; set; }
            public TreeNode(string dName)
            {
                dataName = dName;
                deployment = false;


            }
        }

cshtml.cs

public IActionResult OnGet()
        {
            //if(session)
            List<TreeNode> treeData;
            
            IQueryable<tbl_tree> iqueryTree;
            
            iqueryTree = _context.tbl_tree.Where(x => x.upcode == "AAAAAA");
            var datas = iqueryTree.ToList();
            tree_List = new List<TreeNode>();
            for (int i = 0; i < datas.Count; i++)
            {
                TreeNode treeNode = new TreeNode(datas[i].name);
                treeNode.subTreeNodes = ConstructorData(datas[i].icd11);
                treeNode.board_id = datas[i].icd11;

                tree_List.Add(treeNode);

            }
            TempData.Set("TreeData", tree_List);

            jsonData = UpdateRecursiveData(tree_List[1]);

           
            return Page();
        }

public  List<TreeNode> ConstructorData(string str)
        {
            List<TreeNode> treeNodes = new List<TreeNode>();
            IQueryable<tbl_tree> iqueryTree;

            iqueryTree = _context.tbl_tree.Where(x => x.upcode == str);
            var datas = iqueryTree.ToList();

            for (int i = 0; i < datas.Count; i++)
            {
                TreeNode treeNode = new TreeNode(datas[i].name);
                treeNode.board_id = datas[i].icd11;
                treeNode.subTreeNodes = ConstructorData(datas[i].icd11);

                treeNodes.Add(treeNode);

            }
            return treeNodes;

        }

How will you package "in jsonresult?"

JsonResult UpdateRecursiveData(TreeNode tn)
    {
            JsonResult jsonResult = new JsonResult(
            "<input type = 'checkbox' onclick = requestMyAction( '" +tn.board_id+"', this.checked, 'loader-"+tn.dataName+"');' />" +
            "<div class='loader' style='display: none;' id='loader-'" +tn.dataName+ "'> "+tn.dataName+ "</div>" +
            "<br />");
            //if (tn.deployment)
            //{

            //for (int i = 0; i<tn.subTreeNodes.Count; i++)
            //    UpdateRecursiveData(tn.subTreeNodes[i]);
            //}

            return jsonResult;
        
    }

this cshtml

<input type="checkbox"
               onclick="requestMyAction('@Model.tree_List[0].board_id', this.checked,
        '[email protected]_List[0].dataName');" />

        <div class="loader" style="display: none;" id="[email protected]_List[0].dataName">
            @Model.tree_List[0]


        </div>
        <div id="data">
            @Html.Raw(Model.jsonData.Value)
        </div>

remove all

Answer 1

this error is syntax error js complier is not working in VS studio

  string strResult =
          "<div style='padding: 0 0 0 10px ;display:"+defaultView+"'id='"+tn.dataName+tn.upCode+"'>" +
          "<input type='checkbox'style='visibility:"+subCheck+";'onclick=requestMyAction('"+tn.icd11+"',this.checked,'"+tn.dataName+tn.upCode+"');>" +
          "<span onclick = 'CallViewBorad("+tn.board_Id + ")' >"+tn.dataName+" </span>";