Cannot post Json array to web core api

Question

With this code I am trying to post a Json array to a method in my web core API. However the array arrives as null.

importProperties = function (url, callback, data) {
        var properties = JSON.stringify(data);
        $.ajax({
            url: url,
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            data: { "": properties }
        })
            .done(callback)
            .fail(errorMessage);
    }

Once the data is JSON.stringified, it looks like;

[{"UPRN":"12345","StreetName":"COMPORT GREEN","AddressLine2":"NEW ADDINGTON","AddressLine3":"Croydon","AddressLine4":"Surrey","Postcode":"CR0 0BY","Latitude":null,"Longitude":null,"BlockUPRN":"B12345","PropertyNo":"1","BlockName":"Block Court","Comments":null,"PropertyTypeId":6,"NumberOfBathrooms":1,"NumberOfBedrooms":2,"NumberOfKitchens":1,"PropertyContractId":0,"PropertyType":null},
{"UPRN":"67890","StreetName":"COMPORT GREEN","AddressLine2":"NEW ADDINGTON","AddressLine3":"Croydon","AddressLine4":"Surrey","Postcode":"CR0 0BY","Latitude":null,"Longitude":null,"BlockUPRN":"B67890","PropertyNo":"2","BlockName":"Block Court","Comments":null,"PropertyTypeId":6,"NumberOfBathrooms":null,"NumberOfBedrooms":null,"NumberOfKitchens":null,"PropertyContractId":0,"PropertyType":null}]

The method signature on my web core API is;

[HttpPost("{contractId}/import")]
public async Task<IActionResult> Import(int contractId, [FromBody] IEnumerable<PropertyAndContractDto> properties)
{
   this.NLogger.Info($"api/property/contractId = {contractId}/saveproperties".ToPrefix());
   if (properties == null)
   {
      return BadRequest();
   }
...
}

The DTO is

    public class PropertyAndContractDto
    {
        public string UPRN { get; set; }
        public string StreetName { get; set; }
        public string AddressLine2 { get; set; }
        public string AddressLine3 { get; set; }
        public string AddressLine4 { get; set; }
        public string Postcode { get; set; }
        public string Latitude { get; set; }
        public string Longitude { get; set; }
        public string BlockUPRN { get; set; }
        public string PropertyNo { get; set; }
        public string BlockName { get; set; }
        public string Comments { get; set; }
        public int? PropertyTypeId { get; set; }
        public int? NumberOfBathrooms { get; set; }
        public int? NumberOfBedrooms { get; set; }
        public int? NumberOfKitchens { get; set; }
        public int PropertyContractId { get; set; }
        public string PropertyType { get; set; }
    }
}

When I run in Postman it works;

So why is the properties parameter coming in as null?

Answer 1

Try setting the processData property of the ajax call to false, like this:

$.ajax({
            url: url,
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            data: { "": properties },
            processData: false
        })

According to the docs:

By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

Alternatively, just set the data property to your stringified json:

$.ajax({
            url: url,
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            data: properties
        })