Question

I am trying to pass a simple JSON object to a controller using MVC3 and JSON. The object gets passed but I loose all the properties. I see all the properties in firebug on the request but am not sure why I am loosing them on the server. Do all the properties of the object need to be set in order for the mapping to work? I am using MVC3 so the binding should be build in. What am I missing?

Class:

[Serializable]
public class StoryNote
{
    public int Id { get; set; }
    public string Note { get; set; }
    public Nullable<int> StoryCardId { get; set; }
    public string CreatedBy { get; set; }
    public Nullable<System.DateTime> CreateDate { get; set; }
    public virtual StoryCard StoryCard { get; set; }
}

JSON:

$(document).ready(function () {

    $('#newNote').click(function (e) {
        e.preventDefault();
        var storynote = {
            StoryNote: {                  
                Note: $('#Note').val(),
                StoryCardId: $('#StoryCard_Id').val(),
                CreatedBy: 'Xyz',                }
        };


        $.ajax({
            url: '@Url.Action("PostNote")',
            type: 'POST',
            data: JSON.stringify(storynote),
            dataType: 'json',                
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                $('#previousNotes').append(data.Note + '<br/>' + data.CreatedBy + '<br/><hr/>');
            },
        });
    });
});

Controller:

    [HttpPost]
    public JsonResult PostNote(StoryNote newStoryNote)
    {

        StoryNote newNote = new StoryNote { Note = newStoryNote.Note, CreatedBy = newStoryNote.CreatedBy, StoryCardId = newStoryNote.StoryCardId, CreateDate = DateTime.Now };
        db.StoryNotes.Add(newStoryNote);

        return Json(newStoryNote, JsonRequestBehavior.AllowGet);
    }

Answer 1

You have a name mismatch in your code – parameter is named “StoryNote” in Javascript code and “newStoryNote” in Controller. Those names should be equal. I believe if you change

var storynote = {
        StoryNote: {                  
            Note: $('#Note').val(),
            StoryCardId: $('#StoryCard_Id').val(),
            CreatedBy: 'Xyz',                }
    };

to

var storynote = {
        newStoryNote: {                  
            Note: $('#Note').val(),
            StoryCardId: $('#StoryCard_Id').val(),
            CreatedBy: 'Xyz',                }
    };

then your code should work.