Array of Objects (Javascript) to C# via Ajax

Question

I have read over a lot of other people having this issue sending and array of objects to code behind C#.

Javascript

   --This constructs an array of objects called Shifts, 
   -- there is more too it but it is just how it iterates the divs for elements and such, 
   -- not important for this issue. 
   -- This is where the issue is, or I suspect in the way the data is sent and retrieved. 


Shifts = JSON.stringify({ events: Shifts });
$.ajax({
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    url: '/API/ManRoster',
    data: Shifts,
    error: function() {
        $('#info').html('<p>An error has occurred</p>');
    },
    success: function(data) {
        console.log(data);
    },
    type: 'POST'
});

console.log(Shifts);

Shifts Raw Data

{"events":[{"ShiftID":"10","EVTDate":" 2016-04-15","UID":"1","Notes":"hgr"},{"ShiftID":"10","EVTDate":" 2016-04-15","UID":"1","Notes":"hgr"},{"ShiftID":"15","EVTDate":" 2016-04-15","UID":"1","Notes":"uyuy"},{"ShiftID":"15","EVTDate":" 2016-04-15","UID":"1","Notes":"uyuy"}]}

ManRoster.cs

    [HttpPost("")]
    public JsonResult Post(List<Models.Event> events)
    {
        try
        {
            _context.Events.AddRange(events);

            return Json(true);
        }
        catch
        {
            Response.StatusCode = (int)HttpStatusCode.BadRequest;
            return Json("Failed");
        }
    }

Event.cs

public class Event
{
    [Key]
    public int EVTID { get; set; }

    public int UID { get; set; }
    public int ShiftID { get; set; }

    public DateTime EVTDate { get; set; }
    public string Notes { get; set; }
}

In ManRoster.cs I get 0 rows in events. So somewhere the data gets lost in the send over.

Any help on this issue would be great.

Edit 1

Changed Javascript

Shifts = JSON.stringify(Shifts);
$.ajax({
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    url: '/API/ManRoster',
    data: { events: Shifts },
    error: function() {
        $('#info').html('<p>An error has occurred</p>');
    },
    success: function(data) {
        console.log(data);
    },
    type: 'POST'
});

console.log(Shifts);

try : Shifts = JSON.stringify(Shifts ); and pass data as data : {events : Shifts} in ajax parameter. — Anupam Singh
– Anupam Singh, Commented Apr 8, 2016 at 4:48
What @AnupamSingh shows is a common mistake that you've made. You want the content to be JSON, but your keys still need to be regular keys. — Matthew Herbst
– Matthew Herbst, Commented Apr 8, 2016 at 4:55
Gave that a shot and still getting 0 objects on the C# side. - See Edit 1 for the changes — Caz1224
– Caz1224, Commented Apr 8, 2016 at 5:31

Fabien ESCOFFIER · Accepted Answer · 2016-04-08 05:57:21Z

1

Assuming that your pre stringyfied Shifts is someting like :

[
  {
    "ShiftID": 10,
    "EVTDate": "2016-04-15",
    "UID": 1,
    "Notes": "hgr"
  },
  {
    "ShiftID": 10,
    "EVTDate": "2016-04-15",
    "UID": 1,
    "Notes": "hgr"
  },
  {
    "ShiftID": 15,
    "EVTDate": "2016-04-15",
    "UID": 1,
    "Notes": "uyuy"
  },
  {
    "ShiftID": 15,
    "EVTDate": "2016-04-15",
    "UID": 1,
    "Notes": "uyuy"
  }
]

You should add the [FromBody] attribute to your parameter to tell the model binder that the value come from the body :

[HttpPost("")]
public JsonResult Post([FromBody]List<Models.Event> events)
{
    try
    {
        _context.Events.AddRange(events);

        return Json(true);
    }
    catch
    {
        Response.StatusCode = (int)HttpStatusCode.BadRequest;
        return Json("Failed");
    }
}

And your javascript should look like :

Shifts = JSON.stringify(Shifts);
$.ajax({
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    url: '/API/ManRoster',
    data: Shifts,
    error: function () {
        $('#info').html('<p>An error has occurred</p>');
    },
    success: function (data) {
        console.log(data);
    },
    type: 'POST'
});

console.log(Shifts);

edited Apr 8, 2016 at 5:57

answered Apr 8, 2016 at 5:49

Fabien ESCOFFIER

4,9511 gold badge22 silver badges32 bronze badges

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

1 Comment

Caz1224 Over a year ago

You win the game! Worked straight out of the box

Collectives™ on Stack Overflow

Array of Objects (Javascript) to C# via Ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related