在.Net内核中将数据从控制器传递到javascript
我想将数据从控制器传递到javascript文件。 这是我的模型字段在.Net内核中将数据从控制器传递到javascript,javascript,asp.net-core,p5.js,Javascript,Asp.net Core,P5.js,我想将数据从控制器传递到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> bo
[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; }
}
公共类游戏模型
{
公共列表板{get；set；}
公共列表播放机\u列表{get；set；}
公共列表骰子_值{get；set；}
公共列表字段_List{get；set；}
}
<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);
}
}
函数设置（）{
createCanvas（880880）；
背景（255）；
对于（变量i=0；i<11；i++）{
var posX=映射（i，0，11，0，宽度）；
var posY=map（i，0，11，0，高度）；
var posX2=映射（i，0，11，0，宽度）；
var posY2=映射（i，0，11，高度，0）；
var tileRowUp=新的瓷砖（posX，0，80，80）；
如果（i==1）{
tileRowUp.nameOfField=@Html.Raw（Json.Serialize（Model.field_list[1].name））；
}
如果（i==2）{
tileRowUp.nameOfField=@Html.Raw（Json.Serialize（Model.field_list[2].name））；
}
tileRowUp.show（）；
var tileColLeft=新的瓷砖（0，posY，80，80）；
如果（i==0）{
tileColLeft.nameOfField=@Html.Raw（Json.Serialize（Model.field_list[0].name））；
}
tileColLeft.show（）；
var tileRowdown=新瓷砖（posX2，高度-80,80,80）；
tileRowdown.show（）；
var tileColRight=新瓷砖（宽度-80，位置2，80，80）；
tileColRight.show（）；
}
var MystiousCard1=新瓷砖（170190100100）；
神秘卡片1.show（）；
var MystiousCard2=新瓷砖（570490100100）；
神秘卡片2.show（）；
var dice=新瓷砖（390、390、50、50）；
dice.show（）；
}
类瓷砖{
构造函数（x、y、lar、alt、id_字段、nameOfField、TypeOfField）{
这个.x=x；
这个。y=y；
this.lar=lar；
this.alt=alt；
this.id\u字段=id\u字段；
this.nameOfField=nameOfField；
this.typeofield=typeofield；
}
show（）{
//仰泳（）；
rect（this.x，this.y，this.lar，this.alt）；
文本（this.nameOfField、this.x+10、this.y+10）；
}
}
tileColLeft.nameOfField=@Html.Raw（Json.Serialize（Model.field_list[0].name））我将数据分配给对象名称tileColLeft。这里我混合了js代码和HTML，我不想这样做。
这项工作，它显示我从数据库中的数据。
这是结果
脚本javascript现在也在我的.cshtml文件中。我必须使这个js代码成为外部文件。
我曾考虑过使用JsonResult，但我不明白我应该如何做到这一点。有人有什么建议吗？您可以在cshtml中使用以下内容-
@节脚本{
var objModel=@Html.Raw（Json.Serialize（Model））；
设置（objModel）；
}
现在，您可以在外部JS文件中定义setup函数，还需要进行必要的更改以使用function参数，而不是像这样在函数中使用@Html.Raw
功能设置（modelObj）{
createCanvas（880880）；
背景（255）；
对于（变量i=0；i<11；i++）{
var posX=映射（i，0，11，0，宽度）；
var posY=map（i，0，11，0，高度）；
var posX2=映射（i，0，11，0，宽度）；
var posY2=映射（i，0，11，高度，0）；
var tileRowUp=新的瓷砖（posX，0，80，80）；
如果（i==1）{
tileRowUp.nameOfField=modelObj.field\u list[1]。名称；
}
如果（i==2）{
tileRowUp.nameOfField=modelObj.field_list[2]。名称；
}
tileRowUp.show（）；
var tileColLeft=新的瓷砖（0，posY，80，80）；
如果（i==0）{
tileColLeft.nameOfField=modelObj.field_列表[0]。名称；
}
tileColLeft.show（）；
var tileRowdown=新瓷砖（posX2，高度-80,80,80）；
tileRowdown.show（）；
var tileColRight=新瓷砖（宽度-80，位置2，80，80）；
tileColRight.show（）；
}
var MystiousCard1=新瓷砖（170190100100）；
神秘卡片1.show（）；
var MystiousCard2=新瓷砖（570490100100）；
神秘卡片2.show（）；
var dice=新瓷砖（390、390、50、50）；
dice.show（）；
}
类瓷砖{
构造函数（x、y、lar、alt、id_字段、nameOfField、TypeOfField）{
这个.x=x；
这个。y=y；
this.lar=lar；
this.alt=alt；
this.id\u字段=id\u字段；
this.nameOfField=nameOfField；
this.typeofield=typeofield；
}
show（）{
//仰泳（）；
rect（this.x，this.y，this.lar，this.alt）；
文本（this.nameOfField、this.x+10、this.y+10）；
}
}
我使用Json和ajax从数据库中获取数据
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);
}
}
这不会将数据分配给tileRowUp.nameofield
，当我显示它时，我会看到
它类似于字段[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);
}
//将每一行追加到html表中
for（var i=0；i
有人知道我在做什么吗
tileRowUp.nameOfField = 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);
}