Pass an array as parameter to a controller from an ajax call in JavaScript

Question

I'm working on an ASP.NET MVC 4 website and I've got some troubles with a functionality. I explain, I've to select entities displayed in a table with their linked checkbox :

Screenshot of my table where each row has a checkbox with the same Id as the entity

Console showing updates in the array

Inside my script I have been abled to store each checked Id's checkbox in an array and remove those if the checkbox is unchecked. But I can't pass the array to my controller's function to delete each selected entity in the database. I used $.ajax() from jquery to send through a POST request the array (as JSON) but I always get 500 error :

JSON primitive invalid
Null reference

Here's my function in my script (I don't know if my array's format is valid) :

    var sendDocsToDelete = function (docsArray) {
        $.ajax({
            type: 'POST',
            url: 'Main/DeleteDocuments',
            data: JSON.stringify(docsArray),
            contentType: 'application/json; charset=utf-8',
            datatype: 'json',
            success: function (result) {
                alert('Success ' + result.d);
            },
            error: function (result) {
                alert('Fail ' + result.d);
            }
        });
    }

Then, the POST call the following function in my controller :

    [Authorize]
    [WebMethod]
    public void DeleteDocuments(string docsToDelete)
    {
        int id; 
        string[] arrayDocs = JsonConvert.DeserializeObject<string[]>(docsToDelete);

        foreach (string docId in arrayDocs)
        {
            int.TryParse(docId, out id);
            dal.DeleteDocument(id); // dal = DataAccessLayer is the class which interacts with the database by executing queries (select, delete, update...)
        }
    }

Update 2

    [Authorize]
    public ActionResult DeleteDocuments(int[] docsToDelete)
    {
        try{
               foreach (string docId in arrayDocs)
               {
                       int.TryParse(docId, out id);
                       dal.DeleteDocument(id); // dal = DataAccessLayer is the class which interacts with the database by executing queries (select, delete, update...)
               }
               return Json("Success");
        } 
        catch 
        {
               return Json("Error");
        }
    }


    var sendDocsToDelete = function (docsArray) {
        $.ajax({
            type: 'POST',
            url: 'Main/DeleteDocuments',
            data: docsArray,
            contentType: 'application/json; charset=utf-8',
            datatype: 'json',
            success: function (result) {
                alert('Success ' + result.d);
            },
            error: function (result) {
                alert('Fail ' + result.d);
            }
        });
    }

Any ideas about this issue ? I hoped I was clear enough. Do not hesitate if you need more details.

why using a webMethod in MVC ? you can just use ActionResult — Rajshekar Reddy, May 19 '16 at 13:55
You don't need to `stringify` the data yourself, just pass the array as it is. And you don't need to deserialize it yourself either, just accept `string[] docsToDelete` and let the modelbinder handle that for you. — David Hedlund, May 19 '16 at 13:58
@Reddy I thought it was compulsory by this way because I wasn't expecting a view but an asynchronous update of the actual view. — , May 19 '16 at 14:08
@DavidHedlund I tried but it still fails to recognize my parameter... — , May 19 '16 at 14:09
If you are passing `docsArray` from ajax then same variable name should be used in server side method like `DeleteDocuments(int[] docsArray)`..... And If you are returning `"Success"` as string then you will get same on ajax `success: function (result) {` ... here value of `result` will be `"Success"`.. — Sachin, May 19 '16 at 14:58

Sachin · Accepted Answer · 2016-05-19T15:05:29.887

5

If you are passing an integer array properly from $.ajax (i.e. your docsArray should be having value like [15,18,25,30,42,49]) then you should try :

[Authorize]
public ActionResult DeleteDocuments(int[] docsArray)
{
    //int id; 
    //string[] arrayDocs = JsonConvert.DeserializeObject<string[]>(docsToDelete);
  try {
    foreach (int docId in docsArray)
    {
        //int.TryParse(docId, out id);
        dal.DeleteDocument(docId); // dal = DataAccessLayer is the class which interacts with the database by executing queries (select, delete, update...)
    }
    return "Success ";
  }
  catch {
        return "Error";
  }
}

Update :

Your javascript code should be :

var sendDocsToDelete = function (docsArray) {
    $.ajax({
        type: 'POST',
        url: 'Main/DeleteDocuments',
        data: JSON.stringify(docsArray),
        contentType: 'application/json; charset=utf-8',
        datatype: 'json',
        success: function (result) {
            alert('Success ');
        },
        error: function (result) {
            alert('Fail ');
        }
    });
}

edited May 19 '16 at 15:05

answered May 19 '16 at 14:01

Sachin

2,152
1
21
43

It have to parse it because my Ids are "checkbox123" – May 19 '16 at 14:05
"checkbox123" can not be parse in `int`, you have to pass integer ids like 123 only.. you can see this : http://stackoverflow.com/questions/2099164/jquery-array-of-all-selected-checkboxes-by-class – Sachin May 19 '16 at 14:06
I doubt that AJAX will even hit this method in the first place. Its not a ActionResult – Rajshekar Reddy May 19 '16 at 14:08
1

Thanks @Reddy, added ActionResult – Sachin May 19 '16 at 14:12
@Sachin @Reddy So, I change Ids to be integer (in my view and when I push values in array). But I get again the exception : `System.ArgumentException - Primitive JSON invalid : undefined` – May 19 '16 at 14:48

score 0 · Answer 2 · answered May 19 '16 at 13:57

0

Maybe the datatype in the JSON array is not a string? (This could happen if you have an array in the form of [45,64,34,6], or a mixed one like [345,"wef4"]).

To make sure something is a string in Javascript you can do this: var string = "".concat(otherVar);

answered May 19 '16 at 13:57

dyedgreen

40
1
6

Each element in my array are Id defined in my view such as "checkbox123" and in the console I print each value. – May 19 '16 at 14:06

score 0 · Answer 3 · answered May 19 '16 at 14:00

0

Try changing your ajax data to something like this..

 data : JSON.stringify({'docsToDelete':docsArray}),

answered May 19 '16 at 14:00

Lokesh_Ram

391
4
10

Rajshekar Reddy · Answer 4 · 2016-05-19T14:19:09.067

0

Make these changes to your code.

In Jquery

data: docsArray, no need to stringify the array

In Controller

    [Authorize]                                                //remove [WebMethod]
    public ActionResult DeleteDocuments(string[] docsToDelete) //Add ActionResult, Change parameter to accept array
    {
        int id; 
        string[] arrayDocs = docsToDelete;     //no need of deserilization

        foreach (string docId in arrayDocs)
        {
            int.TryParse(docId, out id);
            dal.DeleteDocument(id); // dal = DataAccessLayer is the class which interacts with the database by executing queries (select, delete, update...)
        }

       return Json(id);    //return id back to ajax call...
    }

edited May 19 '16 at 14:19

answered May 19 '16 at 14:10

Rajshekar Reddy

18,647
3
40
59

Am I maybe missing something but VS says that the ActionResult can't be an integer... Cast not working either. – May 19 '16 at 14:17
@Loïc my bad it should be `return Json(id); ` – Rajshekar Reddy May 19 '16 at 14:19
Ok it makes sense, i'll try – May 19 '16 at 14:23

Pass an array as parameter to a controller from an ajax call in JavaScript

Update 2

4 Answers4

Update :