从C＃MVC控制器加载EXT JS树面板

Question

I've had good luck populating EXT JS combo boxes and list boxes using C# MVC 2 & 3, but now I'm trying to tackle loading an EXT JS tree panel. So far I can't get the tree to load from anything I put on the controller.

Right now I'm experimenting with simply returning static data from the controller, such as:

 public  ActionResult TreeFill()
        {
            var stuff = "[{ text: Type1, id: 100, leaf: false, cls: 'folder', children: [{ text: 'Client 1', id: 1, leaf: true, cls: 'file' },{ text: 'Client 2', id: 2, leaf: true, cls: 'file' },{ text: 'Client 3', id: 3, leaf: true, cls: 'file' },{ text: 'Client 4', id: 4, leaf: true, cls: 'file' }]}";

            return Json(new {stuff},JsonRequestBehavior.AllowGet);
        }

...and I'm obviously having troubles with this, but it was a starting point (in the sense that what doesn't work often leads to what will work). I'm now realizing that I don't even have a great starting point for tree loading from a controller. My inkling is that I'll need to return the raw data from the database and format it all via a loop into a format that the "Json" type can use. I'm not finding a lot online about this topic, so any guidance anyone can give will be much appreciated. If I have any success, I'll follow up here. Thank you!

Answer 1

Here's some JavaScript I used to load the Ext Tree - I know this isn't 100% what you're doing, but hopefully it helps:

tree.setRootNode(new Ext.tree.AsyncTreeNode({ id: 0, text: "Subjects", expandable: false, expanded: true }));
loadTree(function(d) {
    tree.setRootNode(new Ext.tree.AsyncTreeNode({ id: 0, text: "Subjects", children: d, expandable: false, expanded: true }));
});

function loadTree(callback) {
    runAjax("MyServiceBlahBlahBlah.asmx/Foo", "{ItemType:" + ItemType + "}",
        function(data) {
            cleanTree(data.d);
            callback(data.d);
        });
}

//hmmm - cleanTree isn't a good name for this function, not sure what I was thinking when I named it...
function cleanTree(data, expand) {
    for (var i = 0; i < data.length; i++) {
        data[i].checked = false;
        if (expand) data[i].expanded = true;

        cleanTree(data[i].children, expand);
    }
}

And here's some C# I use to build up the JSON. Soryr to throw the kitchen sink at you - again, hopefully some of this will help you out :)

BTW - I've used a few different web widget toolkits, and EXT is by far my favorite - so good choice!

    public static object GetSubjectHierarchyJSON(Func<vwHierarchicalSubject, bool> InitialPredicate, HierarchicalSubjectDAO DAO, int ItemType) {
        List<LINQLayer.vwHierarchicalSubject> TempSource = DAO.GetAll(DAO.UserID, ItemType).
            OrderBy(V => V.ParentSubjectName).ThenBy(V => V.LevelNumber).ThenBy(V => V.SubjectName).ToList();

        var result = new List<object>();

        foreach (vwHierarchicalSubject V in TempSource.Where(InitialPredicate).OrderBy(v => v.SubjectName))
            result.Add(BuildJSON(V, TempSource));

        return result;
    }

    private static object BuildJSON(vwHierarchicalSubject V, List<vwHierarchicalSubject> TempSource) {
        IEnumerable<vwHierarchicalSubject> Children =
            TempSource.Where(x => x.ParentID.HasValue && x.ParentID.Value == V.id).OrderBy(v => v.SubjectName);

        int id = V.id;
        string subText = V.SubjectName.Replace("&", "&amp;");

        if (Children.Count() == 0)
            return new { id = V.id, text = subText, children = new List<object>(), expanded = true };
        else {
            var result = new { id = V.id, text = subText, children = new List<object>() };
            foreach (vwHierarchicalSubject vElement in Children)
                result.children.Add(BuildJSON(vElement, TempSource));
            return result;
        }
    }

Answer 2

This is a slightly brute force method (and it's not yet complete; it needs more abstractions, plus I don't like the 2 LINQ statements - it should only need 1), but it does load Tree Data with valid Json. Please share any red flags that might pop up with this method or if I'm heading down an icky path.

public string TreeLoader()
    {
        var clis = TreeLoad();

        var parent = "[{ \"text\": \"Pharm\", \"id\": 100, \"leaf\": false, \"cls\": \"folder\", \"children\": [";

        for (int i = 1; i < clis.Count(); i++)
        {
            parent += "{\"text\": \"" + (from c in clis where c.id == i select c.text).SingleOrDefault() + "\"" +
                      ", \"id\":" + (from c in clis where c.id == i select c.id).SingleOrDefault() +
                      ", \"leaf\": true, \"cls\": \"file\"}";

            if (i < clis.Count() - 1)
            {
                parent += ", ";
            }
        }

        parent += "]}]";

        return parent;
    }

The controller only contains this:

public ActionResult TreeSampleFill()
        {
            var result = repo.TreeLoader();

            return Content(result);
        }

Answer 3

The following code somewhat improves on the code above and, though still rough, it's rendering the tree perfectly:

 public List<TreeNode> TreeTest()
    {
        var results1 = (from c in _Context.v_EntityTrees
                    where c.OU_TYPE_CD == "Type1"
                    orderby c.text
                    select c).ToList();

        var results2 = (from d in _Context.v_EntityTrees
                   where d.OU_TYPE_CD == "Type2"
                   orderby d.text
                   select d).ToList();

        TreeNode node = new TreeNode();
        List<TreeNode> nodelist = new List<TreeNode>();
        nodelist.Add(new TreeNode { text = "Parent1", cls = "folder", leaf = false, id = 1000, children = results1 });
        nodelist.Add(new TreeNode { text = "Parent2", cls = "folder", leaf = false, id = 2000, children = results2 });

        return nodelist;
    }

Something else I also discovered: an EXT JS tree may act strange if any of the nodes have identical ids, especially if a parent and a child have matching IDs. When I first rendered this tree the first parent would not open once the second parent was opened. Turns out its parent ID matched one of its child ids.