• Javascript
  • Python
  • Go

Posting an Array of Complex Objects: JSON and jQuery in ASP.NET MVC

With the increasing popularity of web development, it has become essential for developers to have a strong understanding of various data for...

With the increasing popularity of web development, it has become essential for developers to have a strong understanding of various data formats and how to manipulate them. One such data format is JSON (JavaScript Object Notation), which has gained a lot of traction in recent years due to its simplicity and compatibility with most programming languages. In this article, we will explore how to post an array of complex objects in JSON format using jQuery in ASP.NET MVC.

First, let's understand what exactly is an array of complex objects. In simple terms, it is an array that contains multiple objects, each with its own set of properties and values. These objects can be nested within each other, making it a complex data structure. Now, let's say we want to post this array of complex objects to our ASP.NET MVC controller using jQuery. How do we do that? Let's find out.

To begin with, we need to create a model class that represents the structure of our complex object. For the purpose of this article, we will create a "Product" model class with the following properties: Id, Name, Price, and Quantity.

public class Product


public int Id { get; set; }

public string Name { get; set; }

public decimal Price { get; set; }

public int Quantity { get; set; }


Next, we will create an array of this Product class in our controller and populate it with some dummy data.

public ActionResult Index()


var products = new Product[]


new Product { Id = 1, Name = "Product 1", Price = 10.99, Quantity = 5 },

new Product { Id = 2, Name = "Product 2", Price = 19.99, Quantity = 10 },

new Product { Id = 3, Name = "Product 3", Price = 7.99, Quantity = 3 }


return View(products);


Now, in our view, we will use jQuery's $.ajax() method to post this array of complex objects to our controller.

$(document).ready(function() {

$("#btnSubmit").click(function() {

var products = @Html.Raw(Json.Encode(Model)); //converts the array of products to JSON format


type: "POST",

url: "/Home/PostProducts",

data: JSON.stringify(products), //converts the JSON data to a string

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function(result) {

//handle success response from controller


error: function(result) {

//handle error response from controller





In the above code, we use the @Html.Raw() method to convert our array of products to JSON format, as jQuery's $.ajax() method expects the data to be in this format. Then, we use the JSON.stringify() method to convert the JSON data to a string, which is then sent to our controller via the "data" parameter.

Now, let's take a look at our controller's action method that will receive this array of complex objects.


public ActionResult PostProducts(List<Product> products)


//do something with the received data

return Json(new { success = true }); //send a success response back to the view


As you can see, we simply receive

Related Articles

Posting JSON Data to ASP.NET MVC

In the world of web development, there are many ways to send and receive data between a client and server. One popular method is through the...

When is JSON preferred over XML?

In today's digital world, data is constantly being exchanged between systems and devices. With the rise of web applications and APIs, it has...

ASP.NET MVC Route Mapping

ASP.NET MVC is a powerful and widely used web development framework for creating dynamic and scalable web applications. One of the key featu...

jQuery: Optimal DOM Insertion Speed

jQuery is a popular JavaScript library that is widely used for its ease of use and powerful features. One of its key features is DOM manipul...

Hide Address Bar in Popup Window

Popup windows are a popular feature on many websites, providing a convenient way to display additional information or prompts to users. Howe...