将数据从控制器传递到 .Net Core 中的 javascript

Question

我想将数据从控制器传递到 javascript 文件。这是我的模型字段

        [Key]

        public int id_field { get; set; }

        public string name { get; set; 

        public int field_type { get; set; }

这是我的游戏模型

 public class GameModel

    {

        public List<Board> board { get; set; }

        public List<Player> player_list { get; set; }

        public List<Dice> dices_value { get; set; }

        public List<Field> field_list { get; set; }

    }

这是javascript代码：

<script>

            function setup() {

                createCanvas(880, 880);

                background(255);

                for (var i = 0; i < 11; i++) {

                    var posX = map(i, 0, 11, 0, width);

                    var posY = map(i, 0, 11, 0, height);

                    var posX2 = map(i, 0, 11, 0, width);

                    var posY2 = map(i, 0, 11, height, 0);

                    var tileRowUp = new Tile(posX, 0, 80, 80);

                    if (i == 1) {

                tileRowUp.nameOfField=@Html.Raw(Json.Serialize(Model.field_list[1].name));

                    }

                      if (i == 2) {

                tileRowUp.nameOfField=@Html.Raw(Json.Serialize(Model.field_list[2].name));

                    }

                       tileRowUp.show();

                        var tileColLeft = new Tile(0, posY, 80, 80);

                      if (i == 0) {

                          tileColLeft.nameOfField=@Html.Raw(Json.Serialize(Model.field_list[0].name));

                    }

                       tileColLeft.show();

                        var tileRowdown = new Tile(posX2, height - 80, 80, 80);

                       tileRowdown.show();

                        var tileColRight = new Tile(width - 80, posY2, 80, 80);

                       tileColRight.show();

                    }

使用 tileColLeft.nameOfField=@Html.Raw(Json.Serialize(Model.field_list[0].name));I 将数据分配给对象名称 tileColLeft。在这里我混合了 js 代码和 HTML，我不想这样做。这项工作，它显示我从数据库中的数据。这是结果 https://imgur.com/FoeZZKL

另外脚本 javascript 现在在我的 .cshtml 文件中。我必须使这个 js 代码成为外部文件。我想过使用 JsonResult 但我不明白我该怎么做。有人有什么建议吗？

Answer 1

您可以在 cshtml- 中使用以下内容@section Scripts{<script>var objModel=@Html.Raw(Json.Serialize(Model));setup(objModel);</script>}现在您可以在外部 JS 文件中定义 setup 函数，并且您还需要进行必要的更改以使用函数参数，而不是像这样在函数中使用 @Html.Raw。function setup(modelObj) {&nbsp; &nbsp; createCanvas(880, 880);&nbsp; &nbsp; background(255);&nbsp; &nbsp; for (var i = 0; i < 11; i++) {&nbsp; &nbsp; &nbsp; &nbsp; var posX = map(i, 0, 11, 0, width);&nbsp; &nbsp; &nbsp; &nbsp; var posY = map(i, 0, 11, 0, height);&nbsp; &nbsp; &nbsp; &nbsp; var posX2 = map(i, 0, 11, 0, width);&nbsp; &nbsp; &nbsp; &nbsp; var posY2 = map(i, 0, 11, height, 0);&nbsp; &nbsp; &nbsp; &nbsp; var tileRowUp = new Tile(posX, 0, 80, 80);&nbsp; &nbsp; &nbsp; &nbsp; if (i == 1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tileRowUp.nameOfField =modelObj.field_list[1].name;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (i == 2) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tileRowUp.nameOfField =modelObj.field_list[2].name;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; tileRowUp.show();&nbsp; &nbsp; &nbsp; &nbsp; var tileColLeft = new Tile(0, posY, 80, 80);&nbsp; &nbsp; &nbsp; &nbsp; if (i == 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tileColLeft.nameOfField =modelObj.field_list[0].name;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; tileColLeft.show();&nbsp; &nbsp; &nbsp; &nbsp; var tileRowdown = new Tile(posX2, height - 80, 80, 80);&nbsp; &nbsp; &nbsp; &nbsp; tileRowdown.show();&nbsp; &nbsp; &nbsp; &nbsp; var tileColRight = new Tile(width - 80, posY2, 80, 80);&nbsp; &nbsp; &nbsp; &nbsp; tileColRight.show();&nbsp; &nbsp; }&nbsp; &nbsp; var mysteriousCard1 = new Tile(170, 190, 100, 100);&nbsp; &nbsp; mysteriousCard1.show();&nbsp; &nbsp; var mysteriousCard2 = new Tile(570, 490, 100, 100);&nbsp; &nbsp; mysteriousCard2.show();&nbsp; &nbsp; var dice = new Tile(390, 390, 50, 50);&nbsp; &nbsp; dice.show();}class Tile {&nbsp; &nbsp; constructor(x, y, lar, alt, id_Field, nameOfField, TypeOfField) {&nbsp; &nbsp; &nbsp; &nbsp; this.x = x;&nbsp; &nbsp; &nbsp; &nbsp; this.y = y;&nbsp; &nbsp; &nbsp; &nbsp; this.lar = lar;&nbsp; &nbsp; &nbsp; &nbsp; this.alt = alt;&nbsp; &nbsp; &nbsp; &nbsp; this.id_Field = id_Field;&nbsp; &nbsp; &nbsp; &nbsp; this.nameOfField = nameOfField;&nbsp; &nbsp; &nbsp; &nbsp; this.TypeOfField = TypeOfField;&nbsp; &nbsp; }&nbsp; &nbsp; show() {&nbsp; &nbsp; &nbsp; &nbsp; //noStroke();&nbsp; &nbsp; &nbsp; &nbsp; rect(this.x, this.y, this.lar, this.alt);&nbsp; &nbsp; &nbsp; &nbsp; text(this.nameOfField, this.x + 10, this.y + 10);&nbsp; &nbsp; }}

Answer 2

我使用 Json 和 ajax 从数据库中获取数据。这是我在 js 中的代码&nbsp; &nbsp; var fields = [];&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < 40; i++) {&nbsp; &nbsp; &nbsp; &nbsp; fields[i] = { id_Field: 0, nameOfField2: 'what', TypeOfField: 0 }}$(document).ready(function () {&nbsp; &nbsp; //Call EmpDetails jsonResult Method&nbsp; &nbsp; $.getJSON("Boards/Json",&nbsp; &nbsp; &nbsp; &nbsp; function (json) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var tr;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Append each row to html table&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < json.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fields[i].nameOfField2 = json[i].name;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fields[i].id_Field = json[i].id_field;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fields[i].TypeOfField = json[i].field_type;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr = $('<tr/>');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr.append("<td>" + fields[i].id_Field + "</td>");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr.append("<td>" + fields[i].nameOfField2 + "</td>");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr.append("<td>" + fields[i].TypeOfField + "</td>");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('table').append(tr);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });});&nbsp; &nbsp; function setup() {&nbsp; &nbsp; &nbsp; &nbsp; createCanvas(880, 880);&nbsp; &nbsp; &nbsp; &nbsp; background(255);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < 11; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var posX = map(i, 0, 11, 0, width);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var posY = map(i, 0, 11, 0, height);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var posX2 = map(i, 0, 11, 0, width);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var posY2 = map(i, 0, 11, height, 0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var tileRowUp = new Tile(posX, 0, 80, 80);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (i == 1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tileRowUp.nameOfField = fields[i].nameOfField2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//&nbsp; &nbsp;tileRowUp[2].nameOfField = fields[2].nameOfField2;&nbsp; &nbsp; &nbsp; &nbsp; tileRowUp.show();&nbsp; &nbsp; var tileColLeft = new Tile(0, posY, 80, 80);&nbsp; &nbsp; tileColLeft.show();&nbsp; &nbsp; var tileRowdown = new Tile(posX2, height - 80, 80, 80);&nbsp; &nbsp; tileRowdown.show();&nbsp; &nbsp; var tileColRight = new Tile(width - 80, posY2, 80, 80);&nbsp; &nbsp; tileColRight.show();}var mysteriousCard1 = new Tile(170, 190, 100, 100);mysteriousCard1.show();var mysteriousCard2 = new Tile(570, 490, 100, 100);mysteriousCard2.show();var dice = new Tile(390, 390, 50, 50);dice.show();}&nbsp; &nbsp; class Tile {&nbsp; &nbsp; &nbsp; &nbsp; constructor(x, y, lar, alt, id_Field, nameOfField, TypeOfField) {&nbsp; &nbsp; this.x = x;&nbsp; &nbsp; this.y = y;&nbsp; &nbsp; this.lar = lar;&nbsp; &nbsp; this.alt = alt;&nbsp; &nbsp; this.id_Field = id_Field;&nbsp; &nbsp; this.nameOfField = nameOfField;&nbsp; &nbsp; this.TypeOfField = TypeOfField;&nbsp; &nbsp; }&nbsp; &nbsp; show() {&nbsp; &nbsp; &nbsp; &nbsp; //noStroke();&nbsp; &nbsp; &nbsp; &nbsp; rect(this.x, this.y, this.lar, this.alt);&nbsp; &nbsp; text(this.nameOfField, this.x + 10, this.y + 10);&nbsp; &nbsp; }&nbsp; &nbsp; }这段代码tr = $('<tr/>');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr.append("<td>" + fields[i].id_Field + "</td>");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr.append("<td>" + fields[i].nameOfField2 + "</td>");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr.append("<td>" + fields[i].TypeOfField + "</td>");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('table').append(tr);向我显示列和行中的数据，它可以工作，但现在这是我的问题&nbsp; tileRowUp.nameOfField = fields[i].nameOfField2;这不会将数据分配给tileRowUp.nameOfField，当我显示它时，我看到这个 https://imgur.com/rvxgZiu 它就像fields[i].nameOfField2具有相同的默认值......看起来字段 [] 值是本地的，只有在这里：&nbsp;//Append each row to html table&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < json.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fields[i].nameOfField2 = json[i].name;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fields[i].id_Field = json[i].id_field;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fields[i].TypeOfField = json[i].field_type;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr = $('<tr/>');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr.append("<td>" + fields[i].id_Field + "</td>");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr.append("<td>" + fields[i].nameOfField2 + "</td>");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr.append("<td>" + fields[i].TypeOfField + "</td>");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('table').append(tr);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }有人有一些想法我做错了什么？