kendo-ui - 如何从 Kendo UI TreeView 向 Controller 发送数据

Question

我有两个 Treeview ，一个有国家列表，另一个是空的，现在我想将选定的国家拖放到第二个 Treeview 中。我不知道如何从 TreeView 将数据发送到 Controller ，并且页面上还有一些表单中的文本字段。那么，如何将表单数据和 TreeView 的数据发送到 Controller 。

这是第二个 Treeview 的代码，它是空的，我想将选定的节点添加到:

@(Html.Kendo().TreeView()
    .Name("treeview-right")
    .DragAndDrop(true)
    .Events(events => events
        .Drag("onDrag")
        .Drop("onDrop")
    )
)

Answer 1

请尝试使用以下代码片段。

HTML/ View

<div style="border: 1px solid green;">
    <div id="treeview-left"></div>
</div>
<div style="border: 1px solid red;">
    <div id="treeview-right"></div>
</div>
<div id="mydiv" onclick="SaveData()">Click me to save data</div>
<script>
    $("#treeview-left").kendoTreeView({
        dragAndDrop: true,
        dataSource: [
            {
                id: 11, text: "Furniture", expanded: true, items: [
                  { id: 12, text: "Tables & Chairs" },
                  { id: 13, text: "Sofas" },
                  { id: 14, text: "Occasional Furniture" }
                ]
            },
            {
                id: 15, text: "Decor", items: [
                  { id: 16, text: "Bed Linen" },
                  { id: 17, text: "Curtains & Blinds" },
                  { id: 18, text: "Carpets" }
                ]
            }
        ]
    });

    $("#treeview-right").kendoTreeView({
        dragAndDrop: true,
        dataSource: [
            {
                id: 1, text: "Storage", expanded: true, items: [
                  { id: 2, text: "Wall Shelving" },
                  { id: 3, text: "Floor Shelving" },
                  { id: 4, text: "Kids Storage" }
                ]
            },
            {
                id: 5, text: "Lights", items: [
                  { id: 6, text: "Ceiling" },
                  { id: 7, text: "Table" },
                  { id: 8, text: "Floor" }
                ]
            }
        ]
    });

    var selectedID;

    function SaveData() {

        selectedID = '';

        var tv = $("#treeview-right").data("kendoTreeView");

        selectedID = getRecursiveNodeText(tv.dataSource.view());

        alert(selectedID);

        var data = {};
        data.str = selectedID;

        $.ajax({
            url: 'Home/SaveData',
            type: 'POST',
            data: data,
            dataType: 'json',
            success: function (result) {
                alert("Success");
            },
            error: function (result) {
                alert("Error");
            },
        });

    }

    function getRecursiveNodeText(nodeview) {
        for (var i = 0; i < nodeview.length; i++) {
            selectedID += nodeview[i].id + ",";
            //nodeview[i].text; You can also access text here
            if (nodeview[i].hasChildren) {
                getRecursiveNodeText(nodeview[i].children.view());
            }
        }

        return selectedID;
    }
</script>

Controller

namespace MvcApplication2.Controllers
{
    public class HomeController : Controller
    {

        [HttpPost]
        public JsonResult SaveData(string str)
        {
            foreach (string s in str.Split(','))
            {
                if (!string.IsNullOrEmpty(s))
                {
                    //Perform your opeartion here
                }
            }

            return Json("");
        }

    }
}

jsfiddle Demo