MVC将模型数据传递到Javascript画布

我和一个朋友必须制作一张画布，你可以在上面拖动图像。这些图像必须从数据库中加载

这是我们的塔菲尔模型：

public class Tafel{

    public int TafelId { get; set; }

    public int ReservatieId { get; set; }

    public string ImagePostion { get; set; }   

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:hh:mm tt}")]
    //[DataType(DataType.Time)]
    public DateTime? Tijd { get; set; }

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]
    public DateTime? Datum { get; set; }

    public string Afbeelding { get; set; }

    public bool Beschikbaarheid { get; set; }
}

画布

position

存储在

ImagePosition

中。这里存储画布坐标

在这里，我们将图像加载到画布上：

<script>
    var position = @Html.Raw(Json.Encode(Model.ImagePostion));

    var path = "somerandomimage.jpg";

    var canvas = $("#Canvas");
    var c = canvas[0].getContext("2d");

    var image = new DragImage(path, 50, 50);

    var loop = setInterval(function () {

        c.fillStyle = "gray";
        c.fillRect(0, 0, 800, 500);

        image.update();

    }, 30); `
    //some drag & drop code after this
 </script>

var position=@Html.Raw（Json.Encode（Model.imageposition））；
var path=“somerandomimage.jpg”；
var画布=$（“#画布”）；
var c=canvas[0].getContext（“2d”）；
var图像=新绘图（路径，50，50）；
变量循环=设置间隔（函数（）{
c、 fillStyle=“灰色”；
c、 fillRect（0,0800500）；
image.update（）；
}, 30); `
//这之后有一些拖放代码

因此，

imagePosition

必须进行

DragImage（路径，50，50）

。 我们尝试使用

Json.Encode

获取位置，但它返回null

你们中有谁能帮我弄清楚我们应该如何将模型中的数据转换成Javascript吗

---

谢谢。

基于此格式的

ImagePosition

值

number/number

，您可以将其拆分为一个数组，并使用索引访问所需的部分

var position = '@Model.ImagePostion'.split('/');

// then access the values like so
var image = new DragImage(path, position[0], position[1]);

---

如果绘图需要的是数字而不是字符串，您可能需要

parseInt

这些值。

ImagePosition的值是什么样子的？@Stuart 217/217或50/50。（这些是画布坐标）嘿，伙计，谢谢你的回答。现在出现此错误：

传递到字典中的模型项的类型为“System.Collections.Generic.List1[BonTempsRestaurant.Models.Tafel]”，但此字典需要类型为“BonTempsRestaurant.Models.Tafel”的模型项。

您知道如何修复此问题吗？我猜您正在将模型列表传递到模板中（来自控制器操作）模板需要模型的单个实例（

@model BonTempsRestaurant.Models.Tafel

-这是否在模板顶部？）很抱歉回复太晚。是的，这超出了我的视野。我成功修复了此部分，现在您的代码返回一个

系统。NullReferenceException

它现在的工作状态。我更改了一些内容。但是您的代码正在工作。谢谢您的帮助！