How do I create a treeview in asp.net mvc 2?

Question

I have a couple of database tables, one for Folders and one for Files, with the following schemas.

Folders

• FolderID
• FolderName
• DateCreated
• ParentFolderID

Files

• FileID
• FileName
• FileExtension
• Description
• FolderID
• DateUploaded
• DownloadCount

Basically I need to know how I can query these in such a way that the JSON returned, could be used with the jQuery Treeview plugin , or jqTree .

I have two classes, File and Folder, that can be used to create File and Folder objects, from the data returned from the database, but I'm not sure how to go about returning it as json, so that folders contain their sub-folders and all the files show up in the correct folders.

Any help would be appreciated, I search and searched, but all I could find was an example that used ASP.NET MVC 3, and unfortunately I'm stuck using ASP.NET MVC2 on this project.

Thanks in advance.

public class Folder
{
    public int FolderID { get; set; }
    public string FolderName { get; set; }        
    public IList<Folder> Subfolders { get; set; }
    public IList<File> Files { get; set; } 
    public bool IsRootFolder
    {
        get { return Subfolders.Count == 0; }
    }
}

public class File
{
    public int FileID { get; set; }
    public int FolderID { get; set; }
    public string FileName { get; set; }
    public string Exstension { get; set; }
    public string Description { get; set; }
    public DateTime? UploadDate { get; set; }
    public int DownloadCount { get; set; }
}

Answer 1

The HTML for a treeview is just nested unordered lists (ul and li elements). So just generate this from your JSON data, then style the outermost list using your plugin.

Eg if you're using the jQuery treeview plugin, you could generate:

<ul id="tree">
    <li>Node 1</li>
    <li>Node 2</li>
        <ul>
            <li>Node 2.1</li>
            <li>Node 2.2</li>
        </ul>
    <li>Node 3</li>
</ul>

then style using:

$("#tree").treeview();