如何在不使用 ASP.NET 核心的情况下将 Json 数据从控制器发送到 javascript？

Question

我正在创建一个应用程序，我需要为其创建 Treeview，我参考了 this site

实际上这个项目是在 MVC 框架中创建的，目前，我正在使用 ASP.NET CORE(v3.0)，当我尝试使用 JavaScriptSerializer 发送 JSON 时，它向我显示了一个错误为什么我使用 Newtownsoft Json 将列表 class 转换为 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 端，当我获取数据时，它处于转义序列中，当我尝试取消转义而不是尝试发送该数据时，这也会给我一个错误。

实际 JSON:

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

在javascript中获取JSON：

[
    {
        "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>