arame3333 arame3333 - 1 year ago 58
Ajax Question

Cannot post Json array to web core api

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;

enter image description here

So why is the properties parameter coming in as null?

Answer Source

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
        })
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download