Click here to Skip to main content
15,867,771 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
Hi,

I need to pass an Array of Objects from Jquery to my HomeController

I tried everything but with no result, the method in controller get called but the suposed passed list ist empty.

What I have tried:

Java
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script>.
.
.
.

var canvasField = {
            id: cStep,
            recStartx: last_mousex,
            recStarty: last_mousey,
            recWidth: width,
            recHeight: height
        };
var canvasFields = new Array();
canvasFields.push(canvasField);

var myJsonString = JSON.stringify(canvasFields);  //only for test

$('#btnClick').click(function (e) {
            $.ajax({
                url: "@Url.Action("GetCanvasFields")",
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify(canvasFields),
                success: function () {
                    alert("yes");
                },
                error: function (errMsg) {
                    alert(errMsg);
                }
            })
        });
</script>



first I checked if the Array "canvasFields" is filled correctly so I converted it to Json string and put it in an alert and the result was fine


unfortunately even thought the method "GetCanvasFields" get called but my list keeps empty
my HomeController:
C#
[HttpPost]
        public ActionResult GetCanvasFields([FromBody] List<CanvasField> canvasFields)
        {
            return Json(new
            {
                resut = "OK"
            });
        }

 public class CanvasField
    {
        public int Id { get; set; }
        public int RecStartx { get; set; }
        public int RecStarty { get; set; }
        public int RecWidth { get; set; }
        public int RecHeight { get; set; }
    }
Posted
Updated 17-Apr-20 2:46am
v12
Comments
Maciej Los 17-Apr-20 5:14am    
You've stated that you checked RecLists instead of canvasField. Can you check it?
F-ES Sitecore 17-Apr-20 8:05am    
Your function accepts a param called "canvasFields"

public ActionResult GetCanvasFields([FromBody] List<canvasfield> canvasFields)

but your js is passing canvasField

data: { canvasField: canvasField },

The two names have to match. There may well be other issues, google for passing lists to controllers, it's very well documented.
Nizar Belhiba 17-Apr-20 8:07am    
Sorry @F-ES Sitecore I updatet the code
I tried within my click Funktion with $('#btnClick').click(function (e) {

canvasFields = [{
id: 1,
recStartx: 2,
recStarty: 3,
recWidth: 4,
recHeight: 5
},
{
id: 2,
recStartx: 2,
recStarty: 3,
recWidth: 4,
recHeight: 5
}];


$.ajax({
url: "@Url.Action("GetCanvasFields")",
type: 'post',
contentType: 'application/json',
data: JSON.stringify(canvasFields),
success: function () {
alert("yes");
},
error: function (errMsg) {
alert(errMsg);
}
})
});

and here it did work but as soon I keep canvasFields.push(canvasField); I get result null

On the client side, you are best off sending the data as JSON, which you have defined as both data- and content- types.

In the server side, you are not receiving a collection of objects. You are are actually receiving a JSON string.
What you need to do then, is to deserialize that string into your list.

Microsoft has some pretty good documentation and samples to get you started:
How to serialize and deserialize JSON using C# - .NET | Microsoft Docs[^]
 
Share this answer
 
Comments
Nizar Belhiba 16-Apr-20 15:08pm    
unfortunately that was not the issue, I know how to serials and deserials a json string/file in c#. Even if I change my method to get a string it's still empty.
baaaaaaahhhhhhhhh Soooooorrrrry
The Issue were completely on the wrong side.... nothing with my script or my controller.
the Model was the problem
as I mentioned in the comment I tried with
JavaScript
$('#btnClick').click(function (e) {

canvasFields = [{
                  id: 1,
                  recStartx: 2,
                  recStarty: 3,
                  recWidth: 4,
                  recHeight: 5
                },
                {
                  id: 2,
                  recStartx: 2,
                  recStarty: 3,
                  recWidth: 4,
                  recHeight: 5
               }];

$.ajax({
url: "@Url.Action("GetCanvasFields")",
type: 'post',
contentType: 'application/json',
data: JSON.stringify(canvasFields),
success: function () {
alert("yes");
},
error: function (errMsg) {
alert(errMsg);
}
})
});


and When I checked the actual json string by
JavaScript
myJsonString = JSON.stringify(canvasFields);

and then compare it using the same step with my dynamic filled canvasFields
I figured out that the values in my json string are from type float and my model was set to accept int.

so by changing my model to double everything worked:
C#
public class CanvasField
   {
       public double Id { get; set; }
       public double RecStartx { get; set; }
       public double RecStarty { get; set; }
       public double RecWidth { get; set; }
       public double RecHeight { get; set; }
   }
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900