使用 ASP.NET MVC5 中的 Ajax 将 Fancytree SelectedNodes 传递给控制器

Question

我正在尝试在 ASP.NET MVC5 项目中使用 FancyTree 插件，以允许用户在树视图中 select 项目，然后将 selected 对象列表传回到控制器进行处理。

在显示我的数据方面，我有一个工作树视图，这一点很好。我正在显示带有复选框的树视图。我的问题是当尝试使用 Ajax 将 selected 节点列表从树视图传递回控制器时。

这是初始化树视图的初始 jquery

        $(function () {

            $("#SiteID").text('Site ID : ' + $("#Sites option:selected").val());

            $("#tree").fancytree({
                selectMode: 3,
                checkbox: true,
                source: {
                    url: "@Url.Action("GetOLTs", "MNT")",
                    data: { SiteID: $("#Sites option:selected").val() },
                    cache: false
                }
            });
        });

这是我用来尝试提交 selected 节点列表的按钮事件:-

$("#submit-button").on('click', function () {
    var Nodes = $('#tree').fancytree('getTree').getSelectedNodes();

    $.ajax({
        url: '@Url.Action("SubmitData", "MNT")',
        method: 'POST',
        data: { TreeData: Nodes } 
    });
});

getSelectedNodes() 似乎是 select 正确的节点（我可以在警报中看到 Nodes 变量的值）并创建一个逗号分隔的列表，我将其分配给 "Nodes" .

当我点击按钮时出现以下错误:-

Uncaught RangeError: Maximum call stack size exceeded

对于这告诉我的内容以及如何将数据传递给控制器，我有点迷茫。感谢任何帮助。

Answer 1

方法

tree.getSelectedNodes()

returns FancytreeNode 个对象的数组。您需要将其转换为普通对象，以便 $.ajax 函数可以对其进行序列化。

例如遍历数组并使用 node.toDict():

var selNodes = $("#tree").fancytree("getTree").getSelectedNodes();
var selData = $.map(selNodes, function(n){
  return n.toDict();
});

使用 ASP.NET MVC5 中的 Ajax 将 Fancytree SelectedNodes 传递给控制器

Passing Fancytree SelectedNodes to controller with Ajax in ASP.NET MVC5

asp.net-mvc

jquery

fancytree