ASP.NET MVC 3 Treeview

Мне нужно отобразить Treeview в моем приложении MVC3. Там будет само ссылающаяся иерархическая таблица (папки) и другая таблица, связанная с ней (документы.) (Таким образом, папки могут иметь N-подпапки, а любая папка / подпапка может иметь много документов.)

Я изучил использование сторонних поставщиков, таких как Telerik, DJME и MVC Controls Toolkit. Хотя все хорошие пакеты, я беспокоюсь о лицензиях, и поскольку я новичок в MVC (и программировании в целом) , я нахожу их документация, отсутствующая для правильной работы дисплея.

Я также посмотрел на сильно ссылочные Блоги на TreeViews:

TreeViewHelper и Рекурсивный Частичный Вид

в дополнение к другим менее ссылочным статьям (топ-3 также очень хотелось бы использовать метод TreeViewHelper или рекурсивного частичного представления.
Однако в TreeViewHelper я не могу заставить его извлекать данные из второй таблицы (т. е. Я могу только заставить его перечислить файлы, но я не уверен, как заставить его перечислить документы для каждого файла.)
Для рекурсивного частичного представления я все еще не понимаю, как преобразовать это в MVC3, а также общую реализацию. Я нашел сообщение (forums.asp.net/t/1652809.aspx/1?treeview+с+mvc+3), что дает объяснение того, как преобразовать немного его в MVC3, но я все еще не понимаю, что с ним делать. Я продолжаю получать ошибку для частичного представления:невозможно неявно преобразовать тип "void" в тип "object"

Как я уже говорил, Я новичок в MVC3 и хотел бы понять, какой метод будет лучше всего работать для моего сценария и как его реализовать.

3 ответов


Если кому-то интересно, то я решил эту проблему с помощью рекурсивного частичного представления. Проблема, с которой я столкнулся, заключалась в том, что у меня не было отношения само ссылки, настроенного в SQL/EF (у меня просто было поле ParentID, которое не было связано с первичным ключом.) Я также интегрировал jsTree, поскольку это имеет много скользких функций, таких как поиск.

Как я сказал в комментарии выше, @Html.Действие и @Html.Частичная работа вместо @Html.RenderAction и @формат HTML.RenderPartial.


взгляните на edit/add/delete / node move templated TreeView моего инструментария управления Mvc здесь:http://mvccontrolstoolkit.codeplex.com/wikipage?title=TreeView


    $(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 = новый ChartContext(); индекс public ActionResult() { представление возврата(); } public ActionResult OrgChart() { возврат PartialView ("_OrgChart", ctx.Карты.Список()); } public ActionResult ChartMember(int id, int? Атрибутом parentId = нуль) { Card card = новая карта(); если (id > 0) карта = СТХ.Карты.Найти(идентификатор); еще карта.Атрибутом ParentId = Атрибутом ParentId; возврат PartialView ("_ChartMember", карточка); } public ActionResult SaveMember (карточная карта) { if (card.id == 0) ctx.Карты.Добавить (карточка); еще ctx.Вход (карточка).государственное устройство.Данные.EntityState.Модифицированный; ctx.Метод SaveChanges(); возврат Json (true, JsonRequestBehavior.AllowGet); } }