将数据从 controller 传递到 javascript in.Net Core

Question

我想将数据从 controller 传递到 javascript 文件。 这是我的 model 字段

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


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


            }



        }

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

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

Answer 1

您可以在您的 cshtml 中使用以下内容-

@section Scripts{
<script>
var objModel=@Html.Raw(Json.Serialize(Model));
setup(objModel);
</script>
}

现在您可以在外部 JS 文件中定义设置 function 并且您需要进行必要的更改以使用 function 参数，而不是在 ZC1C425268E68385D1AB5074 中使用 @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具有相同的默认值......它看起来像 fields[] 值本地的，只有在这里：

 //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);
            }

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