The ASP.NET Core 2.1.1 controller encounters null data upon receiving an AJAX post request

Question

The ASP.NET Core 2.1.1 controller encounters null data upon receiving an AJAX post request

Struggling with sending a JavaScript value from my razor page to a controller in ASP.NET. The value always ends up being null, despite reaching the controller breakpoint. I've searched for solutions without much success.

I'm not very familiar with JavaScript, so any tips or guidance would be greatly appreciated. Here's the snippet of JavaScript causing the issue:

 var clickButton = function (buttonId) {
        $.ajax({
            type: "POST",
            async: false,
            cache: false,
            crossDomain: false,
            contentType: "application/json; charset=utf-8",
            url: "v1/buttons",
            dataType: "json",
            data: '{ buttonId:'+JSON.stringify( "buttonId" ) + '}',
            success: function (result) {
                //console.log("clickButton OK => " + result);
            }, 
            timeout: 500
        }); 
    }

Here is the corresponding C# controller code:

[Route( "v1/[controller]" )]
public class ButtonsController : Controller
{
 ...
  [HttpPost]
  public IActionResult OnButtonClicked( string buttonId )
  {
    // buttonId = null !!!
   ...

Additionally, encountering issues passing a boolean value to another controller where it defaults to false. Could this be related to a security restriction preventing unauthorized users from sending data via POST?

javascript c#controller asp.net-ajax asp.net-core-2.1

Answer 1

Answer №1

The issue resided in the JSON structure, and I managed to extract the value by making a minor adjustment, even though it was well concealed.

 var clickButton = function (buttonNo) {
     console.log("clicked: " + buttonNo);
     $.ajax({
         type: "POST",
         url: "v1/buttons/",
         dataType: "json",
         data: { "buttonId": buttonNo }, // < === this is where the problem lay !!
         success: function (result) {
         }, 
      }); 
    }

I have updated the controller to accept a string for identifying the button. Here's how it looks now:

[Route( "v1/[controller]" )]
public class ButtonsController : Controller
{
  ...
  [HttpPost]
  public IActionResult PostButtonClick( string buttonId ) {
    // The buttonId variable now holds a value !!!
  }
}

Answer 2

The issue resided in the JSON structure, and I managed to extract the value by making a minor adjustment, even though it was well concealed.

 var clickButton = function (buttonNo) {
     console.log("clicked: " + buttonNo);
     $.ajax({
         type: "POST",
         url: "v1/buttons/",
         dataType: "json",
         data: { "buttonId": buttonNo }, // < === this is where the problem lay !!
         success: function (result) {
         }, 
      }); 
    }

I have updated the controller to accept a string for identifying the button. Here's how it looks now:

[Route( "v1/[controller]" )]
public class ButtonsController : Controller
{
  ...
  [HttpPost]
  public IActionResult PostButtonClick( string buttonId ) {
    // The buttonId variable now holds a value !!!
  }
}

The ASP.NET Core 2.1.1 controller encounters null data upon receiving an AJAX post request

Answer №1

Similar questions

Locating an image within another image using Node.js

What exactly is the significance of this line: Loaded += MyWindow_Loaded;

Having difficulty assigning properties in react-redux

The issue of receiving a 500 error when making a POST request in node.js

Checking that an object's keys are all present in an array in TypeScript should be a top priority

Exploring ways to modify the orientation of the Table of Contents in Aspose.Word for C# .Net

Error encountered while attempting to save a Mongoose post on Heroku, although it is successful

Update user control attribute based on a calendar event

Using native DLLs in ASP.NET: A step-by-step guide

Exploring the compatibility of Next.js with jest for utilizing third-party ESM npm packages

Distinguishing Data Input Formats for REST WCF Services (JSON vs XML)

Unable to locate template or render function for Vue Draggable Next component

When the OnSubmit function is called, it triggers three other functions and then verifies the return types. However, one of the functions is failing to be

The jQuery code functions smoothly on computers, but experiences delays when running on an iPhone

Having trouble passing data from JavaScript to PHP with AJAX

Is a single f.select impacting another f.select in the same form? (undesired)

P/Invoke - performing basic arithmetic operations with structured parameters

What is the best way to refresh VUE components while executing a promise?

What sets apart returning Task<bool> from simply returning bool?

Bringing in JavaScript files from a Bootstrap theme to incorporate them into a Vue3 application