Passing JSON data from View to Controller is null

Question

What I am trying to do is have the user be able to add new/delete JQuery tabs that will have certain model data in them, and then save it to a database. I am trying to make an ajax call to pass the JSON data to the controller, but when I trace it the data is coming in null.

View:

// gloabal variables
            var tabs;
.
.
.

 tabs = $("#tabs").tabs();
.
.
.
   // save tabs to database
            function SaveTabs() {
                var d1 = ko.toJSON(this);
                var associativeArray = { tabs: d1 };
                $.ajax({
                    url: "@Url.Action("SaveTabs")",
                    data: associativeArray,
                dataType: "json",
                type: "POST",
                traditional: true,
                contentType: "application/json; charset=utf-8",              

            });
            };

Controller:

public ActionResult SaveTabs(Survey survey, List<TabViewModel> tabs)
        {
             //TODO: save to DB

            //Need to finish it so that we can return real values.
            return Json(tabs);
        }

the d1 variable is not a survey, I don't have a way to get the survey yet, I just wanted to make sure I could pass data into the controller first. So I am assuming I'll need to have a dictionary that has a tab and a survey in the SaveTabs method in the controller.

Answer 1

As per comments from supercool & Brian, you need to update ajax call to add JSON.stringify like :

        $.ajax({
                url: "@Url.Action("SaveTabs")",
                data: JSON.stringify(associativeArray),
            dataType: "json",
            type: "POST",
            traditional: true,
            contentType: "application/json; charset=utf-8",              

        });

Answer 2

Try do it:

data: associativeArray.serialize()