如何在剃须刀页面中实现 Treeview

Posted 2023-04-01

【中文标题】如何在剃须刀页面中实现 Treeview

【英文标题】：how to implement Treeview in razor page

【发布时间】：2021-10-27 00:51:53

【问题描述】：

previous quest

我在 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;

        

你将如何打包“在 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,
        '[e-mail]_List[0].dataName');" />

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


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

全部删除

【参考方案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>";