passing data from controller to javascript in .Net Core

Question

I want to pass data from controller to javascript file. Here is my model Field

        [Key]
        public int id_field { get; set; }
        public string name { get; set; 
        public int field_type { get; set; }

This is my GameModel

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

    }

and here is javascript code:


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


            }



        }

Using tileColLeft.nameOfField=@Html.Raw(Json.Serialize(Model.field_list[0].name)); I assign data to object name tileColLeft. Here I mix js code and HTML and I do not want to do this. This work, it display me data from database. Here is result https://i.stack.imgur.com/h0oEr.jpg

Also script javascript is now in my .cshtml file . I have to make this js code to be external file. I thought about using JsonResult but I cannot understand how can I should do this. Somebody have some suggestion?

score 1 · Answer 1 · answered Nov 11 '19 at 22:23

You can use the following in your cshtml-

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

Now you can define the setup function in an external JS file and also you need to make the necessary changes to use the function parameter instead of using @Html.Raw in the function like so.

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


    }



}

Thanks for your answer ,but this assign(```if (i == 1) { tileRowUp.nameOfField =modelObj.field_list[1].name; } if (i == 2) { tileRowUp.nameOfField =modelObj.field_list[2].name; }``` do not work ,when I used this and the board was not display ,without this assign ,program display me empty board ,so something wrong is with assign ... — Bart, Nov 11 '19 at 23:14
Are you getting the model data in the function if you do a console.log(modelObj.field_list[1]) in browser console while in debug mode. — kode_anil, Nov 11 '19 at 23:28
ok in your cshtml when calling the setup(objmodel) can you do it inside document.ready, like this- $('document').ready(()=>{var objModel=@Html.Raw(Json.Serialize(Model)); setup(objModel);}); — kode_anil, Nov 12 '19 at 17:21

Bart · Answer 2 · 2019-11-12T10:25:27.283

I used Json and ajax in order to take data from database .Here is me code in 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);


    }



    }

This code

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

display me data in column and rows and it works but here is my problem right now

  tileRowUp.nameOfField = fields[i].nameOfField2;

this not assign data to tileRowUp.nameOfField,when I display it I see this https://i.stack.imgur.com/tKPgz.jpg it is like fields[i].nameOfField2 have the same default value ... it looks like fields[] value are local and there are only in here :

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

somebody have some ideas what I am doing wrong?

passing data from controller to javascript in .Net Core

2 Answers2