ASP.NET MVC 3 树形视图答案

【问题标题】：ASP.NET MVC 3 TreeviewASP.NET MVC 3 树形视图
【发布时间】：2011-07-28 01:21:11
【问题描述】：

我需要在我的 MVC3 应用程序中显示一个 Treeview。将有一个自引用的分层表（文件夹）和另一个链接到它的表（文档）。（因此文件夹可以有 N 个子文件夹，任何文件夹/子文件夹都可以有很多文档。）

我研究过使用第三方供应商，例如 Telerik、DJME 和 MVC Controls Toolkit。虽然所有的软件包都很不错，但我对许可证感到不安，而且由于我是 MVC 的新手（以及一般的编程），我发现他们的文档缺乏让正确的显示工作。

我还查看了 TreeViews 上被大量引用的博客：

除了其他引用较少的文章（前3名也很丰富）：

我想使用 TreeViewHelper 或递归局部视图方法。
但是，在 TreeViewHelper 中，我无法让它从第二个表中提取数据（即，我只能让它列出文件，但我不确定如何让它列出每个文件的文档。）
对于递归局部视图，我仍然不知道如何将其转换为 MVC3 以及一般实现。我确实找到了一个帖子 (forums.asp.net/t/1652809.aspx/1?treeview+with+mvc+3) 解释了如何将它的一部分转换为 MVC3，但我仍然不清楚怎么办。我不断收到 Partial 视图的错误：无法将类型“void”隐式转换为类型“object”

就像我之前所说的，我是 MVC3 的新手，想了解哪种方法最适合我的场景以及如何实现它。

【问题讨论】：

通过分别使用 Html.Render 和 Html.Partial 而不是 Html.RenderAction 和 Html.RenderPartial，“无法隐式将类型 'void' 转换为类型 'object'”错误消失

标签： asp.net-mvc asp.net-mvc-3 treeview hierarchy

【解决方案1】：

如果有人想知道，我解决这个问题的方法是使用递归局部视图。我遇到的问题是我没有在 SQL/EF 中设置自引用关系（我只有 ParentID 字段没有链接到主键。）我还集成了 jsTree，因为它有一个很多漂亮的功能，如搜索。

就像我在上面的评论中所说，@Html.Action 和 @Html.Partial 工作，而不是 @Html.RenderAction 和 @Html.RenderPartial。

【讨论】：

【解决方案2】：

在此处查看我的 Mvc 控件工具包的编辑/添加/删除/节点移动模板化 TreeView：http://mvccontrolstoolkit.codeplex.com/wikipage?title=TreeView

【讨论】：

我还没有切换到 MVC 控件工具包中的 TreeView。但是，我需要在我的应用程序中加入一个更复杂的树结构；所以这看起来是一个不错的选择！虽然现在，树视图的文档很有意义，但当我刚开始时，文档是压倒性的。我会建议一个快速视频或简化示例来帮助所有孩子开始
目前唯一可用的示例是示例中包含的示例，该示例与 Codeplex 上的二进制分发一起提供。我们正在准备一个包含所有控件的演示网站。每个控件都会有一些带有相关源代码的工作示例......以类似于 jQuery UI 示例的方式。此外，我们与公司就生产易于使用的插件达成协议，这将使控件的使用更容易，更具体地说，它们将包含一组已配置的控件，这些控件组合在一起以完成更常见的用途，并使用主题滚轮对其进行样式设置。
我建议您首先阅读有关模板的部分：mvccontrolstoolkit.codeplex.com/… 然后阅读文档，并使用树视图的工作示例进行一些操作...如果您有问题，可以发布它们这里：mvccontrolstoolkit.codeplex.com/discussions
谢谢！我会看看那些。
我最近遇到的一个快速建议（这对我有一点帮助，也极大地帮助了刚开始接触 MVC 世界的同龄人）是 MvcContrib Grid userinexperience.com/?p=283 的屏幕投射我发现当有视频出现时，初学者会跳跃式跳跃。

【解决方案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 : 控制器 { // // 获取：/图表/ ChartContext ctx = new ChartContext(); 公共行动结果索引（） { 返回视图（）； } 公共 ActionResult OrgChart() { return PartialView("_OrgChart", ctx.Cards.ToList()); } public ActionResult ChartMember(int id, int? ParentId = null) { 卡卡 = 新卡（）；如果 (id > 0) 卡 = ctx.Cards.Find(id); 别的 card.ParentId = ParentId; return PartialView("_ChartMember", card); } public ActionResult SaveMember(卡卡) { 如果（card.id == 0） ctx.Cards.Add(卡); 别的 ctx.Entry(card).State = System.Data.EntityState.Modified; ctx.SaveChanges(); 返回 Json(true, JsonRequestBehavior.AllowGet); } }

【讨论】：