jQuery JSON Data Posting to ASP .NET MVC 4 Controller Action

├Źndice
  1. Overview
  2. Step 1: Create the Controller Action
  3. Step 2: Create the jQuery Code
  4. Step 3: Test the Code
  5. Conclusion

Overview

When working with ASP .NET MVC 4, it's common to use jQuery to post JSON data to a controller action. This can be useful for updating data on the server without reloading the page. In this article, we'll walk through the steps to accomplish this task.

Step 1: Create the Controller Action

The first step is to create a controller action that will handle the JSON data. In this example, we'll create an action called "UpdateData".

public ActionResult UpdateData(MyModel data)
{
    // Update data on the server
    return Json(new { success = true });
}

Step 2: Create the jQuery Code

Next, we'll create the jQuery code that will post the JSON data to the controller action. We'll use the $.ajax() method to make the post request.

var data = { name: "John", age: "35" };
$.ajax({
    type: "POST",
    url: "/MyController/UpdateData",
    data: JSON.stringify(data),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (result) {
        alert("Data updated successfully.");
    },
    error: function () {
        alert("An error occurred.");
    }
});

Step 3: Test the Code

Finally, we'll test the code to make sure everything is working correctly. When we run the code, it should post the JSON data to the controller action and return a success message.

Conclusion

In this article, we've walked through the steps to post JSON data to an ASP .NET MVC 4 controller action using jQuery. By following these steps, you should be able to update data on the server without reloading the page.

Click to rate this post!
[Total: 0 Average: 0]

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Go up

Below we inform you of the use we make of the data we collect while browsing our pages. You can change your preferences at any time by accessing the link to the Privacy Area that you will find at the bottom of our main page. More Information