将数据从控制器传递到 .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) {

    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 =modelObj.field_list[1].name;

        }

        if (i == 2) {

            tileRowUp.nameOfField =modelObj.field_list[2].name;

        }

        tileRowUp.show();

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

        if (i == 0) {

            tileColLeft.nameOfField =modelObj.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();

    }

    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();

}

class Tile {

    constructor(x, y, lar, alt, id_Field, nameOfField, TypeOfField) {

        this.x = x;

        this.y = y;

        this.lar = lar;

        this.alt = alt;

        this.id_Field = id_Field;

        this.nameOfField = nameOfField;

        this.TypeOfField = TypeOfField;

    }

    show() {

        //noStroke();

        rect(this.x, this.y, this.lar, this.alt);

        text(this.nameOfField, this.x + 10, this.y + 10);

    }

}

Answer 2

我使用 Json 和 ajax 从数据库中获取数据。这是我在 js 中的代码

    var fields = [];

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

        fields[i] = { id_Field: 0, nameOfField2: 'what', TypeOfField: 0 }

}

$(document).ready(function () {

    //Call EmpDetails jsonResult Method

    $.getJSON("Boards/Json",

        function (json) {

            var tr;

            //Append each row to html table

            for (var i = 0; i < json.length; i++) {

                fields[i].nameOfField2 = json[i].name;

                fields[i].id_Field = json[i].id_field;

                fields[i].TypeOfField = json[i].field_type;

                tr = $('<tr/>');

                tr.append("<td>" + fields[i].id_Field + "</td>");

                tr.append("<td>" + fields[i].nameOfField2 + "</td>");

                tr.append("<td>" + fields[i].TypeOfField + "</td>");

                $('table').append(tr);

            }

        });

});

    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 = fields[i].nameOfField2;

                }

                 //   tileRowUp[2].nameOfField = fields[2].nameOfField2;

        tileRowUp.show();

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

    tileColLeft.show();

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

    tileRowdown.show();

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

    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();

}

    class Tile {

        constructor(x, y, lar, alt, id_Field, nameOfField, TypeOfField) {

    this.x = x;

    this.y = y;

    this.lar = lar;

    this.alt = alt;

    this.id_Field = id_Field;

    this.nameOfField = nameOfField;

    this.TypeOfField = TypeOfField;

    }

    show() {

        //noStroke();

        rect(this.x, this.y, this.lar, this.alt);

    text(this.nameOfField, this.x + 10, this.y + 10);

    }

    }

这段代码

tr = $('<tr/>');

                tr.append("<td>" + fields[i].id_Field + "</td>");

                tr.append("<td>" + fields[i].nameOfField2 + "</td>");

                tr.append("<td>" + fields[i].TypeOfField + "</td>");

                $('table').append(tr);

向我显示列和行中的数据，它可以工作，但现在这是我的问题

  tileRowUp.nameOfField = fields[i].nameOfField2;

这不会将数据分配给tileRowUp.nameOfField，当我显示它时，我看到这个 https://imgur.com/rvxgZiu 它就像fields[i].nameOfField2具有相同的默认值......看起来字段 [] 值是本地的，只有在这里：

 //Append each row to html table

            for (var i = 0; i < json.length; i++) {

                fields[i].nameOfField2 = json[i].name;

                fields[i].id_Field = json[i].id_field;

                fields[i].TypeOfField = json[i].field_type;

                tr = $('<tr/>');

                tr.append("<td>" + fields[i].id_Field + "</td>");

                tr.append("<td>" + fields[i].nameOfField2 + "</td>");

                tr.append("<td>" + fields[i].TypeOfField + "</td>");

                $('table').append(tr);

            }

有人有一些想法我做错了什么？