如何在 razor 页面中实现 Treeview

Question

我在 razor 页面中制作树视图

当我尝试在 cshtml 中同时调用多个树视图时，我最终使用了递归函数。

节目顺序

从数据库中获取所有树数据
将树数据绑定到 TreeNode
使用递归函数在html中显示

于是在找的过程中，在后面发现了一个可以直接做出html的东西，打算用一下。创建jsonresult时，“出现了js函数本身出现问题无法识别的情况。

想知道有没有办法

问题

我现在构建树的方式是不是很奇怪？

 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;

        }

你将如何打包“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;
        
    }

这个cshtml

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

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


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

全部删除

Answer 1

此错误是语法错误 js 编译器在 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>";

如何在 razor 页面中实现 Treeview

how to implement Treeview in razor page

html

c#

asp.net

tree

razor-pages