jsTree

在選擇項目時訪問ASP.NET MVC服務器端數據我使用jsTree來顯示我的ASP.NET MVC應用程序中的分層數據的樹結構。到目前爲止，我能夠訪問數據（通過返回JSON數據的控制器方法）並顯示樹。我也能夠選擇樹中的節點並且工作正常。下面是這樣做的jsTree代碼：jsTree

$('#tree'). 
    bind('select_node.jstree', function(event, data) { 
     alert("Node is selected."); 
    }). 
    jstree({ 
     "core": {}, 
     "json_data": { 
      "ajax": { 
       type: 'POST', 
       url: '/Scenario/TreeData', 
       data: "id=" + <%= Model.Scenario.ScenarioID %>, 
       success: function(data, textStatus, xhr) { 
        if(data.failed) { 
         window.location.href = data.redirectToUrl; 
        } 
       } 
      } 
     }, 
     "themes": { 
      "theme": "default", 
      "dots": true, 
      "icons": true 
     }, 
     "ui": { 
      "select_limit": 1 
     }, 
     "plugins": ["themes", "ui", "json_data"] 
    });

這裏是我的TreeData行動：

[HttpPost] 
public ActionResult TreeData(int id) 
{ 
    var tree = new JsTreeModel(); 

    Scenario scenario = repository.GetScenario(id); 
    if (scenario != null) 
    { 
     tree.data = new JsTreeData(); 

     // [snip] Do the work to build the tree. [/snip] 

     return Json(tree); 
    } 

    var jsonData = new 
    { 
     failed = true, 
     redirectToUrl = Url.Action("NotFound") 
    }; 
    return Json(jsonData); 
}

我在哪裏卡住，一旦我點擊一個節點上，我不確定如何檢索從我的應用程序（通過控制器）的特定節點的數據，顯示它（大概在一個局部視圖 - 我在這個時候創建的所有 - 強類型的部分視圖），然後提供選項來提交該部分查看回到服務器更新數據。

我不確定從哪裏開始。我想過的一個想法是擴展我的TreeModel類（C＃模型，這使得更容易爲樹建立JSON數據）在「data」值中增加更多參數，這可以讓我知道我試圖檢索哪個模型。但是，這似乎並不優雅。

我錯過了一些明顯的東西嗎？有人有其他建議嗎？謝謝！

來源

2011-02-11 JasCav

我最終弄清楚了這一點，並希望分享以防其他人想要做同樣的事情。

我首先將select_node.jstree事件綁定到我的樹上，然後構建樹（當然，所有的客戶端都完成了）。

$('#tree'). 
bind('select_node.jstree', function(event, data) { 
    var id = 1; // TODO - Get the ID from the current model. 
    var url = data.rslt.obj.children("a:eq(0)").attr("href"); 
    $.ajax({ 
     type: 'POST', 
     url: '/Scenario/' + url, 
     data: 'id=' + id, 
     success: function(data) { 
      $('#ajaxcontent').html(data); 
     } 
    }); 
}).jstree({ 
    "core": {}, 
    "json_data": { 
     "ajax": { 
      type: 'POST', 
      url: '/Scenario/TreeData', 
      data: "id=" + <%= Model.Scenario.ScenarioID % > , 
      success: function(data, textStatus, xhr) { 
       if (data.failed) { 
        window.location.href = data.redirectToUrl; 
       } 
      } 
     } 
    }, 
    "ui": { 
     "select_limit": 1 
    }, 
    "plugins": ["themes", "ui", "json_data"] 
});

請注意，我正在從節點獲取URL值。我不得不改變我的JsTreeModel，以便我可以更改節點上的href值。（JSON數據表示形式爲 - data.attr.href）我在構建方案時設置了此值。每個節點都有自己的URL。（我傳入了ID參數，所以我可以檢索正確的方案服務器端。根據您的需要，這可能需要或可能不需要）。

然後，我爲Controller中的每個URL創建一個操作。我做我需要做的數據，然後將其返回到頁面（通過前面顯示的AJAX調用）。這實際上是一個相當簡單的解決方案，現在我知道我在做什麼。但是，由於缺乏文檔，首先弄清楚是有點棘手的。

希望這可以幫助別人！

來源

2011-02-14 18:37:04 JasCav

回答

相關問題