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; }
}

What did you try? What didn't work?

John Saunders
– John Saunders

2012-10-29 22:05:40 +00:00
Commented Oct 29, 2012 at 22:05 — John Saunders
– John Saunders, Commented Oct 29, 2012 at 22:05

to StackOverflow · Accepted Answer · 2012-10-29 22:43:39Z

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.

E.g. 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();

answered Oct 29, 2012 at 22:43

to StackOverflow

125k34 gold badges212 silver badges345 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Carl Weis Over a year ago

Thanks, that's just what I needed to know. :)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related