Pass JavaScript object to controller

Question

I am trying to pass an object using JavaScript to a controller.

I have used two parameters _amount and _total but the values are empty in the controller on postback. Any ideas why I can't get the values? Also if I want to get the _data which is an object containing different values, how will I achieve it?

var itemsCart=toys.cart._items;

$.ajax({
  url: '@Url.Action("SuccessView", "Home")',
  type: 'POST',
  data:  itemsCart,
  success: function (response) {
    alert(response);
  },
  error: function (xhr, ajaxOptions, throwError) {
    alert(xhr.responseText);
  }
});

Controller:

public IActionResult SuccessView(List<ProductViewModel> products)
  {
    return View();
  }

View Model:

public class ProductViewModel
  {
    public string _amount { set; get; }
    public string _total { set; get; }
  }

And a screenshot of the object from the website:

and missing --> contentType: "application/json; charset=utf-8"` in ajax call? — Prashant Pimpale
– Prashant Pimpale, Commented Dec 27, 2018 at 7:28
Two things, does your API work from Postman? Secondly have your tries using [FromBody] in your post action? — Praneet Nadkar
– Praneet Nadkar, Commented Dec 27, 2018 at 7:54

Tetsuya Yamamoto · Accepted Answer · 2018-12-27 07:44:30Z

1

Sounds like the problem is your parameter is declared as products, but your AJAX data parameter name did not match with controller action parameter name. Try using this setup instead:

JS

$.ajax({
     url: '@Url.Action("SuccessView", "Home")',
     type: 'POST',
     data: { products: itemsCart },
     traditional: true,
     success: function (response) {
         alert(response);
     },
     error: function (xhr, ajaxOptions, throwError) {
         alert(xhr.responseText);
     }
});

Controller Action

[HttpPost]
public IActionResult SuccessView([FromBody] List<ProductViewModel> products)
{
    // do something

    return new JsonResult("OK");
}

Note that since your AJAX call defined as type: POST, you must apply [HttpPost] attribute to the controller action.

Related issue:

Passing A List Of Objects Into An MVC Controller Method Using jQuery Ajax

edited Dec 27, 2018 at 7:44

answered Dec 27, 2018 at 7:30

Tetsuya Yamamoto

25.1k8 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

marios Over a year ago

I have added your code and still the products on controller are null

Tetsuya Yamamoto Over a year ago

How about using traditional: true without stringify? Since you want to pass an array directly as viewmodel collection, traditional: true must be set.

marios Over a year ago

And remove the JSON.stringify() ?

Tetsuya Yamamoto Over a year ago

Just give a try with data: { products: itemsCart } and set traditional: true because you want to pass viewmodel collection as array.

Tetsuya Yamamoto Over a year ago

Try replicate the properties contained inside toys.cart._items array into ProductViewModel and see if it passing the value, or create new array which only contains 2 required properties. As far as I know, to pass JS array into controller action parameter you need to match amount of properties in both sides.

LundinCast · Accepted Answer · 2018-12-27 11:36:39Z

0

Replace

data: { products: itemsCart }

with

data: ({ products: itemsCart })

Controller:

public IActionResult SuccessView(ProductViewModel products)
  {
    //return View();
  }

edited Dec 27, 2018 at 11:36

LundinCast

9,8504 gold badges40 silver badges50 bronze badges

answered Dec 27, 2018 at 9:12

Anoos

1867 bronze badges

Collectives™ on Stack Overflow

Pass JavaScript object to controller

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related