CODEWITHSUNDEEP
c#jqueryajaxasp.net-mvcmodel-view-controller
Kaveman
Kaveman

Reputation: 33

Ajax Post passing null to Controller

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

Upvotes: 3

Views: 5334

Answers (4)

Milind Raj
Milind Raj

Reputation: 1

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);
}

Upvotes: 0

venogn
venogn

Reputation: 56

change like this;

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

Upvotes: 1

Pranav Pk
Pranav Pk

Reputation: 1

$(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")
      }
    });
  })

Upvotes: -2

Rory McCrossan
Rory McCrossan

Reputation: 337714

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"
  }
}

Upvotes: 3

Related Questions