1

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) {
                [email protected](Json.Serialize(Model.field_list[1].name));
                    }
                      if (i == 2) {
                [email protected](Json.Serialize(Model.field_list[2].name));
                    }



                       tileRowUp.show();

                        var tileColLeft = new Tile(0, posY, 80, 80);
                      if (i == 0) {
                          [email protected](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 [email protected](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.sstatic.net/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?

Improve this question

2 Answers 2

Reset to default
1

You can use the following in your cshtml-

@section Scripts{
<script>
var [email protected](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);


    }



}
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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 ...
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.
I do not get data ,so this is a problem I think
ok in your cshtml when calling the setup(objmodel) can you do it inside document.ready, like this- $('document').ready(()=>{var [email protected](Json.Serialize(Model)); setup(objModel);});
0

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.sstatic.net/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?

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.