Passing JSON array in AJAX call sending null in MVC

Question

I am trying to pass an array of json objects to my controller action and it keeps coming in as null.

Javascript Code

function UpdateSelected() {
    var items = {};

    //Loop through grid / sub grids and create json array
    $('.k-detail-row .k-grid').each(function () {
        var grid = $(this).data("kendoGrid");
        var selectedElements = grid.select();
        for (var j = 0; j < selectedElements.length; j++) {
            var item = grid.dataItem(selectedElements[j]);
            var json = item.toJSON();
            items = [].concat(items, json);
        }
    })

    //shift the first empty space out
    items.shift();

    //items is ready to send
    alert(JSON.stringify(items));
    $.ajax({
        cache: false,
        url: '/Update/GetSchematicsForSelectedVariants',
        type: 'GET',
        data: JSON.stringify(items),
        success: function (data) {
            alert("success");
        }
    });
}

The Json array looks like this:

Controller Action

public JsonResult GetSchematicsForSelectedVariants(List<VariantViewModel> vm)//vm coming in null
{
    return Json(_dataAccessService.GetSchematicsForMacroVariants(vm),JsonRequestBehavior.AllowGet);
}

VariantViewModel

public class VariantViewModel
{
    public string Id { get; set; }
    public string Variant { get; set; }
}

So I am not to sure what is going wrong here. My list is being passed in as null. I am not to keen on passing json objects to the controller but I believe I have the gist of what I need.

Could someone please point me in the right direction?

I could be wrong about this, but I think your problem could be that you are passing an array into data, rather than key - values. — ControlAltDel
– ControlAltDel, Commented Oct 10, 2019 at 20:08
change type:'get' to type:'post' or add [HttpGet] to the controller method. — Alex Kudryashev
– Alex Kudryashev, Commented Oct 10, 2019 at 20:13
You need to pass this type of data as a POST request. When it is a GET the data gets appended to the url. If you want to keep it as a GET, try doing processData: false. — Pedro Estrada
– Pedro Estrada, Commented Oct 10, 2019 at 20:17
Thank you for the suggestions but neither of those worked. I changed the method to a POST and also tried changing the controller to HttpGet. — Selthien
– Selthien, Commented Oct 10, 2019 at 20:21
Try this @Selthien, tag your method in c# with [HttpPost] change your ajax type to POST, and dont stringify your data. — Pedro Estrada
– Pedro Estrada, Commented Oct 10, 2019 at 20:29

Selthien · Accepted Answer · 2019-10-10 20:36:05Z

3

I found the issue. My data needed to be passed in the following way in my AJAX request. Can't believe I missed this honestly.

$.ajax({
        cache: false,
        url: '/Update/GetSchematicsForSelectedVariants',
        type: 'POST',
        data: {'ListOfVariants' : items},
        success: function (data) {
            alert("success");
        }
    });

Thank you everyone for your comments it helped point me in the right direction.

answered Oct 10, 2019 at 20:36

Selthien

1,25811 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

Passing JSON array in AJAX call sending null in MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related