-3

I see it move in the full calendar but the web method is not being called. I set a breakpoint in the code behind just to determine if anything is happening and nothing. I have tried stepping through the js part and the ajax style call. My values are not empty so I really am not sure what is wrong. I would expect that putting a breakpoint in the code behind means if the method fires it would pause at the breakpoint but it isn't. So here is the complete source code aspx and aspx.cs pages.

default.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="FullCalJQuery._Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<meta charset='utf-8' />
<link href='Scripts/fullcalendar/fullcalendar.min.css' rel='stylesheet' />
<link href='Scripts/fullcalendar/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='Scripts/fullcalendar/moment.min.js'></script>
<script src='Scripts/fullcalendar/jquery.min.js'></script>
<script src='Scripts/fullcalendar/jquery-ui.min.js'></script>
<script src='Scripts/fullcalendar/fullcalendar.min.js'></script>
<script src='Scripts/fullcalendar/theme-chooser.js'></script>
<script>
    $(document).ready(function () {
        initThemeChooser({
            init: function (themeSystem) {
                var id = null;
                var title = null;
                var starts = null;
                var ends = null;
                $('#calendar').fullCalendar({
                    themeSystem: themeSystem,
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay,listMonth'
                    },
                    weekNumbers: true,
                    navLinks: true, // can click day/week names to navigate views
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    events: <%=JsonEvent %>,
                    eventDrop: function(event, delta, revertFunc) {
                        if (!confirm("Are you sure about this change?")) {
                            revertFunc();
                        }
                        else {
                            id = event.id;
                            title = event.title;
                            starts = event.start;
                            ends = event.end;
                            $.ajax({
                                type: "POST",
                                url: "Default.aspx/btnSample_Click",
                                data: '{RecID: "' +id '",'+'EvtTitle:"'+title+ '",'+ 'Starts:"'+starts+ '",'+'Ends:"'+ends+ '"' + '}',
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: OnSuccess,
                                failure: function(response){
                                    alert(response.d);
                                }
                            });
                        }
                        function OnSuccess(response){
                            alert(response.d);
                            alert("success");
                        }
                    }
                });
            },
            change: function (themeSystem) {
                $('#calendar').fullCalendar('option', 'themeSystem', themeSystem);
            }

        });

    });
</script>

<style>
    body {
        margin: 0;
        padding: 0;
        font-size: 14px;
    }

    #top,
    #calendar.fc-unthemed {
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    }

    #top {
        background: #eee;
        border-bottom: 1px solid #ddd;
        padding: 0 10px;
        line-height: 40px;
        font-size: 12px;
        color: #000;
    }

        #top .selector {
            display: inline-block;
            margin-right: 10px;
        }

        #top select {
            font: inherit; /* mock what Boostrap does, don't compete  */
        }

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    .clear {
        clear: both;
    }

    #calendar {
        max-width: 900px;
        margin: 40px auto;
        padding: 0 10px;
    }
</style>

