将 jqTree 与 ASP MVC 和 JSON 文件一起使用

Question

我刚刚将 jqTree 添加到我的 ASP MVC 应用程序中。我需要在我的视图中显示一个 TreeView：

@{
    ViewBag.Title = "Tree";
}

<h2>@ViewBag.Title</h2>

<div id="tree1" data-url="/Home/Nodes"></div>

@section scripts {
    <script language="javascript" type="text/javascript">
        $(function () {
            $('#tree1').tree();
        });
    </script>
}

我的数据在 JSON 文件中 (~/App_Data/Roles.json):

{
    "id": 1,
    "label": "Role1",
    "children": [
        {
            "id": 2,
            "label": "Role2",
            "children": [
                {
                    "id": 3,
                    "label": "Role3",
                    "children": [
                    ]
                },
                {
                    "id": 4,
                    "label": "Role4",
                    "children": [
                    ]
                }
            ]
        }
    ]
}

如何在控制器操作方法中加载 json 文件以在视图中显示相应的 TreeView？

public ActionResult Nodes()
{
    var roles = // load json file

    return Json(roles, JsonRequestBehavior.AllowGet);
}

Answer 1

您可以从 JSON 文件 (~/App_Data/Roles.json) 传递 json 并按以下方式创建树：

在您的视图中添加以下代码：

<div id="tree1"></div>

@section scripts {
    <script language="javascript" type="text/javascript">
        $.ajax({
            type: 'POST', // we are sending data so this is POST
            traditional: true, 
            url: '/Home/Nodes', // controller/action name
            success: function (d) {
                $('#tree1').tree({
                    data: [jQuery.parseJSON(d)]
                });
            }
        });
    </script>
}

在您的 HomeController 中创建一个 Nodes() 函数：

public ActionResult Nodes()
    {
        string roles = string.Empty;
        using (StreamReader r = new StreamReader(Server.MapPath("~/App_Data/Roles.json")))
        {
            roles = r.ReadToEnd();
        }                 
        return Json(roles, JsonRequestBehavior.AllowGet);
    }

并且您将能够查看您的树。如果您遇到任何问题，请告诉我。

将 jqTree 与 ASP MVC 和 JSON 文件一起使用

Use jqTree with ASP MVC and JSON File

asp.net-mvc

json

jqtree