asp.net-mvc ASP.NET MVC 3 树状视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5519934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ASP.NET MVC 3 Treeview
提问by James
I need to display a Treeview in my MVC3 application. There will be a self referencing hierarchical table (Folders) and another table linked to it (Documents.) (So Folders can have N-subFolders and any folder/sub folder can have many documents.)
我需要在我的 MVC3 应用程序中显示一个 Treeview。将有一个自引用分层表（文件夹）和另一个链接到它的表（文档）。（因此文件夹可以有 N 个子文件夹，任何文件夹/子文件夹都可以有许多文档。）
I have looked into using third party vendors such as Telerik, DJME and MVC Controls Toolkit. While all nice packages, I'm uneasy about the licences, and since i'm new to MVC (and programming in general,) I find their documentation lacking to get the right display working.
我曾考虑使用第三方供应商，例如 Telerik、DJME 和 MVC Controls Toolkit。虽然都是不错的软件包，但我对许可证感到不安，而且由于我是 MVC（以及一般的编程）的新手，我发现他们的文档缺乏使正确的显示正常工作。
I've also looked at the heavily referenced blogs on TreeViews:
我还查看了 TreeViews 上被大量引用的博客：
TreeViewHelperand the Recursive Partial View
In addition to the other less referenced articles (The top 3 are also very informative):
除了其他引用较少的文章（前 3 篇也很有参考价值）：
- http://tpeczek.com/2010/01/asynchronous-treeview-in-aspnet-mvc.html
- http://mikehadlow.blogspot.com/2008/10/rendering-tree-view-using-mvc-framework.html
- http://www.tek-tips.com/viewthread.cfm?qid=1637392&page=4
- http://weblogs.asp.net/jigardesai/archive/2008/02/04/display-hierarchical-data-in-asp-net-mvc-framework.aspx
- http://www.jigar.net/articles/viewhtmlcontent311.aspx
- http://help.syncfusion.com/ug_82/ASP.NETMVCUI_Tools/CreatingATreeViewControl.html
- http://tpeczek.com/2010/01/asynchronous-treeview-in-aspnet-mvc.html
- http://mikehadlow.blogspot.com/2008/10/rendering-tree-view-using-mvc-framework.html
- http://www.tek-tips.com/viewthread.cfm?qid=1637392&page=4
- http://weblogs.asp.net/jigardesai/archive/2008/02/04/display-hierarchical-data-in-asp-net-mvc-framework.aspx
- http://www.jigar.net/articles/viewhtmlcontent311.aspx
- http://help.syncfusion.com/ug_82/ASP.NETMVCUI_Tools/CreatingATreeViewControl.html
I would like to use either the TreeViewHelper or the Recursive Partial View Method.
However, in the TreeViewHelper, I can't make it pull data from the second table (ie. I can only make it list the Files, but I'm not sure how to have it list the Documents for each File.)
For the Recursive Partial View, I'm still at a loss in how to convert this to MVC3 and also general implementation. I did find a post (forums.asp.net/t/1652809.aspx/1?treeview+with+mvc+3) that gives an explanation of how to convert a bit of it to MVC3, but i'm still unclear of what to do with it. I keep getting the error for the Partial view: Cannot implicitly Convert type 'void' to type 'object'
我想使用 TreeViewHelper 或递归局部视图方法。
但是，在 TreeViewHelper 中，我无法让它从第二个表中提取数据（即，我只能让它列出文件，但我不确定如何让它列出每个文件的文档。）
对于递归部分视图，我仍然不知道如何将其转换为 MVC3 以及一般实现。我确实找到了一个帖子（forums.asp.net/t/1652809.aspx/1?treeview+with+mvc+3），其中解释了如何将其中的一部分转换为 MVC3，但我仍然不清楚怎么办。我不断收到部分视图的错误：无法隐式将类型“void”转换为“对象”
Like I said before I'm new to MVC3 and would like insight in which method would work best for my scenario and how to implement it.
就像我在刚接触 MVC3 之前所说的那样，我想了解哪种方法最适合我的场景以及如何实现它。
采纳答案by James
In case anyone is wondering, the way I solved this problem was to use a recursive partial view. The problem I has having with it was that I didn't have the self referencing relationship set up in SQL/EF (I just had the ParentID field which wasn't linked to the Primary Key.) I also integrated jsTree as this has a lot of slick functionality such as search.
如果有人想知道，我解决这个问题的方法是使用递归局部视图。我遇到的问题是我没有在 SQL/EF 中设置自引用关系（我只有未链接到主键的 ParentID 字段。）我还集成了 jsTree，因为它有一个很多光滑的功能，如搜索。
Like I said in the comment above, @Html.Action and @Html.Partial work instead of @Html.RenderAction and @Html.RenderPartial.
就像我在上面的评论中所说的，@Html.Action 和@Html.Partial 代替@Html.RenderAction 和@Html.RenderPartial 工作。
回答by Francesco Abbruzzese
give a look to the edit/add/delete/node move templated TreeView of my Mvc Controls Toolkit here: http://mvccontrolstoolkit.codeplex.com/wikipage?title=TreeView
在此处查看我的 Mvc 控件工具包的编辑/添加/删除/节点移动模板化 TreeView：http://mvccontrolstoolkit.codeplex.com/wikipage?title=TreeView
回答by arjthakur
$(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");
}
public class ChartController : Controller { // // GET: /Chart/ ChartContext ctx = new ChartContext(); public ActionResult Index() { return View(); } public ActionResult OrgChart() { return PartialView("_OrgChart", ctx.Cards.ToList()); } public ActionResult ChartMember(int id, int? ParentId = null) { Card card = new Card(); if (id > 0) card = ctx.Cards.Find(id); else card.ParentId = ParentId; return PartialView("_ChartMember", card); } public ActionResult SaveMember(Card card) { if (card.id == 0) ctx.Cards.Add(card); else ctx.Entry(card).State = System.Data.EntityState.Modified; ctx.SaveChanges(); return Json(true, JsonRequestBehavior.AllowGet); } }
public class ChartController : Controller { // // GET: /Chart/ ChartContext ctx = new ChartContext(); 公共 ActionResult 索引（）{ 返回视图（）；} public ActionResult OrgChart() { return PartialView("_OrgChart", ctx.Cards.ToList()); } public ActionResult ChartMember(int id, int?ParentId = null) { Card card = new Card(); if (id > 0) card = ctx.Cards.Find(id); 否则 card.ParentId = ParentId; return PartialView("_ChartMember", card); } public ActionResult SaveMember(Card card) { if (card.id == 0) ctx.Cards.Add(card); 否则 ctx.Entry(card).State = System. 数据.EntityState.Modified; ctx.SaveChanges(); 返回 Json(true, JsonRequestBehavior.AllowGet); } }
