为什么treeview控件没有正确加载数据？

Question

我收到此数据并在转换为json格式后如下：

[{"id":"2","text":"ALCOHOL CONSUMPTION","parent":"1"},{"id":"9","text":"MARITAL STATUS","parent":"1"},{"id":"13","text":"Recreational drug use","parent":"1"},{"id":"14","text":"OCCUPATION","parent":"1"},{"id":"16","text":" 1 child","parent":"1"},{"id":"17","text":" 2/3/4/5/6 children","parent":"1"},{"id":"18","text":"Activities","parent":"1"},{"id":"27","text":"Tobacco Use","parent":"1"},{"id":"37","text":"SocHx  Template","parent":"1"}]

目前上述json数据位于视图中

@{      
     var j2 = JsonConvert.SerializeObject(allparents);    
}

并且j2具有上述json。 json数据按预期工作。当我尝试将即将到来的数据绑定到jstree控件时，它将无法正确添加节点

这是我绑定数据的jquery代码

@section Scripts{
    <script src="Scripts/jstree.min.js"></script>
    <script>

        $(document).ready(function () {
            $('#Div_jstree').jstree(
                       {
                           "json_data": { "data": '@j2' }, 
                           "plugins": ["themes", "json_data"]
                       }
                   );  
        });


    </script>
}


//the below is the generated HTML copied from chrome elements option
<table>
    <tbody><tr>
        <td>
            <div id="Div_jstree" class="jstree jstree-1 jstree-default jstree-leaf" role="tree" aria-multiselectable="true" tabindex="0" aria-activedescendant="j1_loading" aria-busy="false"><ul class="jstree-container-ul jstree-children" role="group"></ul></div>
        </td>
        <td>
            <div id="Div_txta"></div>
        </td>
        <td>
            <label id="utctime"></label>
        </td>
    </tr>
</tbody></table>

正如您所看到的，只加载了jstree控件的某些部分，但我的数据在哪里？

Answer 1

您的问题很可能是您需要在json变量上使用Html.Raw()。在本地执行测试时，如果没有Raw，则引号的格式不正确：

 <script>

   $(document).ready(function() {
      var myObj =
      {
         "json_data": { "data": '@Html.Raw(j2)' },
         "json_data2": { "data": '@j2' },
         "plugins": ["themes", "json_data"]
      };

      alert(myObj);

   });


</script>

在渲染后查看HTML源时，结果如下：

$(document).ready(function() {
      var myObj =
      {
         "json_data": { "data": '[{"id":"2","text":"ALCOHOL CONSUMPTION","parent":"1"},{"id":"9","text":"MARITAL STATUS","parent":"1"},{"id":"13","text":"Recreational drug use","parent":"1"},{"id":"14","text":"OCCUPATION","parent":"1"},{"id":"16","text":" 1 child","parent":"1"},{"id":"17","text":" 2/3/4/5/6 children","parent":"1"},{"id":"18","text":"Activities","parent":"1"},{"id":"27","text":"Tobacco Use","parent":"1"},{"id":"37","text":"SocHx  Template","parent":"1"}]' },
         "json_data2": { "data": '[{"id":"2","text":"ALCOHOL CONSUMPTION","parent":"1"},{"id":"9","text":"MARITAL STATUS","parent":"1"},{"id":"13","text":"Recreational drug use","parent":"1"},{"id":"14","text":"OCCUPATION","parent":"1"},{"id":"16","text":" 1 child","parent":"1"},{"id":"17","text":" 2/3/4/5/6 children","parent":"1"},{"id":"18","text":"Activities","parent":"1"},{"id":"27","text":"Tobacco Use","parent":"1"},{"id":"37","text":"SocHx  Template","parent":"1"}]' },
         "plugins": ["themes", "json_data"]
      };

;