javascript - 在.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();


                    }
                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));我将数据分配给对象名称 tileColLeft。在这里，我混合了 js 代码和 HTML，我不想这样做。这项工作，它向我显示来自数据库的数据。这是结果 https://imgur.com/FoeZZKL

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

标签： javascriptasp.net-corep5.js

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


    }



}