[FIXED] Ereignisse werden von C# nicht in Fullcalendar gerendert

Ausgabe

Ich erstelle den fulcalendar in document ready und ich habe eine Asp-Schaltfläche, die die folgende C#-Funktion ausführt, um die Daten abzurufen.

 public void getAppointments()
    {
        List<Appoinment> appoinmentList = new List<Appoinment>();
        AppointmentController appointmentController = new AppointmentController();
        PublicUserProfileController publicUserProfileController = new PublicUserProfileController();
        PublicUserProfile publicUserProfile = new PublicUserProfile();
        //appoinmentList = appointmentController.fetchAppointmentByConsultent(Int32.Parse(Session["ICid"].ToString()));
        appoinmentList = appointmentController.fetchAppointmentByConsultent(3);

        var frontAppoinmentList = new List<object>();

        foreach (var appoinment in appoinmentList)
        {
            publicUserProfile = publicUserProfileController.fetchPublicUserNameById(appoinment.PublicUserProfileId);
            var name = publicUserProfile.FirstName + " " + publicUserProfile.LastName;

            frontAppoinmentList.Add(new
            {
                id = appoinment.Id.ToString(),
                title = name,
                start = appoinment.UtcStartTime,
                end = appoinment.UtcEndTime
            });

        }

        // Serialize to JSON string.
        JavaScriptSerializer jss = new JavaScriptSerializer();
        String json = jss.Serialize(frontAppoinmentList);
        var msg = String.Format("<script>loadCal('{0}');</script>", json);

        //ClientScript.RegisterStartupScript(GetType(), "hwa", msg, true);
        ScriptManager.RegisterClientScriptBlock(this, GetType(), "none", msg, false);

    }

    protected void btnmonthly_Click(object sender, EventArgs e)
    {
        getAppointments();
    }

Ich habe mein JS, um den JSON abzufangen und die Ereignisse zu laden als,

function loadCal(eventList){
    eventList = $.parseJSON(eventList);
    alert(JSON.stringify(eventList));

        for (var j = 0; j < eventList.length; j++) {

        eventList[j].start = new Date(parseInt(eventList[j].start.replace("/Date(", "").replace(")/",""), 10));
        eventList[j].end = new Date(parseInt(eventList[j].end.replace("/Date(", "").replace(")/",""), 10));


    };
    alert(JSON.stringify(eventList[0].start));

        for (var j = 0; j < eventList.length; j++) {
            var eId = eventList[0].id;
            var eStart = eventList[0].start.toISOString();
            var eEnd = eventList[0].end.toISOString();
            var eTitle = eventList[0].title;
                    var event=
                    [{
                        id: eId,
                        title: eTitle,
                        start: eStart ,
                        end:eEnd

                    }];

                    $('#appCalendar').fullCalendar( 'renderEvent', event, true);
                };

   }

Ich erstelle den vollständigen Kalender als Dokument fertig,

$('#appCalendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: ''
        },
        defaultDate: today,
        defaultView: 'month',
        editable: true

    });

Das Render-Ereignis rendert keine Ereignisse, aber wenn ich dies in der Konsole übergebe, werden die Ereignisse gerendert.

var event=[{ id:1, title:”manoj”, start:”2017-06-15T22:30:00.000Z”, end:”2017-06-15T23:30:00.000Z” }];

