Passing 2d Array from ajax to controller ASP.Net MVC

Question

I'm new in this Asp.Net MVC. How to pass 2d Array from ajax request to controller. I'm passing this array to parameter in my Controller but it gives me a null value. Here's my code:

View script

$("#UpdatePosition").click(function () {
var positions = [];
$('.updated').each(function () {
    positions.push([$(this).attr('data-index'), $(this).attr('data-position')]);
    $(this).removeClass('updated');
});

$.ajax({
    type: 'POST',
    cache: false,
    dataType: 'JSON',
    async: false,
    traditional: true,
    //contentType: 'application/json; charset=UTF-8',
    url: '@Url.Action("UpdateCategoryGroupPosition", "Admin")',
    data: { data: positions }, //Sample position data = [1,1], [2,2], [3,3]
        success: function (result) {
            if (result == true) {
                alert("sucess")
            }else{
                alert("failed")
            }

        }, error: function (xhr, status, error) {
            alert(error);
        }
    });
});

in Controller

[HttpPost]
public JsonResult UpdateCategoryGroupPosition(string[][] data)
{
    var result = false;

    try
    {
        if (data!= null)
        {
            
            }
            result = true;
        }
    }
    catch (Exception ex)
    {
        throw ex;
    }

    return Json(result, JsonRequestBehavior.AllowGet);
}

Thanks for helping me.

Answer 1

I already solve my problem. Thank you @Amit Kotha for helping me Here's the solution

In View

$("#UpdatePosition").click(function () {
var positions = [];
$('.updated').each(function () {
    positions.push([$(this).attr('data-index'), $(this).attr('data-position')]);
    $(this).removeClass('updated');
});

$.ajax({
    type: 'POST',
    cache: false,
    dataType: 'JSON',
    async: false,
    traditional: true,
    contentType: 'application/json',
    url: '@Url.Action("UpdateCategoryGroupPosition", "Admin")',
    data: JSON.stringify({ data: positions }),

    success: function (result) {
        if (result == true) {
            alert('success')
        }
      

    }, error: function (xhr, status, error) {
        alert(error);
    }
 });
});

In Controller

[HttpPost]
public JsonResult UpdateCategoryGroupPosition(int[][] data)
{
var result = false;

try
{
    if (data != null)
    {
        foreach (var _pos in data)
        {

            int index = _pos[0];
            int value = _pos[1];

            //update query

        }
        result = true;

    }

}
catch (Exception ex)
{
    throw ex;
}

return Json(result, JsonRequestBehavior.AllowGet);
}

Answer 2

Here is the updated javascript which I just ran and it gave me correct result

$(document).ready(function () {
        var postions = [[1, 1], [2, 2],[3,3]];
        $.ajax({
            type: "GET",
            cache: false,
            dataType:"JSON",
            async:false,
            traditional:true,
            contentType: "application/json; charset=UTF-8",
            url: "/Home/UpdateCategoryGroupPosition",
            data: { data:postions },

            success: function (data) {
                $('#alertMessage').html(data);
            }
        });

    });