<div id='top'>
    <div class='left'>
        <div id='theme-system-selector' class='selector'>
            Theme System:

            <select>
                <option value='bootstrap3' selected>Bootstrap 3</option>
                <option value='jquery-ui'>jQuery UI</option>
                <option value='standard'>unthemed</option>
            </select>
        </div>

        <div data-theme-system="bootstrap3" class='selector' style='display: none'>
            Theme Name:

            <select>
                <option value='' selected>Default</option>
                <option value='cosmo'>Cosmo</option>
                <option value='cyborg'>Cyborg</option>
                <option value='darkly'>Darkly</option>
                <option value='flatly'>Flatly</option>
                <option value='journal'>Journal</option>
                <option value='lumen'>Lumen</option>
                <option value='paper'>Paper</option>
                <option value='readable'>Readable</option>
                <option value='sandstone'>Sandstone</option>
                <option value='simplex'>Simplex</option>
                <option value='slate'>Slate</option>
                <option value='solar'>Solar</option>
                <option value='spacelab'>Spacelab</option>
                <option value='superhero'>Superhero</option>
                <option value='united'>United</option>
                <option value='yeti'>Yeti</option>
            </select>
        </div>

        <div data-theme-system="jquery-ui" class='selector' style='display: none'>
            Theme Name:

            <select>
                <option value='black-tie'>Black Tie</option>
                <option value='blitzer'>Blitzer</option>
                <option value='cupertino' selected>Cupertino</option>
                <option value='dark-hive'>Dark Hive</option>
                <option value='dot-luv'>Dot Luv</option>
                <option value='eggplant'>Eggplant</option>
                <option value='excite-bike'>Excite Bike</option>
                <option value='flick'>Flick</option>
                <option value='hot-sneaks'>Hot Sneaks</option>
                <option value='humanity'>Humanity</option>
                <option value='le-frog'>Le Frog</option>
                <option value='mint-choc'>Mint Choc</option>
                <option value='overcast'>Overcast</option>
                <option value='pepper-grinder'>Pepper Grinder</option>
                <option value='redmond'>Redmond</option>
                <option value='smoothness'>Smoothness</option>
                <option value='south-street'>South Street</option>
                <option value='start'>Start</option>
                <option value='sunny'>Sunny</option>
                <option value='swanky-purse'>Swanky Purse</option>
                <option value='trontastic'>Trontastic</option>
                <option value='ui-darkness'>UI Darkness</option>
                <option value='ui-lightness'>UI Lightness</option>
                <option value='vader'>Vader</option>
            </select>
        </div>

        <span id='loading' style='display: none'>loading theme...</span>
    </div>

    <div class='right'>
    </div>

    <div class='clear'></div>
</div>

<div id='calendar'>
</div>
<input type="submit" id="bntSample" runat="server" style="display: none" onclick="btnSample" />
</asp:Content>

default.aspx.cs

using FullCalJQuery.App_Code;
using Microsoft.Exchange.WebServices.Data;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web.Script.Serialization;
using System.Web.Services;
using System.Web.UI;

namespace FullCalJQuery
{
public partial class _Default : Page
{
    public string JsonEvent { get; set; }
    public string ApptDetails { get; set; }

    public ExchangeService Service
    {
        get
        {
            ExchangeService service = new ExchangeService(ExchangeVersion.Exchange2013_SP1);
            service.Credentials = new WebCredentials("*****************", "*****************");
            service.AutodiscoverUrl("*****************");
            service.Url = new Uri("*****************");
            return service;
        }
    }

    protected DateTime GetFirstDayOfCurrentMonth()
    {
        DateTime firstDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
        return firstDate;
    }

    protected DateTime GetFirstDayOfNextMonth()
    {
        int monthNumber, yearNumber;
        if (DateTime.Now.Month == 12)
        {
            monthNumber = 1;
            yearNumber = DateTime.Now.Year + 1;
        }
        else
        {
            monthNumber = DateTime.Now.Month + 1;
            yearNumber = DateTime.Now.Year;
        }
        DateTime lastDate = new DateTime(yearNumber, monthNumber, 1);
        return lastDate;
    }

    private CalendarFolder FindDefaultCalendarFolder()
    {
        return CalendarFolder.Bind(Service, WellKnownFolderName.Calendar, new PropertySet());
    }

    private CalendarFolder FindNamedCalendarFolder(string name)
    {
        FolderView view = new FolderView(100);
        view.PropertySet = new PropertySet(BasePropertySet.IdOnly);
        view.PropertySet.Add(FolderSchema.DisplayName);
        view.Traversal = FolderTraversal.Deep;
        SearchFilter sfSearchFilter = new SearchFilter.IsEqualTo(FolderSchema.FolderClass, "IPF.Appointment");
        FindFoldersResults findFolderResults = Service.FindFolders(WellKnownFolderName.Root, sfSearchFilter, view);
        return findFolderResults.Where(f => f.DisplayName == name).Cast<CalendarFolder>().FirstOrDefault();
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        DateTime startDate = GetFirstDayOfCurrentMonth();
        DateTime endDate = GetFirstDayOfNextMonth();
        CalendarFolder calendar = FindDefaultCalendarFolder();
        CalendarView cView = new CalendarView(startDate, endDate, 100);
        cView.PropertySet = new PropertySet(AppointmentSchema.Subject, AppointmentSchema.Start, AppointmentSchema.End, AppointmentSchema.Id);
        FindItemsResults<Appointment> appointments = calendar.FindAppointments(cView);

        List<FullCalendarEvent> CalendarEvents = new List<FullCalendarEvent>();
        foreach (Appointment ap in appointments)
        {
            CalendarEvents.Add(
                new FullCalendarEvent()
                {
                    id = ap.Id.ToString(),
                    start = ap.Start.ToString("o"),
                    end = ap.Start.ToString("o"),
                    title = ap.Subject
                });
        }

        ////Format the JSON events according to Full Calendar Specs and insert the JSON obejct into the DOM
        JsonEvent = new JavaScriptSerializer().Serialize(CalendarEvents);
    }

