ASP.NET MVC4 Deserialize JSON with 'ExtraElements' into c# ViewModel

Question

I'm trying to map a JSON to a c# ViewModel on a Controller Save action. Basically, the JSON has this structure:

{
   "Id": "",
   "TypeId": "37",
   "FormId": "",
   "ExtraData":{
      "title": "Some random title",
      "contribute": "author",
      "location": {
          "url": "/Files/ed5cf2ea-c920.jpeg",
          "size": "100",
          "format": "application/json"
      }
   }
}

Some fields are "know" and some other aren't. The 'ExtraData' is a container for all these unknown fields and they can vary a lot.

I've created a c# VIewModel to map this:

public class ContentViewModel
{
    public Guid Id { get; set; }
    public int TypeId{ get; set; }
    public int FormId{ get; set; }
    public Dictionary<string, object> ExtraData { get; set; }
}

When I make a request, with a JSON like the above, only the 'root' elements of the ExtraData are mapped. The "location" object is mapped to an object.

I've tried to change the Dictionary to a dynamic, still doesn't work. I also tried to create a JsonConverter, but it never got executed. My guess it doesn't work with ASP.NET MVC app out of the box?

I've tried a lot of things, searched and I'm feeling I got to a dead end.

EDIT: The ExtraData will be stored as is in MongoDB. It can be very simple or complex(with multiple nodes and nested objects).

Answer 1

If you are OK to go with 'dynamic' object parsing to your requirement (since you mentioned, you already tried changing Dictionary to dynamic), you may try with following approach.

Please note, though i am quite not sure if the approach fit your requirement but i hope it might help you in some way to start with.

I took the custom model binder(for specific property Type) approach since that's another extensibility point to deal with complex model/property binding in ASP.NET MVC

Custom Model Binder

 public class ComplexObjectModelBinder : IModelBinder
    {
        public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {
            var contentType = controllerContext.HttpContext.Request.ContentType;
            if (!contentType.StartsWith("application/json", StringComparison.OrdinalIgnoreCase))
                return (null);

            string jsonString;

            using (var stream = controllerContext.HttpContext.Request.InputStream)
            {
                stream.Seek(0, SeekOrigin.Begin);
                using (var reader = new StreamReader(stream))
                    jsonString = reader.ReadToEnd();
            }

            if (string.IsNullOrEmpty(jsonString)) return (null);

            DynamicComplexObject ExtraData = new DynamicComplexObject();

            ExtraData.Details = new JavaScriptSerializer().Deserialize<dynamic>(jsonString);

            return (ExtraData);
        }
    }

Register the custom binder in Global.asax:

public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            //Custom model binder registration
            ModelBinders.Binders.Add(typeof(Models.DynamicComplexObject), new ComplexObjectModelBinder());

            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }

View Models:

public class ContentViewModel
{
    public Guid Id { get; set; }
    public int TypeId { get; set; }
    public int FormId { get; set; }
    public DynamicComplexObject ExtraData { get; set; }
}
//You may try to improve the following model and update the custom model binder logic as appropriate.
public class DynamicComplexObject
{
    public dynamic Details { get; set; }
}

In following JSON i added one more level nesting for testing

var data = {
        "Id": "",
        "TypeId": "37",
        "FormId": "",
        "ExtraData": {
            "title": "Some random title",
            "contribute": "author",
            "location": {
                "url": "/Files/ed5cf2ea-c920.jpeg",
                "size": "100",
                "format": "application/json",
                "onemorelocation": { //Added one more nested object to test
                    "a": 1,
                    "b": 2
                }
            }
        }
    };
$("#btnSubmit").on("click", function () {
        $.ajax({
            "datatype": "json",
            "contentType": "application/json; charset=utf-8",
            "type": "POST",
            "url": '@Url.Action("SaveData", "Home")',
            "data": JSON.stringify(data),
            success: function (d) {
               //Do stuff here
            }
        });
    });

From debugging i can see the binding happening as shown in image.

Answer 2

Siva's answer might work but I did not want to mess with the default Model Binder. After reading this I could understand why my dynamic/Dictionary was not binding correctly.

So, I've created a custom ValueProvider and that replaced the default JsonValueProviderFactory which does not work with dynamic neither nested dictionaries.

JsonNetValueProviderFactory

public sealed class JsonNetValueProviderFactory : ValueProviderFactory
{
    public override IValueProvider GetValueProvider(ControllerContext controllerContext)
    {
        if (controllerContext == null)
            throw new ArgumentNullException("controllerContext");

        if (!controllerContext.HttpContext.Request.ContentType.StartsWith("application/json", StringComparison.OrdinalIgnoreCase))
            return null;

        var reader = new StreamReader(controllerContext.HttpContext.Request.InputStream);
        var bodyText = reader.ReadToEnd();

        return String.IsNullOrEmpty(bodyText) ? null : new DictionaryValueProvider<object>(JsonConvert.DeserializeObject<ExpandoObject>(bodyText, new ExpandoObjectConverter()), CultureInfo.CurrentCulture);
    }
}

Global.asax.cs

public static void RegisterFactory()
{
        ValueProviderFactories.Factories.Remove(ValueProviderFactories.Factories.OfType<JsonValueProviderFactory>().FirstOrDefault());
        ValueProviderFactories.Factories.Add(new JsonNetValueProviderFactory());
        JsonConvert.DefaultSettings = () => new JsonSerializerSettings
        {
            TypeNameAssemblyFormat = FormatterAssemblyStyle.Simple,
            TypeNameHandling = TypeNameHandling.All
        };

 }

ViewModel

public class ContentViewModel
{
   public Guid Id { get; set; }
   public int TypeId{ get; set; }
   public int FormId{ get; set; }
   public dynamic ExtraData { get; set; }
}

Again, Siva's answer might also work but for my case, I think it was better to create a custom ValueProvider instead of messing with the model binder.

Here is working:

Also, a list of very helpful links: ASP.Net MVC3 JSON.Net Custom ValueProviderFactory ASP.NET MVC 3 – Improved JsonValueProviderFactory using Json.Net