How to: (a) send JSON data from the browser to the controller; and (b) send the transformed data to SQL Server within ASP.NET MVC?

Question

I have a form which includes a variety of <input> elements and makes use of 1-to-n tabulator tables for data input. I have managed to successfully assemble data from these elements into a JSON string. I am now attempting to complete the following two steps:

1. Using Ajax, post the JSON object to my web server; and
2. In the ASP.NET MVC controller, upload the deserialized JSON data into a SQL Server 2016 table.

My client-side script to POST the JSON object is as follows:

var myJson = "the data from the form elements is programmatically inserted into the JSON string";

// use parseJSON() to test the syntax
try {
    var obj = jQuery.parseJSON(myJson);
}
catch(error) {
    console.log(error);
}
$.ajax({
        type: "POST",
        url: "/Dailies/UploadJson/",
        dataType: 'json',
        data: JSON.stringify(myJson),
        contentType: 'application/json',
        crossDomain: true,
        cache: false,
        success: function(data) { console.log(data); }
});

The method called within my ASP.NET MVC controller appears as follows:

[HttpPost]
public IActionResult UploadJson(Object jsonFile)
{
    // insert data into SQL Server table
}

Note: I have already created the appropriate domain model within my ASP.NET MVC app and have also added a DbSet reference to the DbContext model. I have verified my ability to insert rows into the SQL Server table using mock data.

When I place a breakpoint inside the UploadJson() method, I find that the jsonFile object is null.

My quandry at this point is two-fold:

1. I can't seem to get JSON data from the client to the web server; and
2. I need to better understand how to transform the JSON data (once received) for upload into my database.

Any assistance is greatly appreciated.

Answer 1

Although there are plenty of questions related to this, the answers to those typically refer to binding to a model instead of just the json string. But those will also help you.

It looks like there are two things:

1. I would change the controller to receive a string instead of an object.
2. You'll need to update the json data you're passing to the controller to match the parameter name of the controller. So in this case, the controller would receive a parameter named jsonFile. So in the $.ajax method you'll want update the data to something like:

data: { jsonFile: JSON.stringify(myJson) }

UPDATE:

3. remove the Content-Type of application/json