如何从 Kendo UI TreeView 向控制器发送数据 [英] How to send data to the controller from the Kendo UI TreeView

问题描述

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

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

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

解决方案

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

HTML/视图

<div style="border: 1px 纯绿色;"><div id="treeview-left"></div>

<div style="border: 1px 纯红色;"><div id="treeview-right"></div>

<div id="mydiv" onclick="SaveData()">点击我保存数据</div><脚本>$("#treeview-left").kendoTreeView({拖放:真，数据源: [{id: 11, text: "Furniture", 展开: true, items: [{ id: 12, text: "Tables & Chairs" },{ id: 13, 文字: "沙发" },{ id: 14, text: "偶尔的家具" }]},{id:15，文本:装饰"，项目:[{ id: 16, text: "床单" },{ ID:17，文字:窗帘和百叶窗"}，{ ID:18，文字:地毯"}]}]});$("#treeview-right").kendoTreeView({拖放:真，数据源: [{id: 1, text: "Storage", 展开: true, items: [{ id: 2, text: "Wall Shelfing" },{ id: 3, text: "落地式货架" },{ id: 4, text: "儿童存储" }]},{id: 5, text: "Lights", items: [{ id: 6, text: "Ceiling" },{ id: 7, text: "Table" },{ ID:8，文字:楼层"}]}]});var selectedID;函数保存数据(){选择 ID = '';var tv = $("#treeview-right").data("kendoTreeView");selectedID = getRecursiveNodeText(tv.dataSource.view());警报(选定的ID)；无功数据 = {};data.str = selectedID;$.ajax({url: '主页/保存数据',类型:'POST'，数据:数据，数据类型:'json'，成功:功能(结果){警报(成功")；},错误:函数(结果){警报(错误")；},});}函数 getRecursiveNodeText(nodeview) {for (var i = 0; i < nodeview.length; i++) {selectedID += nodeview[i].id + ",";//nodeview[i].text;您还可以在此处访问文本如果(节点视图 [i].hasChildren){getRecursiveNodeText(nodeview[i].children.view());}}返回选定的ID；}

控制器

命名空间 MvcApplication2.Controllers{公共类 HomeController : 控制器{[HttpPost]公共 JsonResult SaveData(string str){foreach (str.Split(',') 中的字符串 s){if (!string.IsNullOrEmpty(s)){//在这里执行你的操作}}返回 Json("");}}}

jsfiddle 演示

I have two TreeViews, one has a list of countries, and the other is empty, now I want drag and drop selected countries into the second tree-view. I don't know how to send data to the controller from the TreeView and there is also some text field on the page in a form. So, how can I send both the form data and the TreeView's data to the controller.

Here is the code for the second tree-view which is empty and I want to add the selected nodes to:

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

解决方案

Please try with the below code snippet.

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

这篇关于如何从 Kendo UI TreeView 向控制器发送数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！