Json not parsing correctly from jQuery AJAX call in MVC4

Question

I am passing back Json via a jQuery AJAX call to a MVC function that takes a Folder. MVC correctly parses some of the data but not the list I sent back.

MVC

public class Folder : IValidate
{
    public int Id { get; set; }
    public string Name { get; set; }
    public ICollection<SearchCriteria> SearchCriteria { get; set; }
}

public class SearchCriteria
{
    public int FolderId { get; set; }
    public int SettingsEntryID { get; set; }
    public string SearchParameter { get; set; }
}

public ActionResult EditFolder(Folder folder)
{
   service.EditFolder(folder);
   return this.Json(Json(new { Success = true }));
}

Javascript

var folder = {
    Id: $("#groupID").val(),
    Name: $("#groupName").val(),
    SearchCriteria: []
};

$(".searchCriteria").each(function () {
    folder.SearchCriteria.push(
        {
            FolderId: $("#groupID").val(),
            SearchParameter: $(this).val(),
            SettingsEntryID: $(this).attr("id").replace("searchCriteria", "")
        });
});

$.ajax({
    url: "/settings/editfolder/",
    type: "POST",
    dataType: "json",
    data: folder,
    traditional: true,
    success: function (data) {
        alert("wsaved");
    }
});

folder, in this function gets set with Id and Name but SearchCriteria is not set properly. It is set to null. If I comment out the traditional: true the list gets created but all the values for each SearchCriteria are 0 or null.

Am I missing something?

You are not sending JSON. You passing an object as data: option, and jQuery will convert the object to a query string, like Id=foo&Name=bar&.... If you really want to send JSON, you have to convert the object to JSON, like data: JSON.stringify(JSON). Whether that is the problem or not, I cannot say (I don't know MVC). — Felix Kling
– Felix Kling, Commented Aug 20, 2013 at 8:47
You are missing two points 1. contentType: 'application/json; charset=utf-8', 2. data: JSON.stringify(folder), And one correction. URL should be like url : "@Url.Action("ActionName", "ControllerName", new { area = "AreaName" })" — Imad Alazani
– Imad Alazani, Commented Aug 20, 2013 at 8:49
When you send your post, Ajax will actually send something like SearchCriteria=Array instead of the actual array. I didn't make binding of list by the past, but you can check this out : hanselman.com/blog/… — Gregoire D.
– Gregoire D., Commented Aug 20, 2013 at 8:52

Imad Alazani · Accepted Answer · 2013-08-20 08:55:49Z

2

You are missing two points

1. contentType: 'application/json; charset=utf-8', 

2. data: JSON.stringify(folder)

And one correction.

URL should be like

url : "@Url.Action("ActionName", "ControllerName", new { area = "AreaName" })"

jQuery

$.ajax({
    url: "@Url.Action("Action", "Controller", new { area = "Area" })",
    type: "POST",
    contentType: 'application/json; charset=utf-8', 
    dataType: "json",
    data: JSON.stringify(folder),
    traditional: true,
    success: function (data) {
        alert("wsaved");
    }
});

answered Aug 20, 2013 at 8:55

Imad Alazani

6,7287 gold badges38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Json not parsing correctly from jQuery AJAX call in MVC4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related