Скачать или смотреть Understanding How to POST a List of Objects to an MVC Controller with AJAX

Discover how to properly `send data` via AJAX to an MVC controller in .NET Core 3.1 and troubleshoot issues effectively.
---
This video is based on the question https://stackoverflow.com/q/63874615/ asked by the user 'jimmy' ( https://stackoverflow.com/u/457386/ ) and on the answer https://stackoverflow.com/a/63875202/ provided by the user 'Saeid Amini' ( https://stackoverflow.com/u/11655094/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: .net core 3.1 post ajax list of objects to MVC controller no data arriving

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Introduction

Handling AJAX requests in ASP.NET Core MVC can sometimes lead to confusion, especially when it comes to posting collections of data. A common issue developers face is how to send a list of objects to a controller and ensure that the data is correctly received. In this post, we will explore one such scenario where a developer attempted to post a list of objects but encountered empty data upon reaching the controller.

The Problem

The developer's goal was to send a list of pricing objects using jQuery AJAX to an MVC controller. However, they experienced an issue where the editedPrices parameter arrived as zero in the controller, prompting the question: What was going wrong?

The highlighted JavaScript code was attempting to send the data incorrectly, which caused confusion regarding the data format and the controller's ability to parse it.

Analyzing the AJAX Call

Let's take a closer look at the JavaScript code that was used to make the AJAX call:

[[See Video to Reveal this Text or Code Snippet]]

Key Issues

Data Format:

The data is being sent in the format {editedPrices : newPrices}. This creates a new object that does not match the expected input in the controller.

JSON Serialization:

Even though editedPrices is defined, it is not being sent properly as an array of objects because the object structure is incorrect.

The Solution

The solution to this problem is quite straightforward. You need to modify the AJAX call to ensure it sends the data in a format that the ASP.NET MVC controller can understand.

Step-by-Step Fix

Change the Data Parameter:
Instead of wrapping your newPrices in an object, just send the JSON.stringify(newPrices) directly. Here's the corrected line of code:

[[See Video to Reveal this Text or Code Snippet]]

Updated AJAX Call

Here is the corrected AJAX code:

[[See Video to Reveal this Text or Code Snippet]]

What Happens Next

With this change, when you send the AJAX request:

The data will be serialized into JSON and sent as an array directly to the controller.

The controller can then receive it correctly and count the elements in the list as intended.

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

When dealing with AJAX requests in .NET Core MVC, correctly formatting the data is crucial for ensuring successful communication between the client and server. By sending the editedPrices as an array directly through JSON.stringify, the controller can now properly handle incoming data. If you ever find yourself in similar situations, remember the importance of adhering to expected structures in your AJAX calls.

Improve your web applications by mastering data handling techniques like this!