JSON的ASP.NET MVC 4递归模型绑定 [英] ASP.NET MVC 4 Recursive Model Binding from JSON

查看:72
本文介绍了JSON的ASP.NET MVC 4递归模型绑定的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用 Fabric.js ,将图形对象保存到数据库中.我们大量使用了组,从而产生了多层嵌套的图形对象.我已经创建了一些类,这些类与从canvas对象发回的值匹配,并且正确绑定了我图形中的顶级项目.但是,它没有绑定任何子项目,我无法弄清楚出了什么问题.

I'm working with Fabric.js, saving drawing objects to a database. We use groups quite a bit, resulting in several levels of nested drawing objects. I've created classes that match the values being sent back from the canvas object, and it's correctly binding the top-level items in my drawing. It's not binding any of the sub-items, however, and I can't figure out what's wrong.

我的模型(删除了一些属性以使其简短:

My model (some properties removed to keep it short:

public class DrawingObj
{
    public int ParentID { get; set; } //will be populated manually

    [JsonProperty("type")]
    public string Type { get; set; }

    [JsonProperty("originX")]
    public string OriginX { get; set; }

    [JsonProperty("originY")]
    public string OriginY { get; set; }

    ....

    [JsonProperty("objects")]
    public ICollection<DrawingObj> ChildObj { get; set; }

    [JsonProperty("points")]
    public ICollection<Point> Points { get; set; }
}

public class Point
{
    [JsonProperty("type")]
    public string Type { get; set; }

    [JsonProperty("x")]
    public decimal X { get; set; }

    [JsonProperty("y")]
    public decimal Y { get; set; }
}

这是杰森.抱歉,有很多.

Here's the Json. Sorry, there's a lot.

{"objects":[{"type":"group","originX":"center","originY":"center","left":461,"top":278,"width":126,"height":247.5,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","objects":[{"type":"rounded-polygon","originX":"center","originY":"center","left":0,"top":0,"width":126,"height":247.5,"fill":"white","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","points":[{"type":"line","x":-63,"y":-123.75},{"type":"line","x":-63,"y":123.75},{"type":"line","x":63,"y":123.75},{"type":"line","x":63,"y":-123.75},{"type":"line","x":-63,"y":-123.75}]},{"type":"rounded-polygon","originX":"center","originY":"center","left":0,"top":0,"width":125,"height":246.25,"fill":"white","stroke":1,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","points":[{"type":"line","x":-62.5,"y":-123.125},{"type":"line","x":-62.5,"y":123.125},{"type":"line","x":62.5,"y":123.125},{"type":"line","x":62.5,"y":-123.125},{"type":"line","x":-62.5,"y":-123.125}]},{"type":"rounded-polygon","originX":"center","originY":"center","left":0,"top":0,"width":111.38,"height":231,"fill":"white","stroke":1,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","points":[{"type":"line","x":-55.6875,"y":-115.5},{"type":"line","x":-55.6875,"y":115.5},{"type":"line","x":55.6875,"y":115.5},{"type":"line","x":55.6875,"y":-115.5},{"type":"line","x":-55.6875,"y":-115.5}]},{"type":"rounded-polygon","originX":"center","originY":"center","left":0,"top":0,"width":96,"height":215.25,"fill":"#C9C9C9","stroke":1,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","points":[{"type":"line","x":-48,"y":-107.625},{"type":"line","x":-48,"y":107.625},{"type":"line","x":48,"y":107.625},{"type":"line","x":48,"y":-107.625},{"type":"line","x":-48,"y":-107.625}]},{"type":"rounded-polygon","originX":"center","originY":"center","left":0,"top":0,"width":91.5,"height":210.75,"fill":"black","stroke":1,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","points":[{"type":"line","x":-45.75,"y":-105.375},{"type":"line","x":-45.75,"y":105.375},{"type":"line","x":45.75,"y":105.375},{"type":"line","x":45.75,"y":-105.375},{"type":"line","x":-45.75,"y":-105.375}]},{"type":"rounded-polygon","originX":"center","originY":"center","left":0,"top":0,"width":90,"height":209.62,"fill":"#A5EDF2","stroke":1,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","points":[{"type":"line","x":-45,"y":-104.811},{"type":"line","x":-45,"y":104.811},{"type":"line","x":45,"y":104.811},{"type":"line","x":45,"y":-104.811},{"type":"line","x":-45,"y":-104.811}]},{"type":"custom-circle","originX":"center","originY":"center","left":0,"top":0,"width":20,"height":20,"fill":"white","stroke":2,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","radius":10},{"type":"named-text","originX":"center","originY":"center","left":0,"top":0,"width":6,"height":15.6,"fill":"black","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","text":"1","fontSize":12,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"","lineHeight":1.3,"textDecoration":"","textAlign":"left","path":null,"textBackgroundColor":"","useNative":true,"name":"label"}]},{"type":"group","originX":"center","originY":"center","left":598,"top":277,"width":126,"height":247.5,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","objects":[{"type":"rounded-polygon","originX":"center","originY":"center","left":0,"top":0,"width":126,"height":247.5,"fill":"white","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","points":[{"type":"line","x":-63,"y":-123.75},{"type":"line","x":-63,"y":123.75},{"type":"line","x":63,"y":123.75},{"type":"line","x":63,"y":-123.75},{"type":"line","x":-63,"y":-123.75}]},{"type":"rounded-polygon","originX":"center","originY":"center","left":0,"top":0,"width":125,"height":246.25,"fill":"white","stroke":1,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","points":[{"type":"line","x":-62.5,"y":-123.125},{"type":"line","x":-62.5,"y":123.125},{"type":"line","x":62.5,"y":123.125},{"type":"line","x":62.5,"y":-123.125},{"type":"line","x":-62.5,"y":-123.125}]},{"type":"rounded-polygon","originX":"center","originY":"center","left":0,"top":0,"width":111.38,"height":231,"fill":"white","stroke":1,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","points":[{"type":"line","x":-55.6875,"y":-115.5},{"type":"line","x":-55.6875,"y":115.5},{"type":"line","x":55.6875,"y":115.5},{"type":"line","x":55.6875,"y":-115.5},{"type":"line","x":-55.6875,"y":-115.5}]},{"type":"rounded-polygon","originX":"center","originY":"center","left":0,"top":0,"width":96,"height":215.25,"fill":"#C9C9C9","stroke":1,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","points":[{"type":"line","x":-48,"y":-107.625},{"type":"line","x":-48,"y":107.625},{"type":"line","x":48,"y":107.625},{"type":"line","x":48,"y":-107.625},{"type":"line","x":-48,"y":-107.625}]},{"type":"rounded-polygon","originX":"center","originY":"center","left":0,"top":0,"width":91.5,"height":210.75,"fill":"black","stroke":1,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","points":[{"type":"line","x":-45.75,"y":-105.375},{"type":"line","x":-45.75,"y":105.375},{"type":"line","x":45.75,"y":105.375},{"type":"line","x":45.75,"y":-105.375},{"type":"line","x":-45.75,"y":-105.375}]},{"type":"rounded-polygon","originX":"center","originY":"center","left":0,"top":0,"width":90,"height":209.62,"fill":"#A5EDF2","stroke":1,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","points":[{"type":"line","x":-45,"y":-104.811},{"type":"line","x":-45,"y":104.811},{"type":"line","x":45,"y":104.811},{"type":"line","x":45,"y":-104.811},{"type":"line","x":-45,"y":-104.811}]},{"type":"custom-circle","originX":"center","originY":"center","left":0,"top":0,"width":20,"height":20,"fill":"white","stroke":2,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","radius":10},{"type":"named-text","originX":"center","originY":"center","left":0,"top":0,"width":6,"height":15.6,"fill":"black","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","text":"2","fontSize":12,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"","lineHeight":1.3,"textDecoration":"","textAlign":"left","path":null,"textBackgroundColor":"","useNative":true,"name":"label"}]}],"background":""}

Ajax调用:

    var jsontext = JSON.stringify(canvas);

    $.ajax({
        url: '/Project/SaveDrawing/',
        data: jsontext,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'post',
        success: onSaved,
        error: function (data, textStatus) { alert(textStatus); }
    });

控制器:

    [HttpPost]
    public JsonResult SaveDrawing(ICollection<DrawingObj> objects)
    {
        try
        {
            if (objects != null)
            {
                bool saved = Drawing.SaveDrawing(objects);
                return Json(new { success = saved });
            }
        }
        catch (Exception ex)
        {
            error = ex.Message;
        }
        return Json(new { success = false, error = error });
    }

因此,我的两个顶级项目完全按预期进行了绑定,但是ChildObj和Points都为空.我不知道为什么这些集合没有约束力,因为我相信我的命名是正确的.

So my two top-level items are binding exactly as expected, but ChildObj and Points are both null. I can't figure out why the collections aren't binding, because I believe I have the naming correct.

在此先感谢您的帮助.

推荐答案

默认模型绑定器不遵循JSON.Net属性属性,因此子JSON元素"objects" 完全忽略了.

The default model binder doesn't adhere to the JSON.Net property attributes, hence the child JSON element "objects" is completely ignored.

只需在JSON中将子对象" 更改为"childObj" (以匹配模型属性名称),即可使用默认的模型绑定器.

Simply changing the child "objects" to "childObj" (to match the model property name) in the JSON will make this work with the default model binder.

{ "objects": 
    [{ "type": "group", "originX": "center", "originY": "center", ... 
        "childObj": [{ "type": "rounded-polygon", "originX": "center", "originY": "center", 
    ...
}

否则,请按照ZenCoder的建议进行操作,并创建一个使用JSON.Net属性属性的自定义模型绑定器.

Otherwise do as The ZenCoder suggested and create a custom model binder that uses the JSON.Net property attributes.

这篇关于JSON的ASP.NET MVC 4递归模型绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