Dynatree與ASP.NET MVC

Question

有沒有人有任何使用MVC的Dynatree插件的例子？我一直在摔跤，沒有太多進展。我有一個操作方法返回一個JsonResult（但選擇底層表中的所有列，不知道這是否是問題），在我的initajax調用中，我所做的只是調用此方法。

如果沒有太多的麻煩，我正在尋找示例視圖和控制器操作方法。

預先感謝任何幫助

Answer 1

你需要創建一個對象序列化的節點如。

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<ITreeItem>)，你將需要從你的結果建立..

如果你去Dynatee演示http://wwwendt.de/tech/dynatree/doc/samples.html，您可以使用Firefox/Firebug的研究HTTP請求確切地查看傳入並返回的內容。

我在視圖樹如下：

 // --- 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在初始樹的狀態「孩子：」部分。 Ajax閱讀正在「onLazyRead：」部分中設置。

我的Ajax調用是：

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

的GetTreeData（）函數返回JSON（ITreeItem）;

我會建議你使用Firefox/Firebug及其「NET」功能來查看將要發生的事情。

希望有所幫助。

Answer 2

我剛剛找到Dynatree，我在我的MVC項目中使用它。這是我如何做到的一個例子。我決定直接將數據直接放在視圖中，如basic example。

我的數據是加利福尼亞州的城市列表，按縣分組。

我控制器只是簡單地傳遞一個視圖模型我的看法和視圖模型具有CitiesAvailable屬性：

public IEnumerable<City> CitiesAvailable { get; set; } 

我的地盤對象列表是從數據庫（EF4）抓住和我市實際對象是以下：

在我看來，我創建一個包含縣的名單和他們的城市的UL（我使用的剃鬚刀，但web表單應該很容易弄清楚）：

<div id="tree"> 
    <ul id="treedata" style="display: none;"> 
     @foreach (var county in Model.CitiesAvailable.Select(c => c.County).Distinct().OrderBy(c => c)) 
     { 
      <li data="icon: 'false'">@county 
       <ul> 
        @foreach (var city in Model.CitiesAvailable.Where(c => c.County == county).OrderBy(c => c.Name)) 
        { 
         <li data="icon: 'false'" id="@city.Id">@city.Name</li> 
        } 
       </ul> 
      </li> 
     } 
    </ul> 
</div> 

然後在我的JavaScript我使用以下命令：

$("#tree").dynatree({ 
    checkbox: true, 
    selectMode: 3, 
    fx: { height: "toggle", duration: 200 } 
}); 

它的偉大工程！這裏有幾項內容輸出的樣本檢查：

讓我知道，如果有什麼是沒有意義的。

請注意，我在我的li元素中使用data =「icon：'false'」，因爲我不需要這些圖標。

Answer 3

你可以簡單地將對象轉換爲JSON字符串，並將其發送給服務器作爲文本

這是js代碼：

var dict = $("#tree").dynatree("getTree").toDict(); 
var postData = JSON.stringify(dict["children"]); 
$.ajax({ type: "POST", 
        url: "/UpdateServer/SaveUserTree", 
        data: {tree:postData}, 
        dataType: "html" 
       }); 

這是控制器代碼：

[HttpPost] 
    public void SaveUserTree(string tree = "") 
    { 

     HttpContext.Application["UserTree"] = tree; 

    } 

您可以將此字符串數據發送回客戶端

if (HttpContext.Application["UserTree"] != null) 
      ViewBag.TreeData = new  HtmlString(HttpContext.Application["UserTree"].ToString()); 

最後，你可以在初始的樹，在此數據視圖：

var treeData= @(ViewBag.TreeData) 

$(function(){ 

    // --- Initialize sample trees 
    $("#tree").dynatree({ 
     children: treeData 
    }); 

}）;