c# - 使用 ASP.NET、C# 和 JSON 将事件添加到完整日历

标签 c# jquery asp.net json fullcalendar

好的，所以我知道这可能有点重复这个问题:fullCalendar events not showing even though correct JSON feed 但是在尝试代码无济于事之后，我想我会发布另一个问题，看看是否有人可以提供帮助

基本上，我尝试使用来自 SQL Server 数据库的数据通过 ASP.NET C# 将事件动态添加到 Full Calendar JQuery 插件。

这是我在代码隐藏文件中的 web 方法中使用的代码

[WebMethod]
public static String TestOnWebService()
{

    String connectionString = WebConfigurationManager.ConnectionStrings["UniString"].ConnectionString;
    SqlConnection myConnection = new SqlConnection(connectionString);

    myConnection.Open();

    String query = "SELECT * FROM timetable";

    SqlCommand cmd = new SqlCommand(query, myConnection);

    SqlDataReader reader = cmd.ExecuteReader();


    string myJsonString = "";
    List<object> myList = new List<object>();


    if (reader.HasRows)
    {
        var indexOfId = reader.GetOrdinal("id");
        var indexOfLecture = reader.GetOrdinal("lecture");
        var indexOfStartDate = reader.GetOrdinal("start_date");
        var indexOfEndDate = reader.GetOrdinal("end_date");
        var indexOfTimeStart = reader.GetOrdinal("start_time");
        var indexOfTimeEnd = reader.GetOrdinal("end_time");


        while (reader.Read())
        {

            var Id = reader.GetValue(indexOfId).ToString();
            var Lecture = reader.GetValue(indexOfLecture).ToString();
            var DateStart = reader.GetValue(indexOfStartDate).ToString();
            var DateEnd = reader.GetValue(indexOfEndDate).ToString();
            var StartTime = reader.GetValue(indexOfTimeStart);
            var EndTime = reader.GetValue(indexOfTimeEnd);


            //Convert Implicity typed var to Date Time
            DateTime RealStartDate = Convert.ToDateTime(DateStart);
            DateTime RealEndDate = Convert.ToDateTime(DateEnd);


            //Convert Date Time to ISO
            String SendStartDate = RealStartDate.ToString("s");
            String SendEndDate = RealEndDate.ToString("s");


            timeTable t_table = new timeTable(Id, Lecture, SendStartDate, SendEndDate);


            myList.Add(t_table);


        }
        myJsonString = (new JavaScriptSerializer()).Serialize(myList);


        myConnection.Close();
    }

    return myJsonString;

}

这是我的 AJAX 调用，我用它通过 POST 方法获取 JSON 数据:

$(document).ready(function () {

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    eventClick: function() {
        alert('a day has been clicked!');
    }, 
    events: function (start, end, callback) {
        $.ajax({
            type: "POST",    
            url: "webserv.aspx/TestOnWebService",   
            contentType: "application/json; charset=utf-8",  
            dataType: "json",
            success: function (doc) {
                alert("Success");
                var events = [];
                alert(doc.d);
                var obj = $.parseJSON(doc.d);  
                console.log(obj);
                $(obj.event).each(function () {                           
                    events.push({
                        title: $(this).attr('title'),  
                        start: $(this).attr('start'),     
                        end: $(this).attr('end'),
                        id: $(this).attr('id')
                    });
                });                     
                //callback(events);
                callback && callback(events);
            },
            error: function(xhr, status, error) {
                alert(xhr.responseText);
            }
        });
    }
})

})

AJAX 调用似乎成功了，因为我可以提示一条成功消息，我还可以提示 JSON 数据，如下所示:

alert(doc.d)

我还可以在控制台中输出 JSON 数据的解析对象，如下所示:

var obj = $.parseJSON(doc.d);

执行此操作时我在控制台中没有收到任何错误，但事件似乎没有添加到完整日历用户界面(在我的页面上也显示正常)。

我想我可能在使用以下代码的某个地方出错了，但我似乎无法确定:

