Json object inside object via asp.net c# from sql server

Question

I am using jstree plugin, and I need json format that is inside object.

this is my output:

[{"id":"1","text":"Document Management","parent":"#","icon":"fa fa-table","selected":1}
,{"id":"2","text":"Document List","parent":"1","icon":"fa fa-list","selected":1}
,{"id":"7","text":"Hazard","parent":"#","icon":"fa fa-file-text","selected":1}]

this is what I need:

[{"id":"1","text":"Document Management","parent":"#","icon":"fa fa-table",state: { opened: true, selected: true }}}
,{"id":"2","text":"Document List","parent":"1","icon":"fa fa-list",state: { opened: true, selected: true }}}
,{"id":"7","text":"Hazard","parent":"#","icon":"fa fa-file-text",state: { opened: true, selected: true }}}]

and these are my c# and js codes which creates json serialising and treeview; c#

[WebMethod]
public static string Menu()
{
    ClassSystemAccessPolicy classDocumentPolicy = new ClassSystemAccessPolicy();
    DataTable dt = new DataTable();
    dt = classDocumentPolicy.Permission_Load().Tables[0];

    System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
    Dictionary<string, object> row;

    foreach (DataRow dr in dt.Rows)
    {
        row = new Dictionary<string, object>();
        foreach (DataColumn col in dt.Columns)
        {
            row.Add(col.ColumnName, dr[col]);
        }
        rows.Add(row);
    }
    return serializer.Serialize(rows);
}

js

var MenuTree = function () {
    $.ajax({
        type: "POST",
        url: "Permission.aspx/Menu",
        contentType: "application/json",
        dataType: "json",
        success: function (data) {
            var menu$json = JSON.parse(data.d);
            $('#tree_menu').jstree({
                'plugins': ["wholerow", "checkbox", "types"],
                'core': {
                    "themes": {
                        "responsive": false
                    },
                    'data': menu$json
                }
            });
            console.log(menu$json)
        },
        error: function () {
            console.log('err')
        }
    });

How can I serialise like state: { selected: true } ?

Answer 1

You need to create your own DTO(Data Transfer Object) for this

public class JSTreeDTO
{
public string id{get;set;}
public string text{get;set;}
public string text{get;set;}
public string parent {get;set;}
public string icon{get;set;}
public StateDTO state{get;set;}
}

public class StateDTO
{
 public bool opened{get;set;}
 public bool selected{get;set;}
}

Then create it inside loop

List<JSTreeDTO> treeList=new List<JSTreeDTO>();

foreach (DataRow dr in dt.Rows)
{
    JSTreeDTO node=new JSTreeDTO();
    row = new Dictionary<string, object>();
    foreach (DataColumn col in dt.Columns)
    {
        node.id=dr["id"];//etc
        node.state=new StateDTO();
        node.state.opened=true;//based on your logic           

    }
    treeList.Add(node);

   return serializer.Serialize(treeList);
}