ASP.NET MVC 3 Treeview

Question

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.)

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.

I've also looked at the heavily referenced blogs on TreeViews:

TreeViewHelper and the Recursive Partial View

In addition to the other less referenced articles (The top 3 are also very informative):

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

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'

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.

Answer 1

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.

Like I said in the comment above, @Html.Action and @Html.Partial work instead of @Html.RenderAction and @Html.RenderPartial.

Answer 2

    $(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); } }

Answer 3

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