How to send Json Data from controller to javascript without in ASP.NET Core?

Question

I am creating an application in that I need to create Treeview for that I take reference of this site

Actually this project is created in MVC Framework and currently, I am using ASP.NET CORE(v3.0) and when I try to send JSON using JavaScriptSerializer than it shows me an error that's why I am using Newtownsoft Json for convert List class to JSON.

Create.CSHTML

<div class="row">

    <div class="col-md-4">
        <form asp-action="Create">
            <div id="jstree">
            </div>
            <input type="hidden" name="selectedItems" id="selectedItems" />
            <input type="submit" value="Submit" />
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#jstree').on('changed.jstree', function (e, data) {
            var i, j;
            var selectedItems = [];
            for (i = 0, j = data.selected.length; i < j; i++) {

                //Fetch the Id.
                var id = data.selected[i];

                //Remove the ParentId.
                if (id.indexOf('-') != -1) {
                    id = id.split("-")[1];
                }

                //Add the Node to the JSON Array.
                selectedItems.push({
                    text: data.instance.get_node(data.selected[i]).text,
                    id: id,
                    parent: data.node.parents[0]
                });
            }

            //Serialize the JSON Array and save in HiddenField.
            $('#selectedItems').val(JSON.stringify(selectedItems));
        }).jstree({
            "core": {
                "themes": {
                    "variant": "large"
                },
                "data": @ViewBag.Data
            },
            "checkbox": {
                "keep_selected_style": false
            },
            "plugins": ["wholerow", "checkbox"],
        });
    });
</script>

MyContoller.cs

public ActionResult Create()
{
    //Loop and add the Parent Nodes.
    List<Menu> ParentMenus = _context.Menu.Where(t => t.ParentID == null).ToList();
    foreach (Menu type in ParentMenus)
        MenuBinding.Add(new TreeViewNode { id = type.MenuID.ToString(), parent = "#", text = type.Title });
    List<Menu> ChildMenus = _context.Menu.Where(t => t.ParentID != null).ToList();
    //Loop and add the Child Nodes.
    foreach (Menu subType in ChildMenus)
    {
        MenuBinding.Add(new TreeViewNode { id = subType.MenuID.ToString(), parent = subType.ParentID.ToString(), text = subType.Title });
    }

    //Serialize to JSON string.
    //ViewBag.Json = (new JavaScriptSerializer()).Serialize(nodes);
    string JsonData = JsonConvert.SerializeObject(MenuBinding);
    ViewBag.Data = JsonData;
    return View();
}

In js side when I get data it is in an escape sequence when I try to unescape and than try to send that data then also this gives me an error.

Actual JSON:

[
    {
        "id":"2",
        "parent":"#",
        "text":"A"
    },
    {
        "id":"5",
        "parent":"#",
        "text":"B"
    },
    {
        "id":"3",
        "parent":"2",
        "text":"C"
    },
    {
        "id":"4",
        "parent":"2",
        "text":"D"
    }
]

Get JSON in javascript:

[
    {
        "id":"2",
        "parent":"#",
        "text":"A"
    },
    {
        "id":"5",
        "parent":"#",
        "text":"B"
    },
    {
        "id":"3",
        "parent":"2",
        "text":"C"
    },
    {
        "id":"4",
        "parent":"2",
        "text":"D"
    }
]

Can anyone please look into this and suggest me what should I have to change in my code?

Answer 1

There is little mistake in script.

<script type="text/javascript">
$(function () {
    $('#jstree').on('changed.jstree', function (e, data) {
        var i, j;
        var selectedItems = [];
        for (i = 0, j = data.selected.length; i < j; i++) {

            //Fetch the Id.
            var id = data.selected[i];

            //Remove the ParentId.
            if (id.indexOf('-') != -1) {
                id = id.split("-")[1];
            }

            //Add the Node to the JSON Array.
            selectedItems.push({
                text: data.instance.get_node(data.selected[i]).text,
                id: id,
                parent: data.node.parents[0]
            });
        }

        //Serialize the JSON Array and save in HiddenField.
        $('#selectedItems').val(JSON.stringify(selectedItems));
    }).jstree({
        "core": {
            "themes": {
                "variant": "large"
            },
            "data": @Html.Raw(ViewBag.Data)//Here need to add Html.Raw instead of ViewBag.Data
        },
        "checkbox": {
            "keep_selected_style": false
        },
        "plugins": ["wholerow", "checkbox"],
    });
});
</script>