【问题标题】:Loading events on start from database从数据库开始加载事件
【发布时间】:2015-02-20 14:56:03
【问题描述】:

我想在页面加载时从日历中的数据库加载所有事件,但它不工作。数据正在从数据库传入页面,但对象未显示事件。

我的模特是

 public class Calendar
    {
        public int id { get; set; }
        public string title { get; set; }

        public DateTime starttime { get; set; }
        public DateTime endtime { get; set; }
    }

我的控制器方法是

[HttpPost]
public JsonResult dataReceiver(string title)
{
    Calendar calendar = new Calendar();
    calendar.title = title;
    calendar.starttime = DateTime.UtcNow.ToLocalTime();
    calendar.endtime = DateTime.UtcNow.ToLocalTime().AddDays(5);
    db.Calendars.Add(calendar);
    db.SaveChanges();
    return Json(title, JsonRequestBehavior.AllowGet);
}
public ActionResult datasender()
{
    var search = from m in db.Calendars select m;
    //ViewBag.Message = search.ToList();
    return Json(search.ToList(),JsonRequestBehavior.AllowGet);
}

我的观点是

<html>
<head>
    <title> Calendar</title>
    <link href="~/Content/calendar/fullcalendar.css" rel="stylesheet" />
    <link href="~/Content/calendar/fullcalendar.print.css" rel="stylesheet" media='print' />
    <link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
    <style>
        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

        .fc-ltr {
            background: #ddba8f;
        }

        .fc-toolbar {
            background: #c64343;
        }
    </style>

</head>

<body>

    <div id='calendar' style="height:90%; width:90%; color:black; border:1px solid blue; margin-top:5%; position:relative">

    </div>
</body>
</html>

@section scripts
{
<script src="~/Scripts/calendar/moment.min.js"></script>
<script src="~/Scripts/calendar/jquery.min.js"></script>
<script src="~/Scripts/calendar/fullcalendar.js"></script>
<script src="~/Scripts/calendar/jquery-ui.custom.min.js"></script>
    <script>

        $(document).ready(function () {

            calendarcreate();
            var obj;
        });

        function calendarcreate() {
              $.ajax({
                type: "Post",
                url: "/Calendar/datasender",
                dataType: "html",
                data: {},
                success: function (data) {
                    obj = JSON.parse(data);
                    alert("successfull data received " + JSON.stringify(obj));
                    var cal = $('#calendar').fullCalendar({
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay'
                        },
                        defaultDate: '2015-02-12',
                        selectable: true,
                        selectHelper: true,
                        select: function (start, end) {
                            var title = prompt('Event Title:');
                            var eventData;
                            if (title) {
                                eventData = {
                                    title: title,
                                    start: start,
                                    end: end
                                };
                                $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                            }
                            $('#calendar').fullCalendar('unselect');
                            $.ajax({
                                type: "Post",
                                url: "/Calendar/dataReceiver",
                                dataType: "json",
                                data: { "title": eventData.title },
                                success: function (data) {
                                    alert("successfull data send " + data);
                                                          },
                                error: function (req, status, error) {
                                    alert(error + req + status);
                                                                       }
                                    });
                        },
                        eventClick: function (calEvent, jsEvent, view) {
                            alert(calEvent.title + calEvent.start + calEvent.end +obj)
                                                                         },
                        dragOpacity: .50,
                        dragRevertDuration: 1000,
                        eventColor: '#378006',
                        eventBackgroundColor: 'gray',
                        editable: true,
                        eventStartEditable: true,
                        eventDurationEditable: true,
                        dragScroll: true,
                        eventOverlap: false,
                        eventLimit: true, // allow "more" link when too many events
                        events:
                            [
                            {
                                title: 'All Day Event',
                                start: '2015-02-01'
                            },

                            {
                                id: 999,
                                title: 'Repeating Event',
                                start: '2015-02-09T16:00:00'
                            },

                            {
                                title: 'Click for Google',
                                url: 'http://google.com/',
                                start: '2015-02-28'
                            }
                        ]
                    });

                },
                error: function (req, status, error) {
                    alert(error + req + status);
                    var div = $('#SearchItemDiv');
                    div.html("");
                    div.append('Error');
                }
            });


            }


    </script>

【问题讨论】:

  • 这是 Java 吗?请更好地标记您的问题。它没有获得任何观看次数,因为它没有出现在任何人的供稿上。
  • 它是 dotnet c#,我通过 mvc 使用它..并且视图在剃刀视图中
  • 从 ajax 调用中取出完整的日历设置,分解您尝试做的每一件事,这样您就可以隔离问题。在 document.ready 上设置完整的日历,然后在完整的日历与初始数据一起显示后,通过单独的调用从数据库中添加事件源。
  • 我明白你是说我要分离 ajax 方法之外的所有部分(事件除外)。但这不是工作。实际上我想从内存(数据库)加载所有事件在运行时。

标签: c# jquery ajax model-view-controller fullcalendar


【解决方案1】:
 function calendarcreate() {
              $.ajax({
                type: "Post",
                url: "/Calendar/datasender",
                dataType: "html",
                data: {},
                success: function (data) {
                    $.each(data, function (i, item)
                        {
                            item.start = new Date(item.start);
                            item.end = new Date(item.end);
                      });
                    obj = JSON.parse(data);

                    alert("successfull data received " + JSON.stringify(obj));
                    var cal = $('#calendar').fullCalendar({
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay'
                        },
                        defaultDate: '2015-02-12',
                        selectable: true,
                        selectHelper: true,
                        select: function (start, end) {
                            var title = prompt('Event Title:');
                            var eventData;
                            if (title) {
                                eventData = {
                                    title: title,
                                    start: start,
                                    end: end
                                };
                                $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                            }
                            $('#calendar').fullCalendar('unselect');
                            $.ajax({
                                type: "Post",
                                url: "/Calendar/dataReceiver",
                                dataType: "json",
                                data: { "title": eventData.title },
                                success: function (data) {
                                    alert("successfull data send " + data);
                                                          },
                                error: function (req, status, error) {
                                    alert(error + req + status);
                                                                       }
                                    });
                        },
                        eventClick: function (calEvent, jsEvent, view) {
                            alert(calEvent.title + calEvent.start + calEvent.end +obj)
                                                                         },
                        dragOpacity: .50,
                        dragRevertDuration: 1000,
                        eventColor: '#378006',
                        eventBackgroundColor: 'gray',
                        editable: true,
                        eventStartEditable: true,
                        eventDurationEditable: true,
                        dragScroll: true,
                        eventOverlap: false,
                        eventLimit: true, // allow "more" link when too many events
                        events:
                            [
                            {
                                title: 'All Day Event',
                                start: '2015-02-01'
                            },

                            {
                                id: 999,
                                title: 'Repeating Event',
                                start: '2015-02-09T16:00:00'
                            },

                            {
                                title: 'Click for Google',
                                url: 'http://google.com/',
                                start: '2015-02-28'
                            }
                        ]
                    });

                },
                error: function (req, status, error) {
                    alert(error + req + status);
                    var div = $('#SearchItemDiv');
                    div.html("");
                    div.append('Error');
                }
            });


            }

刚刚在问题和日历渲染中添加了以下行:

            $.each(data, function (i, item)
                {
                    item.start = new Date(item.start);
                    item.end = new Date(item.end);
              });

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-07-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多