文章/答案/技术大牛

发布

社区首页 >问答首页 >从mvc视图更新树模型

问从mvc视图更新树模型
EN

Stack Overflow用户

提问于 2013-10-27 02:05:11

回答 1查看 375关注 0票数 0

我想在MVC中创建一个简单的可拖树。但我不知道如何将更改的集合返回给控制器。现在我总是有第一个模型，没有变化.

主计长：

public ActionResult Index()
{
    TreeModel tree = new TreeModel();
    tree.RootNodes = new List<TreeModel.Node>();

    var root1 = new TreeModel.Node() { ID = 0, Name = "Root 1", NodeType = TreeModel.NodeType.Folder };
    var root2 = new TreeModel.Node() { ID = 1, Name = "Root 2", NodeType = TreeModel.NodeType.Folder };

    var node1 = new TreeModel.Node() { ID = 2, Name = "Node 1", NodeType = TreeModel.NodeType.Href };
    var node2 = new TreeModel.Node() { ID = 3, Name = "Node 2", NodeType = TreeModel.NodeType.Href };

    var folder1 = new TreeModel.Node() { ID = 4, Name = "Folder 1", NodeType = TreeModel.NodeType.Folder };
    var folder2 = new TreeModel.Node() { ID = 5, Name = "Folder 2", NodeType = TreeModel.NodeType.Folder };

    root1.Childs.AddRange(new[] { node1, folder1 });
    root2.Childs.AddRange(new[] { node2, folder2 });

    tree.RootNodes.AddRange(new[] { root1, root2 });
    return View(tree);
}

[HttpPost]
public ActionResult Index(TreeModel tree)
{
    string res = tree != null && tree.RootNodes != null ? "Success!" : "It is null...";
    return Content(res);
}

型号：

public class TreeModel
{
    public List<Node> RootNodes { get; set; }

    public enum NodeType
    {
        Href,
        Folder
    }

    public class Node
    {
        public int ID { get; set; }
        public string Name { get; set; }

        public NodeType NodeType { get; set; }

        private List<Node> _childs = new List<Node>();
        public List<Node> Childs
        {
            get { return _childs; }
            set { _childs = value; }
        }            

        public override string ToString()
        {
            return string.Format("{0} - {1}", this.Name, this.NodeType);
        }
    }
}

查看：

@using DraggableTree.Models
@using DraggableTree.Helpers
@model TreeModel

@{
    ViewBag.Title = "title";
    Layout = null;
}



<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        function drop(ev) {
            var target = $(event.target);
            var newParent;
            if (target.is("ul"))
                newParent = target;
            else
                newParent = target.closest("li").children("ul");

            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            var draggedNode = document.getElementById(data);

            newParent.append(draggedNode);
        }
    </script>
</head>

<h2>My Tree</h2>
@using (Html.BeginForm())
{
    <ul ondrop="drop(event)">
        @Html.EditorFor(m => m.RootNodes)
    </ul>

    <input type="submit"value="submit"/>
}

编辑器模板：

@using DraggableTree.Models
@using DraggableTree.Helpers
@model TreeModel.Node


<li draggable="true" id="@Model.ID" ondragover="allowDrop(event)" ondragstart="drag(event)"> 

    <div class="node">
        <b>@Model.NodeType @Html.EditorFor(m => m.Name)</b>
        @Html.HiddenFor(m => m.ID)
    </div>
    <ul ondrop="drop(event)">   
        @Html.EditorFor(m => m.Childs)    
    </ul>

</li>

asp.net-mvc-4

data-binding

回答 1

Stack Overflow用户

发布于 2013-10-28 05:30:29

目前，我已经通过将属性ParentId添加到Node模型并在drop操作中使用jQuery脚本对其进行更新来解决这个问题。在那之后，在一次事后行动中，我不得不重建我的树。(如果有人感兴趣，我可以贴出代码)。

描述了我在博客上的最后解决方案。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19613903

复制

相似问题

问从mvc视图更新树模型
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从mvc视图更新树模型EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从mvc视图更新树模型
EN