title: Pass json/javascript data/objects to c# function using ajax
body: <p>I'm using FullCalendar (<a href="http://arshaw.com/fullcalendar/" rel="nofollow">http://arshaw.com/fullcalendar/</a>) and I need help with passing data using json to a c# function in the code behind page of my ASP.net page.</p>
  
  <p>I am using json to load data like so in my FullCalendar web application:</p>
  
  <p><strong>Code behind:</strong></p>
  
  <pre><code>    [WebMethod]
      public static List&lt;Event&gt; GetEvents()
      {
          List&lt;Event&gt; events = new List&lt;Event&gt;();
          events.Add(new Event()
          {
              EventID = 1,
              EventName = "EventName 1",
              StartDate = DateTime.Now.ToString("MM-dd-yyyy"),
              EndDate = DateTime.Now.AddDays(2).ToString("MM-dd-yyyy"),
              EventColor = "red"
          });
          events.Add(new Event()
          {
              EventID = 2,
              EventName = "EventName 2",
              StartDate = DateTime.Now.AddDays(4).ToString("MM-dd-yyyy"),
              EndDate = DateTime.Now.AddDays(5).ToString("MM-dd-yyyy"),
              EventColor = "green"
          });
  
          return events;
      }
  </code></pre>
  
  <p><strong>asp.x page:</strong></p>
  
  <pre><code>     events: function(start, end, callback)
              {
                  $.ajax(
                  {
                      type: 'POST',
                      contentType: 'application/json',
                      data: "{}",
                      dataType: 'json',
                      url: "Calendar.aspx/GetEvents",
                      cache: false,
                      success: function (response) {
  
                          var events = $.map(response.d, function (item, i) {
                              var event   = new Object();
                              event.id    = item.EventID;
                              event.start = new Date(item.StartDate);
                              event.end   = new Date(item.EndDate);
                              event.title = item.EventName;
                              event.color = item.EventColor;
                              return event;
                           })
                           callback(events);
                      },
  
                      error: function (err) {
                         alert('Error');
                      }
                  });
               },
  </code></pre>
  
  <p>This is working fine.  Now I want to save data by calling a function and passing it data.  Here is what I have done so far:</p>
  
  <p><strong>Code behind:</strong></p>
  
  <pre><code>    [WebMethod]
      public static bool SaveEvents(List&lt;Event&gt; events)
      {
          //iterate through the events and save to database
  
          return true;
      }
  </code></pre>
  
  <p><strong>asp.x page</strong></p>
  
  <pre><code>    function save() {
          var eventsFromCalendar = $('#calendar').fullCalendar('clientEvents');
  
          var events = $.map(eventsFromCalendar, function (item, i) {
              var event   = new Object();
              event.id    = item.id;
              event.start = item.start;
              event.end   = item.end;
              event.title = item.title;
              event.color = item.color;
              return event;
          });
  
          $.ajax(
          {
              type: 'POST',
              contentType: 'application/json',
              data: JSON.stringify(events),     **&lt;-- I have to pass data here but how???**
              dataType: 'json',
              url: "Calendar.aspx/SaveEvents",
              cache: false,
              success: function (response) {
                  alert('Events saved successfully');
              },
  
              error: function (err) {
                  alert('Error Saving Events');
              }
          });
          return false;            
      }
  </code></pre>
  
  <p>The above ajax post is where I need help with.  The variable events contais all the FullCalendar event info. 
  How do I pass the data 'events' to the function 'SaveEvents'? 
  I can change the SaveEvents signature if need be.</p>
  
  <p>EDIT
  If I change my c# function to use an array like s0:</p>
  
  <pre><code>    [WebMethod]
      public static bool SaveEvents(Event[] newEvents)
      {
  
          return true;
      }
  </code></pre>
  
  <p>And pass the following data through:</p>
  
  <pre><code>    data: JSON.stringify({ newEvents: events }),
  </code></pre>
  
  <p>Then the function <strong>'SaveEvents'</strong> gets called with an array of size 4 but all the data values are null, why is this?</p>
  
  <p>Thanks</p>