Fullcalendar.io - 尝试使用webmethod背后的代码,但不会触发

时间:2017-11-22 13:05:52

标签: javascript c# fullcalendar webmethod

我看到它在完整日历中移动但是没有调用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!");
    }
}

1 个答案:

答案 0 :(得分:0)

我最终坚持不懈地做了很多谷歌搜索:

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

                    });