Dynatree与ASP.NET MVC [英] Dynatree with ASP.NET MVC

问题描述

有没有人得到了使用Dynatree插件与MVC中的任何例子吗？我一直在角力与它没有太大的进展。我有它返回一个JsonResult（但在基础表中选择所有列，不知道这是问题），并在我的initajax电话，所有我做的是调用此方法的操作方法。

Has anybody got any examples of using the Dynatree plugin with MVC? I have been wrestling with it without much progress. I have an action method which returns a JsonResult (but selects all columns in the underlying table, not sure if this is the problem) and in my initajax call , all I'm doing is calling this method.

如果这不是太麻烦了，我找了样品视图和控制器action方法。

If it's not too much trouble, I am looking for sample View and Controller action methods.

在此先感谢您的帮助。

推荐答案

您需要创建一个对象序列化节点如

You need to create an object to serialize the nodes eg.

public interface ITreeItem
{
}


    /// <summary>
    /// Tree Item Leaf.
    /// </summary>
    public class TreeItemLeaf :ITreeItem
    {
        /// <summary>
        /// Gets the Title.
        /// </summary>
        public string title;

        /// <summary>
        /// Gets the Tooltip.
        /// </summary>
        public string tooltip;

        /// <summary>
        /// Gets the key.
        /// </summary>
        public string key;

        /// <summary>
        /// Gets the Data.
        /// </summary>
        public string addClass;

        /// <summary>
        /// Gets the Children.
        /// </summary>
        public IList<ITreeItem> children;

        /// <summary>
        /// Gets the rel attr.
        /// </summary>
        public string rel;

        /// <summary>
        /// Gets the State.
        /// </summary>
        public bool isFolder;

        /// <summary>
        /// Gets the State.
        /// </summary>
        public bool isLazy;

        /// <summary>
        /// Initializes a new instance of the <see cref="TreeItemLeaf"/> class.
        /// </summary>
        public TreeItemLeaf()
        {
            children = new List<ITreeItem>();
        }
    /// <summary>
    /// Initializes a new instance of the <see cref="TreeItemLeaf"/> class.
    /// </summary>
    /// <param name="type">The type of node.</param>
    /// <param name="id">The Id of the node.</param>
    /// <param name="title">The Title of the node.</param>
    /// <param name="tooltip">The Tooltip of the node.</param>
    public TreeItemLeaf(String type, Guid id, String title, String tooltip)
    {
        key = id.ToString();
        this.title = title;
        isFolder = false;
        isLazy = false;
        this.tooltip = tooltip;
        children = new List<ITreeItem>();
}

}


   /// <summary>
    /// Tree Item.
    /// </summary>
    public class TreeItem : TreeItemLeaf
    {
        /// <summary>
        /// Gets the State.
        /// </summary>
        public new bool isFolder;

        /// <summary>
        /// Initializes a new instance of the <see cref="TreeItem"/> class.
        /// </summary>
        public TreeItem() : base()
        {
        }

        /// <summary>
        /// Initializes a new instance of the <see cref="TreeItem"/> class.
        /// </summary>
        /// <param name="type">The type of node.</param>
        /// <param name="id">The Id of the node.</param>
        /// <param name="title">The Title of the node.</param>
        /// <param name="tooltip">The tooltip of the node.</param>
        public TreeItem(String type, Guid id, String title, String tooltip) : base(type, id, title, tooltip)
        {
            isFolder = true;
            isLazy = true;
        }

    }

一旦你有了这个，你可以返回一个 JSON（IList的＆LT; ITreeItem＆GT;），你需要从你的结果建立..

Once you have this, you can return a Json(IList<ITreeItem>) which you will need to build up from your results..

如果你去Dynatee演示 http://wwwendt.de/tech/dynatree /doc/samples.html ，您可以使用Firefox / Firebug的研究HTTP请求，看看究竟是什么在被传递和返回。

If you go to the Dynatee demo http://wwwendt.de/tech/dynatree/doc/samples.html , you can use Firefox/Firebug to study the HTTP requests to see exactly what is being passed in and returned.

我在视图树如下：

        // --- Initialize first Dynatree -------------------------------------------
        $("#tree").dynatree({
            fx: { height: "toggle", duration: 500 },
            selectMode: 1,
            clickFolderMode: 1,
            children : @Html.Raw(String.Format("{0}", ViewData["tree"]).Replace("\"children\":[],", "")),
            onLazyRead: function (node) {
                node.appendAjax({ 
                    url: "@Url.Action("treedata", "tree")",
                    type: "GET",
                    data: { "id": node.data.key, // Optional url arguments
                        "mode": "all"
                    },
                     error: function(node, XMLHttpRequest, textStatus, errorThrown) {

                               }
                     }
                });
            }, //.... cut short for brevity

我embeding在初始树的状态的孩子的一部分。和阿贾克斯阅读正在建立中的onLazyRead：部分

I am embeding the initial tree state in the "children:" part. And the Ajax reading is being set up in the "onLazyRead:" part.

我的Ajax调用是：

    public JsonResult TreeData(FormCollection form)
    {
        return GetTreeData(Request.QueryString["id"], Request.QueryString["uitype"]);
    }

该GetTreeData（）函数返回JSON（ITreeItem）;

The GetTreeData() function returns Json(ITreeItem);

我会建议你使用Firefox / Firebug的和它的NET功能来看看是怎么回事，并回来了。

I would recommend you use Firefox/Firebug and its "NET" function to see what is going and coming back.

希望有所帮助。

这篇关于Dynatree与ASP.NET MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！