Passing array of int to mvc controller with javascript

[Martin.D]

Hi,

 

Im having an issue i passing the selected items from a grid to method on a controller.

 

My View looks like this;

 

<script type="text/javascript" language="javascript">

    function ClearInterfaceState() {
        var items = {};
        var grid = $('#Visits').data('kendoGrid');
        var selectedElements = grid.select();

        for (var j = 0; j < selectedElements.length; j++) {
            var item = grid.dataItem(selectedElements[j]);
            items[j] = item.VisitId;
        }

        var MyAppUrlSettings = {
            MyUsefulUrl : '@Url.Action("ClearInterfaceState","QuickFixes")'
        }
        
        $.ajax({
            url: MyAppUrlSettings.MyUsefulUrl,
            data: items,
            type: "post",
            dataType: "json",
            contextType: "application/json",
            traditional: true,
            success: function (result) {
                alert("Successfully changed");
            },
            error: function (_err) {
                alert(_err);
            }
        });

    };
</script>

 

The data in the items variable is there as I put an alert in to double check. The issue seems to be with the controller as the items is null?

 

        [Authorize]
        [HttpPost]
        public JsonResult ClearInterfaceState(int[] items)
        {
            return Json(new { success = true }, JsonRequestBehavior.AllowGet);
            // Some Code
        }

 

 

Any help with this would be great as I've only been developing for a year now and javascript is still a mystery to me

[adrynalyne]

  On 19/02/2020 at 10:45, Martin.D said:

Hi,

 

Im having an issue i passing the selected items from a grid to method on a controller.

 

My View looks like this;

 

<script type="text/javascript" language="javascript">

    function ClearInterfaceState() {
        var items = {};
        var grid = $('#Visits').data('kendoGrid');
        var selectedElements = grid.select();

        for (var j = 0; j < selectedElements.length; j++) {
            var item = grid.dataItem(selectedElements[j]);
            items[j] = item.VisitId;
        }

        var MyAppUrlSettings = {
            MyUsefulUrl : '@Url.Action("ClearInterfaceState","QuickFixes")'
        }
        
        $.ajax({
            url: MyAppUrlSettings.MyUsefulUrl,
            data: items,
            type: "post",
            dataType: "json",
            contextType: "application/json",
            traditional: true,
            success: function (result) {
                alert("Successfully changed");
            },
            error: function (_err) {
                alert(_err);
            }
        });

    };
</script>

 

The data in the items variable is there as I put an alert in to double check. The issue seems to be with the controller as the items is null?

 

        [Authorize]
        [HttpPost]
        public JsonResult ClearInterfaceState(int[] items)
        {
            return Json(new { success = true }, JsonRequestBehavior.AllowGet);
            // Some Code
        }

 

 

Any help with this would be great as I've only been developing for a year now and javascript is still a mystery to me

Expand  

A couple things. 
1.  Kendo is garbage. 
2. You need to convert your data to a json string. Use JSON.stringify. 

[ZakO]

You don't need to stringify it yourself, jQuery $.ajax handles that for you.

 

The problem is you're sending an array but the ASP.NET model binder is expecting an object (well, string representation of one) to know which parameter to bind to even though you only have one. Change it to:

$.ajax({
	...
	data: { items: items },
	...
});

 

[adrynalyne]

  On 19/02/2020 at 19:03, ZakO said:

You don't need to stringify it yourself, jQuery $.ajax handles that for you.

 

The problem is you're sending an array but the ASP.NET model binder is expecting an object (well, string representation of one) to know which parameter to bind to even though you only have one. Change it to:

$.ajax({
	...
	data: { items: items },
	...
});

 

Expand  

Forgive me if I do not agree.

 

Here is a working example solution that I threw together real quick. It requires .net core 3.1.

Things of note:

• I simply return the POST data that comes in.
• Using jquery ajax without stringifying the data does not work.
• Using jquery ajax with stringifying the data does work.
• Using your data structure of sending it as a named JSON object also does not work.

https://1drv.ms/u/s!AiOH5gkEn6Zfj8FMW-5PTou4SUEeaQ?e=l1ocdq

 

Edited February 22, 2020 by adrynalyne
Fixed link

[ZakO]

editing example

Edited February 23, 2020 by ZakO

[ZakO]

  On 22/02/2020 at 19:46, adrynalyne said:

Forgive me if I do not agree.

 

Here is a working example solution that I threw together real quick. It requires .net core 3.1.

Things of note:

• I simply return the POST data that comes in.
• Using jquery ajax without stringifying the data does not work.
• Using jquery ajax with stringifying the data does work.
• Using your data structure of sending it as a named JSON object also does not work.

https://1drv.ms/u/s!AiOH5gkEn6Zfj8FMW-5PTou4SUEeaQ?e=l1ocdq

 

Expand  

My bad, you're right, for proper JSON requests it does need that, the OPs example threw me off. There's another bug in the OPs code they have contextType instead of contentType as the option so when I was testing (hadn't used jQuery for a long time) the model binder was checking encoded form fields instead of JSON. 

Edited February 23, 2020 by ZakO

[adrynalyne]

  On 23/02/2020 at 02:21, ZakO said:

My bad, you're right, for proper JSON requests it does need that, the OPs example threw me off. There'a another bug in the OPs code they have contextType instead of contentType as the option so when I was testing (hadn't used jQuery for a long time) the model binder was checking encoded form fields instead of JSON. 

Expand  

Ah yup. Good catch. Admittedly, I have tried to move away from JQuery as much as possible so I’m a little rusty with it. 

 

I usually end up having to write vanilla JS for space constraints (iot devices).