Lazy加载TreeView与JsTree在Asp.Net MVC [英] Lazy-loading TreeView with JsTree in Asp.Net MVC

问题描述

我在我的项目中使用JsTree。我想这样做：

当我点击根节点（+）后，我想显示子节点时，我希望在第一次加载树时显示根节点或子节点。我的意思是，当我点击每个节点时，我想从数据库中获取并添加到子节点。

如何在Asp.Net MVC中执行此操作？我几乎查看了每个JsTree Ajax示例。但我不能这样做我应该从行动中返回什么？我应该怎么做我的行动请帮忙！

JsTree： https ：//www.jstree.com/

示例：

• jsTree - 根据需要通过ajax加载子节点


• jsTree：动态追加子节点


• JSTree - 动态加载节点

解决方案

最后，我发现问题！

我创建了一个模型：

  public class JsTreeModel 
 {
 public string id {get;组; } 
 public string parent {get;组; } 
 public string text {get;组; } 
 public bool children {get;组; } //如果节点的子节点设置为true或不设置false 
} 
  

I创建一个如下所示的控制器：

  public class TreeviewController：Controller 
 {
 public JsonResult GetRoot（）
 {
列表< JsTreeModel> items = GetTree（）; 
 
返回新的JsonResult {Data = items，JsonRequestBehavior = JsonRequestBehavior.AllowGet}; 
} 
 
 public JsonResult GetChildren（string id）
 {
列表< JsTreeModel> items = GetTree（id）; 
 
返回新的JsonResult {Data = items，JsonRequestBehavior = JsonRequestBehavior.AllowGet}; 
} 
 
 static List< JsTreeModel> GetTree（）
 {
 var items = new List< JsTreeModel>（）; 
 
 //在这里设置项目
 
返回项目; 
} 
 
 static List< JsTreeModel> GetTree（string id）
 {
 var items = new List< JsTreeModel>（）; 
 
 //在这里设置项目
 
返回项目; 
} 
 
} 
  

Html：

 < div id ='treeview'>< / div>  

/ div>

脚本：

  $（'＃treeview' ）.jstree（{
plugins：[search，wholerow]，
'core'：{
'data'：{
'url' （node）{
 return node.id ==='＃'？/ Treeview / GetRoot：/ Treeview / GetChildren /+ node.id; 
 
}，
'data'：function（node）{
 return {'id'：node.id}; 
} 
} 
} 
}）; 
 
 $（'＃treeview'）。on（'changed.jstree'，function（e，data）{
 console.log（=> selected node：+ data。 node.id）; 
}）; 
  

I am using JsTree on my project. I want to do like that:

I want to show just root nodes when tree loaded first time after I want to show sub-nodes when I clicked root node (+) or of sub-node. I mean, I want to get from database and add to the sub-nodes when I clicked every node.

How can I do that in Asp.Net MVC? I looked almost every JsTree Ajax sample. But I couldn't do that. What should I return from action? How should I do my action Please help!

JsTree: https://www.jstree.com/

Samples:

• jsTree - loading subnodes via ajax on demand
• jsTree : Append child node dynamically
• JSTree - Load nodes dynamically

解决方案

Finally, I found the problem!

I created a Model:

public class JsTreeModel
{
    public string id { get; set; }
    public string parent { get; set; } 
    public string text { get; set; }
    public bool children { get; set; } // if node has sub-nodes set true or not set false
}

I created a controller like following:

public class TreeviewController : Controller
{
    public JsonResult GetRoot()
    {
        List<JsTreeModel> items = GetTree();

        return new JsonResult { Data = items, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

    public JsonResult GetChildren(string id)
    {
        List<JsTreeModel> items = GetTree(id);

        return new JsonResult { Data = items, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

    static List<JsTreeModel> GetTree()
    {
        var items = new List<JsTreeModel>();

        // set items in here

        return items;
    }

    static List<JsTreeModel> GetTree(string id)
    {
        var items = new List<JsTreeModel>();

        // set items in here

        return items;
    }

}

Html:

<div id='treeview'></div>

Script:

$('#treeview').jstree({
    "plugins": ["search", "wholerow"],
    'core': {
        'data': {
            'url': function (node) {
                return node.id === '#' ? "/Treeview/GetRoot" : "/Treeview/GetChildren/" + node.id;

            },
            'data': function (node) {
                return { 'id': node.id };
            }
        }
    }
});

$('#treeview').on('changed.jstree', function (e, data) {
    console.log("=> selected node: " + data.node.id);
});

这篇关于Lazy加载TreeView与JsTree在Asp.Net MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！