jstree non si aggiorna utilizzando ASP.NET MVC 4

Question

Attualmente si verificano problemi durante l'aggiornamento dell'intero jstree; il caricamento iniziale dell'albero funziona correttamente e i nodi figlio di aggiornamento funzionano anche come previsto, ma se i dati cambiano nel nodo radice l'albero non si aggiorna, anche i dati sono cambiati e la chiamata al server è stata effettuata.

Proverò a spiegare la configurazione del jstree.

globale variabile

var levelType; 

Il Setup albero

$("#explorer").jstree({ 
     plugins: ["core", "ui", "themes", "json_data", "types"], 
     themes: { 
      theme: "default", 
      dots: false, 
      url: url = '@Url.Content("~/Content/jstree/default/style.css")' 
     }, 
      json_data: { 
       ajax: { 
        cache: false, 
        url: function (node) { 
         var nodeId = ""; 
         var url = ""; 
         if (node == -1) { 
          url = '@Url.Action("GetSites", "Site")'; 
        } else if ($(node).attr("rel") == "station") { 
         url = '@Url.Action("GetInspections", "Inspection")' + '/' + $(node).attr("id"); 
        } 
        return url; 
       }, 
       success: function (metaData, textStatus, jqXhr) { 

        if (levelType == null || levelType == undefined || levelType == "root") { 
         //The initial node that is hard coded and will never change 
         var sitesData = [{ attr: { rel: "root" }, state: "open", data: "Root Node", children: [] }]; 

         $(metaData).each(function() { 
          sitesData[0].children.push({ attr: { id: this.Id, rel: "station" }, state: "closed", data: this.Name }); 
         }); 
         return sitesData; 
        } 

        if (levelType == "station" || levelType == "inspection") { 
         var items = []; 
         $(metaData).each(function() { 
          items.push({ attr: { id: this.Id, rel: "inspection", "class": "jstree-leaf" }, state: "closed", data: this.Name }); 
         }); 

         return items; 
        } 

        return null; 
       } 
      } 
     }, 
      types: { 
       types: { 
        "station": { 
         "icon": { 
          "image": '@Url.Content("URL")' 
        } 
       }, 
       "inspection": { 
        "icon": { 
         "image": '@Url.Content("URL")' 
       } 
      }, 
       'loading': { 
        'icon': { 
         'image': '@Url.Content("URL")' 
       } 
      }, 
       'root': { 
        'icon': { 
         'image': '@Url.Content("URL")' 
       } 
      } 
      } 
     } 
}); 

Albero Nodo Open Event

$("#explorer").bind("before.jstree", function (e, data) { 
    if (data.func === "open_node") { 
     levelType = $(data.args[0]).attr("rel"); 
    } 
}); 

Questa chiamata funziona e rinfresca i nodi figlio sotto il livello della stazione come previsto

var tree = jQuery.jstree._reference("#explorer"); 
    var currentNode = tree._get_node("#the node Id"); 
    var parent = tree._get_parent(currentNode); 

    // this returns "inspection" 
    levelType = $(currentNode).attr("rel"); 

    //the parent node is the station node 
    tree.refresh(parent); 

questo invito non funziona ma dovrebbe aggiornare l'intero albero

var tree = jQuery.jstree._reference("#explorer"); 
    var currentNode = tree._get_node("#the node id"); 
//set the level the tree should be refreshing its data for (this is to ensure that the tree view knows it is not at a root node). 
    var parent = tree._get_parent(currentNode); 
//this returns "root" 
    levelType = $(parent).attr("rel"); 
    tree.refresh(-1); 

spero che qualcuno mi può aiutare con questo come mi sta facendo impazzire.

Acclamazioni

Answer 1

è possibile inserire l'albero all'interno di una PartialView, creare un div sul genitore parziale e rendere l'albero di vista parziale dentro quel div.

Quindi, quando si effettua la chiamata per aggiornare l'albero, è sufficiente eseguire semplicemente un Json per ottenere l'oggetto renderAction e sostituire il contenuto del parto principale con l'albero del contenuto parziale. In questo modo sarà completamente asincrono e potrai applicare animazioni personalizzate.

<div id="parent"> 
@Html.RenderPartial("tree") 
</div> 

<script> 
$(function)({ 
// this could be any event 
$('some id').click(function(){ 
//this could also be a post, we call the controller action and it returns the 
//partialview 
$.get("GetTree", function(data){ 
$('#parent').html(data); 
}); 
}); 
</script>