ASP.NET MVC 4 Recursive Model Binding from JSON

Question

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 call:

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

Controller:

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

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.

Thanks in advance for any assistance.

Can you show the code where you handle the JSON binding/deserialization? — Faris Zacina, Oct 21 '14 at 17:52
I added the controller and ajax call. When I inspect 'objects', it contains two DrawingObj items, and both ChildObj and Points are null. — jenni-mm2, Oct 21 '14 at 18:08

score 4 · Answer 1 · answered Oct 21 '14 at 18:43

It is pretty much evident that the ASP.NET MVC DefaultModelBinder is not working correctly there.

One approach could be to create a custom Model binder for your object. First you would have to add one additional class to properly map the JSON you are posting to the controller.

[JsonObject]
public class ContainerObj
{
    [JsonProperty("objects")]
    public ICollection<DrawingObj> Objects { get; set; }

    [JsonProperty("background")]
    public string Background { get; set; }
}

Then you would create a custom model binder to deserialize this object to what you need using JSON.NET:

public class ContainerObjModelBinder : DefaultModelBinder
{
    public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        if (bindingContext.ModelType == typeof(ContainerObj))
        {
            var data = GetDocumentContents(controllerContext.HttpContext.Request);

            return JsonConvert.DeserializeObject<ContainerObj>(data);
        }

        return base.BindModel(controllerContext, bindingContext);
    }

    private string GetDocumentContents(System.Web.HttpRequestBase Request)
    {
        string documentContents;
        using (var receiveStream = Request.InputStream)
        {
            using (var readStream = new StreamReader(receiveStream, Encoding.UTF8))
            {
                readStream.BaseStream.Seek(0, SeekOrigin.Begin);
                documentContents = readStream.ReadToEnd();
            }
        }
        return documentContents;
    }
}

And then you would register this custom model binder in Global.asax:

 ModelBinders.Binders.Add(typeof(ContainerObj), new ContainerObjModelBinder());

Finally, your controller would automatically recognize it needs to use the custom model binder:

[HttpPost]
public JsonResult SaveDrawing(ContainerObj data)
{
    // Request processing
}

score 3 · Accepted Answer · answered Oct 21 '14 at 19:14

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

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", 
    ...
}

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

Ok, this solution was simpler and also works correctly. Thanks! — jenni-mm2, Oct 21 '14 at 19:44

ASP.NET MVC 4 Recursive Model Binding from JSON

2 Answers2

Linked