从C#MVC控制器加载EXT JS Tree面板

时间:2011-03-24 13:43:28

标签: c# javascript asp.net-mvc extjs

我很幸运使用C#MVC 2&amp ;;填充EXT JS组合框和列表框。 3,但现在我正在尝试解决加载EXT JS树面板的问题。到目前为止,我无法从我放在控制器上的任何东西中加载树。

现在我正在尝试简单地从控制器返回静态数据,例如:

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

......我显然遇到了麻烦,但这是一个起点(在某种意义上说,什么不起作用往往会导致什么工作)。我现在意识到我甚至没有从控制器加载树的良好起点。我的想法是,我需要从数据库返回原始数据,并通过循环将其全部格式化为“Json”类型可以使用的格式。我没有在网上找到很多关于这个主题的内容,所以任何人都可以给予的指导将非常感激。如果我有任何成功,我会在这里跟进。谢谢!

3 个答案:

答案 0 :(得分:0)

这是我用来加载Ext Tree的一些JavaScript - 我知道这不是你正在做的100%,但希望它有所帮助:

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

这是我用来构建JSON的一些C#。 Soryr向您抛出厨房水槽 - 再次,希望其中一些可以帮助您:)

BTW - 我使用了一些不同的Web小部件工具包,EXT是我最喜欢的 - 这是一个很好的选择!

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

答案 1 :(得分:0)

这是一个有点暴力的方法(它还没有完成;它需要更多的抽象,加上我不喜欢2个LINQ语句 - 它应该只需要1个),但它确实用有效的Json加载树数据。请分享可能会弹出这种方法的任何红旗,或者如果我正朝着一条小路走去。

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

控制器仅包含:

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

            return Content(result);
        }

答案 2 :(得分:0)

下面的代码对上面的代码有所改进,虽然仍然很粗糙,但它完美呈现了树:

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

我还发现了其他的东西:如果任何节点具有相同的ID,则EXT JS树可能会很奇怪,如果父节点和子节点具有匹配的ID,则尤其。当我第一次渲染这棵树时,第一个父亲在打开第二个父亲时就不会打开。结果显示其父ID与其子ID之一匹配。