jQuery TreeView with ASP.NET MVC how to pass argument to url

Question

Here's the problem:

I'm trying to do an Active Directory Explorer with Asynch. jQuery TreeView. In standard ASP.NEt it was fairly easy with builtin TreeView and some events in code-behind.

The problem is that I don't exactly know how can I pass different arguments depending on which treeview leaf is being expanded. Based on this example http://view.jquery.com/trunk/plugins/treeview/demo/async.html I can see that there is a very simple if with PHP and the 'root' argument is passed on page load.

Eg.

I have this tree:

+A
+B
+C

and i want to call MyController/MyAction/B when expanding B. Should I add some method in

<script type="text/javascript">
    $(document).ready(function(){
        $("#black").treeview({
            url: "source.php"
                        toggle: do_something_here?
        })
    });
    </script>

I'm kinda stuck in here, so any help would be appreciated.

Answer 1

As yoiu can see if you use Firebug with the demo, expanding the node fires a GET request for data:

http://view.jquery.com/trunk/plugins/treeview/demo/source.php?root=36

The response is just JSON:

[
    {
        "text": "1. Review of existing structures",
        "expanded": true,
        "children":
        [
            {
                "text": "1.1 jQuery core"
            },
            {
                "text": "1.2 metaplugins"
            }
        ]
    },
    {
        "text": "2. Wrapper plugins"
    },
    {
        "text": "3. Summary"
    },
    {
        "text": "4. Questions and answers"
    }

]

So you could write an MVC action (don't use .php in the URI, though!):

public JsonResult Source(string root)
{
    var model = new object[]
        {
            new 
            {
                text = "1. Review of existing structures",
                expanded = true,
                children = new object[] 
                {
                    new
                    {
                         text = "1.1 jQuery core",
                    },
                    new
                    {
                         text = "1.2 metaplugins"
                    }
              }
          },
          new
          {
              text = "2. Wrapper plugins"
          },
          new
          {
              text = "3. Summary"
          },
          new
          {
              text = "4. Questions and answers"
          }
      };
   return Json(model);
}

From here, it should be obvious how to switch based on the root argument.