ASP.NET MVC 3, receive JSON partially as a dictionary?

Question

How can I receive a JSON as a model (contains a dictionary) in a MVC 3 action?

Browser side: Post a JSON to a MVC3 action:

UpdateData : 
{
   Id: 88991,
   Changes:
   {
      X:5,
      Y:6
   }
}

Server side:

public class UpdateDataModel
{
    public int Id {get;set;}
    public IDictionary<string, string> Changes {get;set;}
}

public ActionResult SaveUpdateData(UpdateDataModel updateData)
{
    // updateData.Id should be 88991
    // updateData.Changes should be a dictionary containing X:5, Y:6
}

karaxuna · Accepted Answer · 2012-12-19T08:29:25.777

3

I think it should be like this:

UpdateData : 
{
   Id: 88991,
   Changes:
   [
      { Key: 'X', Value: 5 },
      { Key: 'Y', Value: 6 }
   ]
}

edited Dec 19 '12 at 08:29

answered Dec 19 '12 at 07:40

karaxuna

26,752
13
82
117

I didn't test, but is it a valid Javascript object? – Zach Dec 19 '12 at 08:21
I forgot to change "{" with "[". Now it's valid – karaxuna Dec 19 '12 at 08:30

score 1 · Answer 2 · answered Dec 19 '12 at 08:47

I typically do this by POSTing back to the server via ajax with jQuery in combination with the JSON library.

Your json posted back to the server needs to correctly match the properties in your server side model so that the default model binder in MVC can figure out what to map it to. Your controller action/route would be just fine, here is what it would look like client-side:

    function Save()
    {
        var data = {
            updateData: {
                Id: 85,
                Changes: [
                    { Key: 'A', Value: 'B' },
                    { Key: 'C', Value: 'D' },
                ]
             }
        };

        $.ajax({
            type: 'POST',
            url: '/someController/SaveUpdateData',
            contentType: 'application/json',
            dataType: 'json',
            data: JSON.stringify(data),
            success: function(response) {
                //do stuff here after finishing server side
            }
        });
    }

jQuery Library

JSON Library

ASP.NET MVC 3, receive JSON partially as a dictionary?

2 Answers2