fullcalendar.io-尝试使用WebMethod后面的代码，但不会发射

Question

我看到它在完整日历中移动，但没有调用Web方法。我在代码后面设置了一个断点，只是确定是否发生了任何事情，什么也没有发生。我尝试踏上JS部分和Ajax样式的调用。我的价值不是空的，所以我真的不确定怎么了。我希望将代码中的断点放在后面的手段，如果方法会在断点上停下来，但事实并非如此。因此，这是完整的源代码ASPX和ASPX.CS页面。

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!");
    }
}

Answer 1

我最终对毅力和许多Google搜索做的是：

                    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);
                        }
                    });