Send JSON data via POST (ajax) and receive json response from Controller (MVC)

How to Send and Receive JSON Data via POST (Ajax) in MVC Controller

Are you struggling with sending JSON data via POST and receiving a JSON response from your MVC Controller? Don't worry, I've got you covered. In this guide, I'll walk you through the common issues you might encounter and provide easy solutions. So let's dive in!

The Problem: sendInfo Becomes Null in the Controller Action

In your JavaScript function, you're trying to send JSON data to the controller, but the sendInfo becomes null in the controller action. Let's see what could be causing this.

The Solution: Proper Model Binding and Data Type

To fix this issue, you need to ensure that the model binding works correctly and that the data types match between the JavaScript object and the server-side model.

1. Specify the Request Content Type: In your JavaScript $.ajax call, add contentType: "application/json" to specify the content type as JSON.

$.ajax({
    type: "POST",
    url: "/Home/Add",
    dataType: "json",
    contentType: "application/json", // Add this line
    success: function (msg) {
        // ...
    },
    data: JSON.stringify(sendInfo) // Stringify the JSON object
});

1. Declare Properties as Public in the Model: In your PersonSheets model, make sure to declare the properties as public. This is essential for proper model binding.

public struct PersonSheets
{
    public int Id { get; set; } // Add get and set
    public string Name { get; set; }
    public string Address { get; set; }
    public string Phone { get; set; }
}

1. Use [FromBody] Attribute: In your controller action, use the [FromBody] attribute to specify that the data is coming from the request body.

[HttpPost]
public ActionResult Add([FromBody] PersonSheets sendInfo) // Use [FromBody] attribute
{
    // ...
}

By following these steps, you should now be able to send the JSON data successfully to the controller and ensure that sendInfo is not null.

Sending Back a JSON Response

You also mentioned sending back a response to AJAX via JSON. Yes, it is possible! In the controller action, you can return a JSON object using the Json method. Here's an example:

[HttpPost]
public ActionResult Add([FromBody] PersonSheets sendInfo)
{
    bool success = _addSomethingInList.AddNewSomething(sendInfo);

    return this.Json(new { msg = success });
}

In the JavaScript success function of your AJAX call, you can access the response JSON like this:

success: function (msg) {
    if (msg) {
        // Success logic
    } else {
        // Error logic
    }
}

Conclusion: You're Ready to Send and Receive JSON Data in MVC

Congratulations! 🎉 You've learned how to send JSON data via POST (Ajax) and receive a JSON response from your MVC Controller. Remember to ensure proper model binding, specify the content type, and use the [FromBody] attribute. Plus, don't forget that you can send back the response to AJAX using JSON.

Now it's time to give it a try in your project. Don't hesitate to leave any questions or comments below. Happy coding! 💻