在 Razor 页面上显示 Javascript 文件数据

Question

我有一个 javascript 文件，其中有一个对象数组。我想在剃刀页面上显示该数组的内容。我的问题是如何在剃须刀页面中访问 javascript 文件的内容。 这是我的 cshtml 文件。

@{
ViewData["Title"] = "HOME PAGE";
Layout = "~/Views/Shared/_GameLayout.cshtml";
}

<div id="Display"></div>
@section Scripts {
    <script src="~/js/leaderboard.js" type="module"></script>
    <script>
        var data = '';
        @* console.log(array,"array") *@
        for (var key in array) {
            if (array[key].a != undefined) {
                data += '<span>' + array[key].a +  '</span> ';
            }
            if (array[key].b != undefined) {
                data += '<span>' + array[key].b + '</span> ';
            }
            if (array[key].c != undefined) {
                data += '<span>' + array[key].c + '</span> ';
            }
        }

        $("#Display").html(data);
    </script>
}

这是我的 JavaScript 文件。

let array =
    [{ a: 53 },
    { b: 31 },
    { c: 15 }]

console.log(array,"array")

我想在html标签中显示数组的内容。

当我从 leaderboard.js 文件控制台.log 数组时，它正在打印数组，但是当我从 cshtml 控制台 .log 时，它说该数组未定义。

Answer 1

不确定要如何显示数组，这里有一个关于如何显示数组数据的简单演示：

<div id="Display"></div>
@section Scripts {
    <script src="~/js/leaderboard.js"></script>
    <script>
        var data = '';
        for (var key in array) {
            if (array[key].a != undefined) {
                data += '<span>' + array[key].a +  '</span> ';
            }
            if (array[key].b != undefined) {
                data += '<span>' + array[key].b + '</span> ';
            }
            if (array[key].c != undefined) {
                data += '<span>' + array[key].c + '</span> ';
            }
        }

        $("#Display").html(data);
    </script>
}

更新：

请删除您剃须刀页面中的type="module"。

参考：

https://javascript.info/modules-intro#module-level-scope