Treeview structure in asp.net mvc with jQuery

I need to create a treeview structure using jQuery in asp.net mvc applicatiopn.

Let me describe my scenario: I have two tables - Document Template and Instructions Document template has different documents and instructions under these documents are there in Instructions table.

The DocumentTemplate tab开发者_Go百科le looks like

The Instructions table has DocId as foreign key and it looks like:

I want the tree with structure

TestDoc1 TestDoc1Instn1 TestDoc1Instn1.1 TestDoc2 TestDoc2Instn1 TestDoc2Instn2.1 TestDoc2Instn2.1.1 TestDoc2Instn2.2 TestDoc2Instn2.2.1 TestDoc2Instn2.2.2 TestDoc3 TestDoc3Instn1 TestDoc4 TestDoc4Instn1

Can any help me on this? Thanks for all help in prior.

---

I can propose two solutions for you (depending on how you want to represent your data): jQuery TreeView plugin (Usage sample for ASP.NET MVC) or jqGrid plugin TreeGrid functionality (Usage sample for ASP.NET MVC)

---

In my Mvc Controls Toolkit I have a TreeView server control. It allows also node editing, insertion of new nodes, and moving sub-tree into another location by dragging it with the mouse. All changes are reflected Automatically on data structures on the server side when the view is posted. Moreover all nodes are templated and the same tree can have different type of nodes. Give a look here: http://mvccontrolstoolkit.codeplex.com/wikipage?title=TreeView