CODEWITHSUNDEEP
reactjsaxiosasp.net-core-2.0
Troy Crowe
Troy Crowe

Reputation: 123

Axios Post Issues And .Net Core

I am unable to accomplish a successful ReactJs using Axios Post call where the data is passed to my asp.net core 2.2 web api. The call will only successfully hit my API endpoint when all compound word (last-name) properties are hyphenated, however the data does not get through. Only single word (company) properties receive the data. I believe it is because with the hyphens the properties no longer match. However, if the properties are not hyphenated I receive a 400 error or 415 error. When sending the call via Postman, where all properties are pascal cased, I don't have any issue at all.

I have tried many things to get it to work without solutions. I have added Json Attributes to my .net object properties. I have modified the attribute to also have the hyphens. I have tried changing both my properties in my react to single word and matching them with the Json attribute, e.i created vs CreatedDate. I have also pasted into my post method the exact same json object used in my PostMancall that was successful.

.net post

[HttpPost]
[Route("AddThreshold", Name = "AddThreshold")]
public ActionResult<ThresholdDTO> AddThreshold([FromBody] ThresholdDTO threshold)
{
    var thr = _thresholdService.AddThreshold(threshold);

    if (thr == null)
        return NoContent();

    return Ok(threshold);
}

  const handleAddSubmit = e => {
    e.preventDefault();

    let current_datetime = new Date();
    let formatted_date =
      current_datetime.getFullYear() +
      "-" +
      (current_datetime.getMonth() + 1) +
      "-" +
      current_datetime.getDate() +
      " " +
      current_datetime.getHours() +
      ":" +
      current_datetime.getMinutes() +
      ":" +
      current_datetime.getSeconds();

    console.log(location);

    let threshold = JSON.stringify({
      "Threshold-Id": "",
      Company: company.toString(),
      "Threshold-Type": thresholdType.toString(),
      "Threshold-Value": thresholdValue.toString(),
      "Account-Number": account.toString(),
      "Location-Number": location == "undefined" ? "" : location.toString(),
      "Expected-Amount": expectedAmount.toString(),
      "Created-Date": formatted_date.toString(),
      "Created-By": "System",
      "Updated-Date": "1900-00-00 00:00:00.000",
      "Updated-By": ""
    });

    Axios({
      method: "post",
      url: "https://localhost:44394/Threshold/AddThreshold/",
      data: threshold,
      headers: { "Content-Type": "application/json" }
    })
      .then(function(response) {
        //handle success
        console.log(threshold);
        props.handleAddClose();
      })
      .catch(function(response) {
        //handle error
        console.log(threshold);
      });
  };

AccountNumber: "87605177 (CenturyLink)"
Company: "Deere Employees Credit Union"
CreatedBy: "System"
CreatedDate: "2019-10-27 16:1:51"
ExpectedAmount: "90000"
LocationNumber: "5000"
ThresholdId: ""
ThresholdType: "Invoice Processing"
ThresholdValue: "10"
UpdatedBy: ""
UpdatedDate: "1900-00-00 00:00:00.000"

The above object is exactly what postman is successful with but I receive a 400 code when using axios

Upvotes: 0

Views: 1403

Answers (1)

Troy Crowe
Troy Crowe

Reputation: 123

The problem was my UpdatedDate value did not have an format acceptable to the Json Attribute causing the whole post to fail.

Upvotes: 1

Related Questions