    [WebMethod]
    protected void btnSample_Click(string RecID, string EvtTitle, string starts, string ends)
    {
        ExchangeService Service = new ExchangeService();
        Appointment appointment = Appointment.Bind(Service, new ItemId(RecID.ToString()));
        appointment.Subject = EvtTitle.ToString();
        appointment.Start = Convert.ToDateTime(starts.ToString());
        appointment.End = Convert.ToDateTime(ends.ToString());
        appointment.StartTimeZone = TimeZoneInfo.Local;
        appointment.EndTimeZone = TimeZoneInfo.Local;
        appointment.Update(ConflictResolutionMode.AutoResolve);
        System.Web.HttpContext.Current.Response.Write("Code Behind Reached!");
    }
}
ADyson
  • 57,178
  • 14
  • 51
  • 63
bbcompent1
  • 494
  • 1
  • 10
  • 25
  • `data: '{RecID: "' +id '",'+'EvtTitle:"'+title+ '",'+ 'Starts:"'+starts+ '",'+'Ends:"'+ends+ '"' + '}'`. Why would you make a JSON object by hand like this when it's native to JS? Just build the object naturally. Then stringify it if that's what the backend requires. – ADyson Nov 22 '17 at 14:27
  • Also these lines `id = event.id; title = event.title; starts = event.start; ends = event.end;` are completely redundant, you can just use the event properties directly in your new object, no need to tediously make new variables. Even better, change the backend so it simply accepts a `FullCalendarEvent` object directly instead of separate fields which (for no apparent useful reason) have different names from the fullCalendar ones. – ADyson Nov 22 '17 at 14:29
  • Also, sending event.start and event.end directly in a string will almost certainly not work properly. They're momentJS objects, not strings. If you try to stringify them you probably won't get something wihch the server will see as a valid date. Instead format them as a string in UTC time (you can google the momentJS method to use for this) and pass that to the server. – ADyson Nov 22 '17 at 14:32
  • Lastly, if the backend method is not being called, then logically you need to debug the front-end using your browser's dev tools (console, network tab, debug breakpoints). You say your values are ok, but then what? What happens in the network tab? Does the call get made? Are the correct fields and values in the request body? What response do you get from the server, if any? What status code? Have you checked the server's event logs for any problems? – ADyson Nov 22 '17 at 14:33
  • One more thing, you put `dataType: "json"` as if you're expecting data in the response back from the server. But the server method is `void` and will return nothing. Once you fix the stuff above, this will likely give you a problem since jQuery will try to parse null as an object, and crash. Just remove that line since it's not necessary. The OnSuccess method will likely fail too because it tries to read a response which won't exist. So that also needs amending. – ADyson Nov 22 '17 at 14:36
  • ADyson, can you post your comments as an answer? I'd like to give you marks but I don't think I can do it on comments. :) – bbcompent1 Nov 28 '17 at 14:38
  • Well I would like to do that if I can, thanks, but which part specifically helped you? What was the issue? Mostly I just made suggestions or asked you questions rather than something which formed a concrete, verifiable answer. – ADyson Nov 28 '17 at 14:53

1 Answers1

0

What I ended up doing with perseverance and a lot of Google searches is this:

                    function UpdateEvent(event)
                {
                    var data = {};
                    data.id = event.id;
                    data.starts = event.start;
                    data.ends = event.end;
                    data.subject = event.title;

                    $.ajax({
                        url: 'Calendar.aspx/UpdateEvent',
                        method: 'POST',
                        dataType: 'JSON',
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify(data),
                        success: function (response, type, xhr) {
                            var retVal = JSON.stringify(response);
                        },
                        error: function (xhr) {
                            window.alert('error: ' + xhr.statusText);
                        }

                    });
bbcompent1
  • 494
  • 1
  • 10
  • 25