Как отправить данные Json из контроллера в JavaScript без ASP.NET Core?

Question

Я создаю приложение, в котором мне нужно создать Treeview, для которого я беру ссылку на этот сайт

На самом деле этот проект создан в MVC Framework, и в настоящее время я использую ASP.NET CORE (v3.0) и когда я пытаюсь отправить JSON с помощью JavaScriptSerializer, он показывает ошибку, поэтому я использую Newtownsoft Json для преобразования класса List в 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();
}

На стороне js, когда я получаю данные, он находится в escape-последовательности, когда я пытаюсь выйти и затемчтобы отправить эти данные, это также дает мне ошибку.

Фактический JSON:

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

Получить JSON в javascript:

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

Может кто-нибудь взглянуть на это и предложить мне, что я должен изменить в своем коде?

Answer 1

В скрипте есть небольшая ошибка.

<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>