Passing Multiple values via Ajax to a MVC controller

Question

This is the Ajax Call:

        var selectedProductOptions = new Array();

    $(".optionSelectionBox").each(function () {
        selectedProductOptions.push($(this).val());
    });

$.ajax({
        url: "/Cart/AddItem",
        type: 'post',

        data: JSON.stringify({ 
            productId : @Html.ValueFor(m => m.Product.Id),
            selectedOptions : selectedProductOptions,
        }),
        success: function (data) {
            if (data.IsSuccess) {
                alert("test Hello Success");
            }

            alert("test HELLO Fail");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown + "- Error");
        }
    });

And this is controller that is reciveing the call.

    [HttpPost]
    public JsonResult AddItem(string productId, List<string> selectedOptions)
    {
     //Code here        
    }

When I set a break point on the action it gets hit which is what I want but..... productId and selectedOptions are both NULL.

What Am I doing wrong?

What data is stored in selectedProductOptions? Can you give an example? — Vivek Parekh
– Vivek Parekh, Commented Mar 13, 2014 at 10:01
selectedProductOptions: Array[4] 0: "4" 1: "1" 2: "7" 3: "10" << Thats the object from the chrome developer tools — Ayo Adesina
– Ayo Adesina, Commented Mar 13, 2014 at 10:06

szpic · Accepted Answer · 2014-03-13 09:55:03Z

1

You can also make something like this:

create new class:

public class AddItemModel
    {
        public List<string> selectedOptions { get; set; }
        public string productId { get; set; }
    }

and modify your code:

public JsonResult AddItem(AddItemModel aim)

and ajax call:

data: JSON.stringify({
                    aim: {
                        productId : @Html.ValueFor(m => m.Product.Id),
                        selectedOptions : selectedProductOptions                           
                    }

this also should work

answered Mar 13, 2014 at 9:55

szpic

4,49815 gold badges56 silver badges90 bronze badges

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

1 Comment

Ayo Adesina Over a year ago

Tried that as well.. hits the break point but the object aim is set, but the selectedProductOptions and productId is still null... sigh Im thinking JS serializer is needed here....

Anoop Joshi P · Accepted Answer · 2014-03-13 10:01:28Z

1

Remove , in selectedOptions : selectedProductOptions,

data: JSON.stringify({ 
        productId : @Html.ValueFor(m => m.Product.Id),
        selectedOptions : selectedProductOptions
    }),

Edit

Try with this too

 data: {
 productId: @Html.ValueFor(m = > m.Product.Id),
 selectedOptions: JSON.stringify(selectedProductOptions)
 },

edited Mar 13, 2014 at 10:01

answered Mar 13, 2014 at 9:49

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

2 Comments

Ayo Adesina Over a year ago

Just tried that...Still no Joy... both productId and selectedOptions are still null

Ayo Adesina Over a year ago

I have also tried to change selectedOptions to a List<int> to see if that helps.. No Joy

Ayo Adesina · Accepted Answer · 2014-03-13 11:06:26Z

OK its working Now.... :-)

And this is my solution, hopefully it will help others.

This is the controller Action:

    [HttpPost]
    public JsonResult AddItem(string formData)
    {

    var js = new JavaScriptSerializer();
    AddItemModel addItemModel  = js.Deserialize<AddItemModel>(formData);


   //Other Code here

        return new JsonResult();
    }

    public class AddItemModel
    {
        public List<string> selectedOptions { get; set; }
        public string productId { get; set; }
    }

And this is the Ajax call:

$.ajax({
        url: "/Cart/AddItem",
        type: 'post',

        data: "formData=" + JSON.stringify(cartItem),
        success: function (data) {
            if (data.IsSuccess) {
                alert("test Hello Success");
            }

            alert("test HELLO Fail");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown + "- Error");
        }
    });

There seems to be a lot of different ways in doing this, I got this working this time, but I still don't know why the the first way didn't work, would love for some who really understands this to explain why it didn't work, and what is going on under the hood.

Thanks Guys... on to the next one.

Collectives™ on Stack Overflow

Passing Multiple values via Ajax to a MVC controller

3 Answers 3

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Related