使用asp.net mvc和Jquery实现文件目录的树型结构

  本文章主要介绍jquery插件中的treeview插件通过ajax异步从服务器上下载所需json字符串的实现，服务器端使用asp.net
mvc实现。
treeview插件的官方demo地址：http://jquery.bassistance.de/treeview/demo/

从以上代码中可以看出，获取此视图后，当页面就绪时将调用GetFileTree
action方法来获取treeview插件所需要的json字符串，并且自动生成树形。
注：代码中引用的js和css文件，在下载的treeview插件包中可以找到。
//在Views/Home/Index.aspx代码如下

<asp:Content ID="content3" ContentPlaceHolderID="HeadContent" runat="server">
     <link rel="stylesheet" href="http://www.cnblogs.com/Content/jquery.treeview.css" />
    <script src="http://www.cnblogs.com/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery.treeview.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery.treeview.async.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#black").treeview({
                url: '<%=Url.Action("GetFileTree","Home") %>',
                persist: "location",
                collapsed: true,
                unique: true
            });
        })
 </script>
</asp:Content>

//HomeController文件定义如下

[NonAction]
    public  void ListFolder(string sDir, List<FileNode> fileList)
    {
        // 检测目录是否存在
        if (Directory.Exists(sDir))
        {
            // 使用一个绝对路径初始化表示目录的对象
            string[] files = Directory.GetFiles(sDir);
            foreach (string s in files)
            {
                FileNode fn = new FileNode();
                fn.text = s.Substring(s.LastIndexOf("\\")+1);
                fn.classes = "file";
                fileList.Add(fn);
            }

            string[] fileNames = Directory.GetDirectories(sDir);
            // 遍历目录下面的一级子目录               
            for (int i = 0; i < fileNames.Length; i++)
            {
                FileNode fn = new FileNode();
                fn.text = fileNames[i].Substring(fileNames[i].LastIndexOf("\\") + 1);
                fn.classes = "folder";
               // fn.url = fn.text; 
                fileList.Add(fn);
                ListFolder(fileNames[i], fn.children);
            }
        }
        else
        {
            return;
        }
    }
    public string GetFileTree()
    {
        string strRoot = Server.MapPath("~/");
            
        List<FileNode> fileRoot = new List<FileNode>();
        ListFolder(strRoot, fileRoot);
        StringBuilder result = new StringBuilder();
        new JavaScriptSerializer().Serialize(fileRoot, result);
        result.Replace("\"id\":null,", "");
        result.Replace(",\"expanded\":false", "");
        result.Replace(",\"hasChildren\":false", "");
        result.Replace(",\"classes\":null", "");
        result.Replace(",\"children\":null", "");
        return result.ToString();
    }
    public ActionResult Index()
    {
        ViewData["Message"] = "Welcome to ASP.NET MVC!";

        return View();
    }

 FileNode类的各种属性名称是根据jquery.treeview.async.js处理动态加载Json格式数据,并生成TreeView的代码