Pass data from ajax function to mvc4 method

Question

I am making a simple MVC4 application with C# and jQuery. In this application, when the user presses a button with the id of SaveCheckboxChanges I want to send two arrays of data to the server, via ajax, using jQuery.

These arrays of data are then read by the server and processed accordingly.

The controller method:

[HttpPost]
public ActionResult UpdateCheckBoxes(string requiresSetupArray, string disabledArray){
    return Json("chamara", JsonRequestBehavior.AllowGet);
}

The Javascript jQuery code:

$("#SaveCheckboxChanges").click(function (event) {
            if (!$("#SaveCheckboxChanges").hasClass("disabled")) {
                var requiresSetupArray = [0, 1, 2];
                var disabledArray = [4, 5, 6];

                $.ajax({
                    url: '/Material/UpdateCheckBoxes',
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify({requiresSetupArray: requiresSetupArray, disabledArray: disabledArray }),
                    success: function (data) {
                        alert("Success ")
                    },
                    error: function () {
                        alert("error");
                    }
                });
            }
        });

The problem so far is that even though the method in the controller is being called correctly, the parameters are always null! What am I missing? Why is my Ajax method not deliverying the information?

Your parameters are string. They should be string[] (or int[]) — user3559349
– user3559349, Commented Nov 7, 2014 at 11:49
Why do you stringify your json-object? Send it as JSON-object instead, should do the trick. — Pochen
– Pochen, Commented Nov 7, 2014 at 12:02

chridam · Accepted Answer · 2014-11-07 12:32:29Z

1

You could try changing your controller method parameters and then set the AJAX traditional parameter to true:

[HttpPost]
public ActionResult UpdateCheckBoxes(int[] requiresSetupArray, int[] disabledArray){
    return Json("chamara", JsonRequestBehavior.AllowGet);
}

Javascript

$("#SaveCheckboxChanges").click(function (event) {
     event.preventDefault();
     if (!$("#SaveCheckboxChanges").hasClass("disabled")) {
         var requiresSetupArray = [0, 1, 2];
         var disabledArray = [4, 5, 6];

         $.ajax({
             url: '/Material/UpdateCheckBoxes',
             type: 'POST',
             contentType: 'application/json; charset=utf-8',
             dataType: 'json',
             traditional: true,
             data: JSON.stringify({
                requiresSetupArray: requiresSetupArray, 
                disabledArray: disabledArray 
             }),
             success: function (data) {
                alert("Success " + checkBoxesNumber)
             },
             error: function () {
                alert("error");
             }
        });
    }
});

edited Nov 7, 2014 at 12:32

answered Nov 7, 2014 at 11:48

chridam

104k26 gold badges246 silver badges243 bronze badges

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

1 Comment

Flame_Phoenix Over a year ago

This solution does not work. Unfortunatly, you forgot to stringify the objects. Other than that, its all good. Please update your answer so I can accept it :D

martenolofsson · Accepted Answer · 2014-11-07 11:48:22Z

0

Instead of having two strings as parameters in the Controller you could have an C# object containing two two arrays as the in parameter in the method. The object will automatically be populated by the values of the posted data. Something like:

public class Something
{
    public List<int> RequiresSetupArray {get;set;}
    public List<int> DisabledArray {get;set;}
}

answered Nov 7, 2014 at 11:48

martenolofsson

5311 gold badge5 silver badges21 bronze badges

Collectives™ on Stack Overflow

Pass data from ajax function to mvc4 method

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related