【desalbres】使用MVC3和jsTree实现的简单文件管理器

我在网上见过几篇关于MVC和jsTree的好教程，但是它们多少有些过时了，不适用于jsTree的最新版本（它是免费的）。我想把我使用jsTree的经验发上来有一段时间了（对于不知道什么是jsTree的朋友，请来这看看：www.jsTree.com）。还有什么比通过实现一个简单的文件管理器更好的分享这些经验呢？

在这篇文章里，我将关注jsTree两方面的问题。首先是挺打击我的是通过插话移动树结点的可能性，就像Windows资源管理器一样。另一个我不想涉及到的功能（但是已经包括在代码中了）是使用鼠标右键显示上下文菜单并且从那创建目录、重命名等等。我将不会在这篇文章里发布一个包括重命名、剪切和复制功能的完整解决方案，因为这仅做为如何使用jQuery和MVC的一个起点。

图1：

开始写代码

第一步，我们将使用一种特殊的格形式把我们的树定义成JSON类。

public class JsTreeModel
{
    public string data;
    public JsTreeAttribute attr;
    public string state = "open";
    public List<JsTreeModel> children;
}

public class JsTreeAttribute
{
    public string id;
}

在data属性里要存储树的标题，在ID属性里存储完整路径。树的最初状态要展开所有的叶子结点，也就是"open“所代表的意思。

我们将使用递归方法填充树，这其实并不复杂。

绑定树

我们将使用JavaScript代码绑定树。

$('#MainTree').jstree({
            "json_data": {
                "ajax": {
                    "url": "/Home/GetTreeData",
                    "type": "POST",
                    "dataType": "json",
                    "contentType": "application/json charset=utf-8"
                 }
            },
            "themes": {
                "theme": "default",
                "dots": false,
                "icons": true,
                "url": "/content/themes/default/style.css"
            },

            "plugins": ["themes", "json_data", "dnd", "contextmenu", "ui", "crrm"]

        });
public class JsTreeAttribute{    public string id;}

正如我们已经知道的，”dnd"代表“拖放”。

如下代码完成拖放操作：

$('#MainTree').bind("move_node.jstree", function (e, data) {
        data.rslt.o.each(function (i) {
            $.ajax({
                async: false,
                type: 'POST',
                url: "/Home/MoveData",
                data: {
                    "path": $(this).attr("id"),
                    "destination": data.rslt.np.attr("id")
                },
                success: function (r) {
                   Refresh();
                }
            });
        });
    });

在控制器端，我们必须使用：

[HttpPost]
public ActionResult MoveData(string path, string destination)
{
   // get the file attributes for file or directory
    FileAttributes attPath = System.IO.File.GetAttributes(path);

    FileAttributes attDestination = System.IO.File.GetAttributes(path);

    FileInfo fi = new FileInfo(path);

   //detect whether its a directory or file
   if ((attPath & FileAttributes.Directory) == FileAttributes.Directory)
    {
       if((attDestination & FileAttributes.Directory)==FileAttributes.Directory)
       {
           MoveDirectory(path, destination);
       }
    }
    else
    {
        System.IO.File.Move(path, destination + "\\" + fi.Name);
    }
    AlreadyPopulated = false;
    return null;   
}

我不得不找其他的方法去移动目录，因为微软的“Directory.Move"并不能运行在所有的情况。再这，这只是一个初级教程，还并不想把它做成完整教程。