ASP.NET MVC 3 Treeview

Question

我需要在我的MVC3應用程序中顯示一個Treeview。將會有一個自引用分層表（文件夾）和另一個錶鏈接到它（文檔）（因此文件夾可以有N-subFolders和任何文件夾/子文件夾可以有很多文件。）

我已經看過使用第三方供應商，如Telerik，DJME和MVC Controls Toolkit。雖然所有漂亮的軟件包，我對許可證感到不安，並且因爲我是MVC（通常編程）的新手，我發現他們的文檔缺乏正確的顯示器工作。

我也看了大量引用博客上的TreeView：

TreeViewHelper 和Recursive Partial View

除了其他不太引用的文章（前3名也非常豐富）：

1. http://tpeczek.com/2010/01/asynchronous-treeview-in-aspnet-mvc.html
2. http://mikehadlow.blogspot.com/2008/10/rendering-tree-view-using-mvc-framework.html
3. http://www.tek-tips.com/viewthread.cfm?qid=1637392&page=4
4. http://weblogs.asp.net/jigardesai/archive/2008/02/04/display-hierarchical-data-in-asp-net-mvc-framework.aspx
5. http://www.jigar.net/articles/viewhtmlcontent311.aspx
6. http://help.syncfusion.com/ug_82/ASP.NETMVCUI_Tools/CreatingATreeViewControl.html

我想請使用TreeViewHelper或遞歸管窺方法。
但是，在TreeViewHelper中，我無法從第二張表中拉出數據（即我只能列出文件，但我不知道如何讓它列出每個文件的文檔。）
對於遞歸部分視圖，我仍然在如何將其轉換爲MVC3和一般實現方面的損失。我找到了一個帖子（forums.asp.net/t/1652809.aspx/1?treeview+with+mvc+3），它給出瞭如何將它轉換爲MVC3的解釋，但我仍然不清楚如何處理它。我不斷收到錯誤的局部視圖：不能隱式轉換類型「無效」鍵入「對象」

就像我之前說我是新來的MVC3，並想深入瞭解在該方法將工作最適合我場景以及如何實現它。

Answer 1

如果有人想知道，我解決這個問題的方式是使用遞歸局部視圖。我遇到的問題是，我沒有在SQL/EF中設置自引用關係（我只有ParentID字段沒有鏈接到主鍵）。我還集成了jsTree，因爲它有一個很多漂亮的功能，如搜索。

就像我在上面的評論中所說的，@ Html.Action和@ Html.Partial不是@ Html.RenderAction和@ Html.RenderPartial。

Answer 2

給看看到編輯/添加/刪除我的MVC模板樹視圖/節點移動到此處控制工具包：http://mvccontrolstoolkit.codeplex.com/wikipage?title=TreeView

Answer 3

$(document).ready(function() { 
     BindChart(); 
    }); 
    function BindChart() { 
     $("#org").jOrgChart({ 
      chartElement: '#chart', 
      dragAndDrop: true 
     }); 
    } 
    $(".cardadd").live("click", function() 
    { 
     var data = { id: 0 , ParentId:$(this).parent().data('cardid')}; 
     OpenForminWindow('divfrmChartMember', 'divChartMember', 'frmChartMember', chart.ChartMember, data, '', 400, 1000); 
    }); 
    $(".cardedit").live("click", function() { 
     var data = { id: $(this).parent().data('cardid')}; 
     OpenForminWindow('divfrmChartMember', 'divChartMember', 'frmChartMember', chart.ChartMember, data, '', 400, 1000); 
    }); 

    $(".cardremove").live("click", function() { 

    }); 
    function OpenForminWindow(popupId, targetDivId, formid, url, data, callbackfunc, heigth, width) { 
     $.ajax({ 
      type: "GET", 
      url: url, 
      data: data, 
      cache: false, 
      success: function (data) { 
       $('#' + targetDivId).html(data); 
       $('#' + formid).removeData('validator'); 
       $('#' + formid).removeData('unobtrusiveValidation'); 
       $('#' + formid).each(function() { $.data($(this)[0], 'validator', false); }); //enable to display the error messages 
       $.validator.unobtrusive.parse('#' + formid); 
       if (callbackfunc) 
        return callbackfunc(); 
      } 
     }); 

     $("#" + popupId).dialog({ 
      modal: true, 
      height: heigth, 
      width: width, 
      beforeClose: function (event, ui) { 
       if (typeof refresh !== 'undefined' && refresh == true) 
        ReloadCurrentPage(); 
      } 
     }); 
    } 
    $('#frmChartMember').live('submit', function (e) { 
     SubmitAjaxForm($(this).attr('id'), chart.AddMember, ReloadChart); 
     e.preventDefault(); 
    }); 
    function SubmitAjaxForm(formId, url, callBack) { 
     $.ajax({ 
      url: url, 
      type: 'post', 
      cache: false, 
      data: $('#' + formId).serialize(), 
      success: function (data) { 
       return callBack(data); 
      }, 
     }); 
    } 
    function ReloadChart(result) { 
     ClosePopup('divfrmChartMember'); 
     $.ajax({ 
      type: 'GET', 
      url: chart.ChartList, 
      cache: false, 
      success: function (result) { 
       $("#orgChart").html(result); 
       BindChart(); 

      } 
     }); 
    } 
    function ClosePopup(divid) { 
     $("#" + divid).dialog("close"); 

    } 

公共類ChartController：控制器 {// // GET：/圖表/ ChartContext ctx = new ChartContext（）; public ActionResult索引（） { return View（）; } public ActionResult OrgChart（） { return PartialView（「_ OrgChart」，ctx.Cards.ToList（））; } public ActionResult ChartMember（int id，int？ParentId = null） { Card card = new Card（）;如果（id> 0） card = ctx.Cards.Find（id）; else card.ParentId = ParentId; return PartialView（「_ ChartMember」，card）; } public ActionResult SaveMember（卡片） { if（card.id == 0） ctx.Cards.Add（card）; else ctx.Entry（card）.State = System.Data.EntityState.Modified; ctx.SaveChanges（）; return Json（true，JsonRequestBehavior.AllowGet）; }}