$(obj.event).each(function () {                           
  events.push({
  title: $(this).attr('title'),  
  start: $(this).attr('start'),     
  end: $(this).attr('end'),
  id: $(this).attr('id')
});

当我使用这段代码时，我还收到错误“回调不是函数”:

callback(events);

但当我使用这个时不是:

callback && callback(events);

我不确定这是否与我遇到的问题有关，但我想我会添加它以防万一。

提前感谢您的任何回复，非常感谢。

编辑:

抱歉，我忘记为我的 timeTable 类添加代码。具体如下:

public class timeTable
{
public String id { get; set; }
public String title { get; set; }
public String start { get; set; }
public String end { get; set; }

public timeTable(String I, String t, String ds, String de)
{
    this.id = I;
    this.title = t;
    this.start = ds;
    this.end = de;
}


}

我的 HTML 实际上只有一行:

<div id="calendar"></div>

这是我在页面头部链接的 javascript 文件

        <!-- Javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src='js/moment.js'></script>
<script src='js/fullcalendar.js'></script>
<script src="js/script.js"></script>

更新:

所以我尝试过的另一件事是遍历我使用 JSON 字符串创建的对象并将其插入事件数组，但这似乎也不起作用。见下面的代码:

$(document).ready(function () {

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    eventClick: function () {
        alert('a day has been clicked!');
    },
    events: function (start, end, callback) {
        $.ajax({
            type: "POST",
            url: "webserv.aspx/TestOnWebService",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (doc) {
                alert("Success");
                var events = [];
                alert(doc.d);
                var obj = $.parseJSON(doc.d);
                console.log(obj);

                for (var k in obj) {// k represents the id keys 1,2,3
                    var d = obj[k]; // We assign a the reference to each id object to the d variable
                      for (var p in d) { //Next we access the nested objects by using the p variable
                          if (p.hasOwnProperty) { //Check to make sure p has its own properties
                              //alert(p + ":" + d[p]); //We alert the key (d) and the keys value (d[p])
                              events.push(p + ": " + d[p]);
                              }

                            }
                     }
                console.log(events);

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

})

它将数组输出到控制台，但仍未在完整日历 UI 上显示任何事件:-(

更新 2

这是我的下一个代码编辑，它似乎也没有用，我不确定为什么当它用所需的值很好地填充事件数组时，我还添加了一个 addDay = "false"属性，但仍然没有快乐，任何人都有任何想法，我很难过:

$(document).ready(function () {

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    eventClick: function () {
        alert('a day has been clicked!');
    },
    events: function () {
        $.ajax({
            type: "POST",
            url: "webserv.aspx/TestOnWebService",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (doc) {
                alert("Success");
                var events = [];
                //console.log(doc.d);
                var obj = $.parseJSON(doc.d);
                //console.log(obj);

                $.each(obj, function (index) {

                    $.each(obj[index], function (key, value) {

                        events.push(key + ": " + value)


                    });

                });

                console.log(events);

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

})

最佳答案

更正确:

<script>

    $(document).ready(function () {

        $.ajax({
            type: "POST",
            url: "../04_Entries/04_42_ReservationCalander.aspx/TestOnWebService",
            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);


               $('#calendar').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);
            }
        });
    });

</script>

关于c# - 使用 ASP.NET、C# 和 JSON 将事件添加到完整日历，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33388957/

上一篇：c# - 如何以 DateTime 格式初始化 8 小时

下一篇：c# - 如何在泛型方法中有一个匿名返回类型？(就像 linq 中的 select 方法)

相关文章：

c# - 更新剩余的敌人数量 - Unity

c# - 在 Window 应用程序中用 C# 打开 Pdf 文档

jQuery 可用时间选择器

asp.net - 在用户控件中修改页眉

c# - 局部变量或类字段？

c# - 使用 Unity 注入(inject)特定实现

jquery - Bootstrap Image Gallery - 根据相册显示图片

javascript - 读取JSON格式的数据 asp.net MVC中查看

asp.net - 英国邮政编码查找流程的好例子

javascript - 如何在 ASP.NET 中配置面板背景图像

©2024 IT工具网  联系我们