Ajax Post passing null to Controller

Question

I am making an AJAX POST request to an MVC controller, yet the data is coming through as null. I'm not sure why.

$(document).ready(function() {
  $("#btnSaveCustomer").click(function() {
    debugger; 
    var data = {
      _DcLink: "1",
      _Account: "Test",
      _Name: "TestName",
      _Title: "Mr",   
      _Init: "T"
    }

    $.ajax({
      method: "POST",
      url: '/Customer/SaveCustomer',
      data: JSON.stringify(data),
      success: function() {
        debugger;
        console.log(data)
        alert("Success")
      },
      error: function() {
        alert("Error")
      }
    });
})

public ActionResult SaveCustomer(string data)
{
  using (var ms = new MemoryStream(Encoding.UTF32.GetBytes(data)))
  {
    // Deserialization from JSON  
    DataContractJsonSerializer deserializer = new DataContractJsonSerializer(typeof(Customer));
    Customer serializeddata = (Customer)deserializer.ReadObject(ms);
  }
  return Json(new { Success = true });
}

No matter how I try to serialize the data it is always null. I believe the AJAX POST method is not executing properly

I am using dummy data in order to resolve the problem.

The code hits a breakpoint at MemoryStream in the controller - stating data is null.

System.ArgumentNullException: 'String reference not set to an instance of a String. Parameter name: s'

Any help appreciated

Rory McCrossan · Accepted Answer · 2019-06-20 08:18:47Z

3

It's because the ModelBinder is expecting a property in the JSON named data, yet you're not sending that; all the properties are in the root object. That would work fine if you were binding to a model, but as you're not you need to amend the data structure in your JS slightly, to this:

var data = { 
  data: {
    _DcLink: "1",
    _Account: "Test",
    _Name: "TestName",
    _Title: "Mr",   
    _Init: "T"
  }
}

answered Jun 20, 2019 at 8:18

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kaveman Over a year ago

Hey Rory Thank you for the correction. I see why that would be a problem. Ive made the changes and am still getting the exact same error. Must be something else, Any ideas on maybe a better way to do this?

venogn · Accepted Answer · 2019-06-20 08:59:11Z

1

change like this;

data: {data : JSON.stringify(data)},

answered Jun 20, 2019 at 8:59

venogn

561 silver badge6 bronze badges

1 Comment

Kaveman Over a year ago

Ahh, That seems to have fixed.. Thank you

Milind Raj · Accepted Answer · 2020-09-04 13:25:31Z

0

Having same issues. AJAX call fails. If I remove [FromBody] from controller then the ajax call is successful however, the data is null. I am using .NET Core 3.1 and razor pages

 <script>
      $(document).ready(function () {
        var data = { "name": "John Doe" }
        $.ajax({
            url: "/membership/tester/",
            type: "POST",
            data: JSON.stringify(data),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            headers: {
                RequestVerificationToken: 
                $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            success: function (data) {
                alert('Survey submitted successfully');
            },
            error: function (jqXHR, textStatus, errorThrown) {
                if (jqXHR.status == 500) {
                    alert('Internal error: ' + jqXHR.responseText);
                } else {
                    alert('Unexpected error.' + jqXHR.status);
                  }
               }
          });
       });
    </script>

Here is the controller code

[Route("membership/tester")]
[HttpPost]
public ActionResult Test([FromBody] string somedata)
{
    var data = somedata;
    return Json(data);
}

answered Sep 4, 2020 at 13:25

Milind Raj

1

1 Comment

Milind Raj Over a year ago

So apparently the issue is related to the naming convention. The parameter name in the controller method must match what's specified in the ajax call. To make it work I had to make the following change in ajax call. url: "/evaluations/surveysave/", type: "POST", data: { somedata: JSON.stringify(result.data) },

Rory McCrossan · Accepted Answer · 2019-06-20 08:35:13Z

-2

$(document).ready(function() {
  $("#btnSaveCustomer").click(function() {
    debugger;
    var data = {
      _DcLink: "1",
      _Account: "Test",
      _Name: "TestName",
      _Title: "Mr",
      _Init: "T"
    }

    $.ajax({
      method: "POST",
      url: '/Customer/SaveCustomer',
      data: JSON.stringify(data),
      success: function(data) {
        debugger;
        console.log(data)
        alert("Success")
      },
      error: function() {
        alert("Error")
      }
    });
  })

edited Jun 20, 2019 at 8:35

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

answered Jun 20, 2019 at 8:26

Pranav Pk

1

2 Comments

Pranav Pk Over a year ago

add data in the success function bracket success: function (data) { debugger; console.log(data) alert("Success")

Rory McCrossan Over a year ago

Firstly, what exactly have you changed? Secondly, please take the time to describe what the issues are and why this solution helps.

Collectives™ on Stack Overflow

Ajax Post passing null to Controller

4 Answers 4

1 Comment

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related