ASP.NET MVC 3 Treeview

Question

Je dois afficher un Treeview dans mon application MVC3. Il y aura une table hiérarchique autoréférencée (Dossiers) et une autre table liée à celle-ci (Documents.) (Ainsi, les dossiers peuvent avoir des sous-dossiers N et n'importe quel dossier/sous-dossier peut contenir plusieurs documents.)

des fournisseurs tiers tels que Telerik, DJME et MVC Controls Toolkit. Bien que tous les bons paquets, je suis mal à l'aise au sujet des licences, et depuis que je suis nouveau à MVC (et à la programmation en général,) je trouve leur documentation manquant pour obtenir le bon affichage fonctionnant.

J'ai aussi regardé les blogs fortement référencés sur TreeViews:

TreeViewHelper et Recursive Partial View

En plus des autres articles moins référencés (Le top 3 sont également très instructif):

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

Je voudrais utiliser le TreeViewHelper ou récursive partielle sur la méthode.
Cependant, dans TreeViewHelper, je ne peux pas le faire extraire des données de la deuxième table (ie je peux seulement faire en sorte qu'il lise les fichiers, mais je ne suis pas sûr de savoir comment les lister pour chaque fichier).
Pour la vue partielle récursive, je ne sais toujours pas comment la convertir en MVC3 et aussi l'implémentation générale. J'ai trouvé un post (forums.asp.net/t/1652809.aspx/1?treeview+with+mvc+3) qui donne une explication sur la façon de convertir un peu de celui-ci en MVC3, mais je ne suis toujours pas clair de Que dois-je faire avec ça. Je continue à obtenir l'erreur pour la vue partielle: ne peut pas convertir implicitement le type « vide » de type « objet »

Comme je l'ai dit avant que je suis nouveau MVC3 et je voudrais comprendre dans quelle méthode fonctionnerait mieux pour mon scénario et comment le mettre en œuvre.

Answer 1

Au cas où quelqu'un se poserait la question, la façon dont j'ai résolu ce problème était d'utiliser une vue partielle récursive. Le problème que j'ai avec cela était que je n'avais pas la relation auto-référencée configurée en SQL/EF (je n'avais que le champ ParentID qui n'était pas lié à la clé primaire.) J'ai aussi intégré jsTree car cela a un beaucoup de fonctionnalité lisse comme la recherche.

Comme je l'ai dit dans le commentaire ci-dessus, @ Html.Action et @ Html.Partial travail au lieu de @ Html.RenderAction et @ Html.RenderPartial.

Answer 2

donner un coup d'oeil au mouvement modifier/ajouter/supprimer/nœud TreeView de mon templated Mvc Controls Toolkit ici: 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"); 

    } 

public class ChartController: Contrôleur {// // GET:/Chart/ ChartContext ctx = new ChartContext(); public ActionResult Index() { return(); } public ActionResult OrgChart() { return PartialView ("_ OrgChart", ctx.Cards.ToList()); } public ActionResult ChartMember (int id, int? ParentId = null) { Carte de la carte = new Card(); if (id> 0) card = ctx.Cards.Find (id); sinon card.ParentId = ParentId; return PartialView ("_ ChartMember", carte); } public ActionResult SaveMember (Carte de carte) { if (card.id == 0) ctx.Cards.Add (carte); sinon ctx.Entry (card) .State = System.Data.EntityState.Modified; ctx.SaveChanges(); return Json (true, JsonRequestBehavior.AllowGet); }}