$(‘#appCalendar’).fullCalendar(‘renderEvent’, event, true);

Das ist genau das, was ich von meiner loadCal-Funktion mit dem von mir übergebenen json erwarte. Dies sind die Werte, die für das Ereignis-Array (eTitle, eId usw.) festgelegt wurden, als ich Breakpoints in loadCal überprüft habe.

Kann mir bitte jemand sagen, warum die Ereignisse nicht gerendert werden? Ich bin jetzt schon seit Stunden dabei.

Update
Ich habe C# in eine Webmethode geändert, da

[WebMethod(EnableSession = true)]
    public static string GetEvents()
    {
        List<Appoinment> appoinmentList = new List<Appoinment>();
        AppointmentController appointmentController = new AppointmentController();
        PublicUserProfileController publicUserProfileController = new PublicUserProfileController();
        PublicUserProfile publicUserProfile = new PublicUserProfile();
        //appoinmentList = appointmentController.fetchAppointmentByConsultent(Int32.Parse(Session["ICid"].ToString()));
        appoinmentList = appointmentController.fetchAppointmentByConsultent(3);

        var frontAppoinmentList = new List<object>();

        foreach (var appoinment in appoinmentList)
        {
            publicUserProfile = publicUserProfileController.fetchPublicUserNameById(appoinment.PublicUserProfileId);
            var name = publicUserProfile.FirstName + " " + publicUserProfile.LastName;

            frontAppoinmentList.Add(new
            {
                id = appoinment.Id.ToString(),
                title = name,
                start = appoinment.UtcStartTime,
                end = appoinment.UtcEndTime
            });

        }

        // Serialize to JSON string.
        JavaScriptSerializer jss = new JavaScriptSerializer();
        String json = jss.Serialize(frontAppoinmentList);
        return json;
    }

und mein Jquery zu,

$(document).ready(function () {
    $('#appCalendar').fullCalendar({
    eventClick: function() {
        alert('a day has been clicked!');
    }, 
        events: function (start, end, callback) {
        $.ajax({
            type: "POST",    //WebMethods will not allow GET
            url: "AppointmentDiary.aspx/GetEvents",   //url of a webmethod - example below

            //completely take out 'data:' line if you don't want to pass to webmethod - Important to also change webmethod to not accept any parameters 
            contentType: "application/json; charset=utf-8",  
            dataType: "json",
            success: function (doc) {
                var events = [];   //javascript event object created here
                var obj = $.parseJSON(doc.d);  //.net returns json wrapped in "d"
                $(obj).each(function () {
                        var startd=     new Date(parseInt(this.start.replace("/Date(", "").replace(")/",""), 10));
                        var endd = new Date(parseInt(this.end.replace("/Date(", "").replace(")/",""), 10));                 
                        events.push({
                        title: this.title,  //your calevent object has identical parameters 'title', 'start', ect, so this will work
                        start:startd.toISOString(), // will be parsed into DateTime object    
                        end: endd.toISOString(),
                        id: this.id
                    });
                });                     
                //if(callback) callback(events);
                //$('#appCalendar').fullCalendar( 'renderEvent',events[0], true);
                alert(JSON.stringify(events[0]));

            }
        });
        return events;
    }
   });
});

Callback wird “false”, wenn dies ausgeführt wird, aber ich kann sehen, dass die Webmethode dies in der Warnung zurückgibt, nachdem die Daten formatiert wurden.

Ich erhalte die Daten aus dem Aspx, ich kann sie in der Jquery lesen und ich kann immer noch kein even.at rendern. An diesem Punkt weiß ich nicht, was ich tun soll. Können Sie sich bitte meinen Code ansehen und darauf hinweisen, was falsch ist? Außerdem verstehe ich die Verwendung von (Start, Ende, Rückruf) in der Funktion nicht, da ich das sowieso nicht in der Webmethode verwende.

Lösung

Ich habe meine Frage endlich gelöst.

Meine C#-Methode zum Abrufen von Daten und Übergeben als JSON ist,

[WebMethod(EnableSession = true)]
    public static string GetEvents()
    {
        List<Appoinment> appoinmentList = new List<Appoinment>();
        AppointmentController appointmentController = new AppointmentController();
        PublicUserProfileController publicUserProfileController = new PublicUserProfileController();
        PublicUserProfile publicUserProfile = new PublicUserProfile();
        //appoinmentList = appointmentController.fetchAppointmentByConsultent(Int32.Parse(Session["ICid"].ToString()));
        appoinmentList = appointmentController.fetchAppointmentByConsultent(3);

        var frontAppoinmentList = new List<object>();

        foreach (var appoinment in appoinmentList)
        {
            publicUserProfile = publicUserProfileController.fetchPublicUserNameById(appoinment.PublicUserProfileId);
            var name = publicUserProfile.FirstName + " " + publicUserProfile.LastName;

            frontAppoinmentList.Add(new
            {
                id = appoinment.Id.ToString(),
                title = name,
                start = appoinment.UtcStartTime,
                end = appoinment.UtcEndTime
            });

        }

        // Serialize to JSON string.
        JavaScriptSerializer jss = new JavaScriptSerializer();
        String json = jss.Serialize(frontAppoinmentList);
        return json;
    }

Meine Jquery zum Erstellen des Fullcalendar und Rendern der Events ist,

 $(document).ready(function () {

    $.ajax({
        type: "POST",
        url: "AppointmentDiary.aspx/GetEvents",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (doc) {

            var events = [];
            var docd = doc.d;


            var obj = $.parseJSON(doc.d);
            console.log(obj);
            alert(JSON.stringify(obj));
for (var j = 0; j < obj.length; j++) {

        obj[j].start = new Date(parseInt(obj[j].start.replace("/Date(", "").replace(")/",""), 10));
        obj[j].start = obj[j].start.toISOString();
        obj[j].end = new Date(parseInt(obj[j].end.replace("/Date(", "").replace(")/",""), 10));
        obj[j].end = obj[j].end.toISOString();


    };

           $('#appCalendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                eventClick: function () {

                },

                editable: false,

                events: obj //Just pass obj to events
            })
            console.log(events);

        },
        error: function (xhr, status, error) {
            alert(xhr.responseText);
        }
    });
});

Beantwortet von – PeeBee

Antwort geprüft von – Mary Flores (FixError Volunteer)