【发布时间】：2015-10-28 10:45:20
【问题描述】：
好的，所以我知道这可能与这个问题有点重复：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;
}
}
这是我用来通过 POST 方法获取 JSON 数据的 AJAX 调用：
$(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 数据，如下所示：
我还可以在控制台中输出解析后的 JSON 数据对象，如下所示：
执行此操作时，我在控制台中没有收到任何错误，但事件似乎没有添加到完整日历 UI（在我的页面上也显示正常）。
我想我可能在以下代码的某个地方出了问题，但我似乎无法确定它：
$(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);
我不确定这是否与我遇到的问题有关，但我想我会添加它以防万一。
提前感谢您的任何回复，非常感谢。
编辑：
抱歉，我忘记为我的时间表类添加代码。如下：
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);
}
});
}
})
})
【问题讨论】：
-
显示完整的 html 代码，
-
Webruster，我编辑了我的初始帖子以显示 HTML 和 Timetable 类
-
不，我问的是你在 HTML 中引用了任何 js 文件吗？
-
编辑了原始帖子以显示它们的外观
-
尝试按照示例中所示的顺序排列并尝试在控制台中查看是否有任何 Js 错误
标签： c# jquery asp.net json fullcalendar