My goal is to create functionality where users can add and delete JQuery tabs with specific model data, and then save this data to a database. I'm attempting to use an ajax call to send JSON data to the controller, but I am encountering an issue where the data is coming in as null when I debug it.
View:
// Global 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 complete this to return real values.
return Json(tabs);
}
The d1 variable does not refer to a survey, as I don't yet have the survey data. I simply wanted to ensure that I could successfully pass data to the controller first. So, I anticipate that I will need to have a dictionary that includes both a tab and a survey in the SaveTabs method within the controller.