代码之家 › 专栏 › 技术社区 › user7623641

完整日历。io未正确显示

fullcalendar asp.net-mvc ajax sql jquery

user7623641 · 技术社区 · 6 年前

因此,我在asp。net mvc应用程序。

我的日历控制器:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;

    namespace Bookings.Controllers
    {
        public class CalendarController : Controller
        {
            BookingsModel.ModelBookings db = new BookingsModel.ModelBookings();
            // GET: Calendar
            public ActionResult Index()
            {
                return View();
            }

            public JsonResult GetEvents() {
                using (BookingsModel.ModelBookings db = new BookingsModel.ModelBookings()) {


              var events = db.Events.ToList();
                return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
            }
        }
    }
}

日历控制器的索引视图:

<!DOCTYPE html>
<html>
<head>
    @{
        ViewBag.Title = "Index";
    }

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


    <link href="~/Content/fullcalendar-3.9.0/fullcalendar.min.css" rel="stylesheet" />
    <link href="~/Content/fullcalendar-3.9.0/fullcalendar.print.css" rel="stylesheet" media="print" />
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

    <!-- qTip -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.css" />

    <!-- Full Calendar -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.min.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.print.css" media="print" />

    @section scripts{
        <script src="~/Content/fullcalendar-3.9.0/moment.min.js"></script>
        <script src="~/Content/fullcalendar-3.9.0/fullcalendar.min.js"></script>

        <script>

            $(document).ready(function () {
                var events = [];
                $.ajax({
                    type: "GET",
                    url: "/Calendar/GetEvents",
                    success: function (data) {
                        $.each(data, function (i, v) {
                            events.push({
                                title: v.Subject,
                                description: v.Description,
                                start: moment(v.Start),
                                end: v.End != null ? moment(v.End) : null,
                                color: v.ThemeColor,
                                allDay: v.IsFullDay
                            })

                        })
                        Generatealendar(events);
                    },
                    error: function (error) {
                        alert('failed');
                    }
                })

                function FenerateCalendar(events) {
                    $('#calendar').fullCalendar('destroy');
                    $('#calendar').fullCalendar({
                        contentHeight: 400,
                        defaultDate: new Date(),
                        timeFormat: 'h(:mm)a',
                        header: {
                            Left: 'prev, next today',
                            center: 'title',
                            right: 'month, basicWeek, basicDay, agenda'
                        },
                        eventLimit: true,
                        eventColor: '#378006',
                        events: events
                    })
                }
            })
        </script>
    }
    </head>
</html>

最后是我的 Events.cs 文件:

public class Events
{
    [Key]
    public int EventID { get; set; }
    public String Subject { get; set; }
    public String Description { get; set; }
    public DateTime start { get; set; }
    public DateTime End { get; set; }
    public String ThemeColor { get; set; }
    public bool? IsFullDay { get; set; }
}

在本教程的这一点上,当运行时,我应该可以看到完整的日历,其中只有一个条目。

我运行如下: http://localhost:35080/Calendar/GetEvents

但我只需按如下方式查看事件:

[{
    "EventID": 1,
    "Subject": "Birthday of a friend",
    "Description": "Birthday",
    "start": "\/Date(1498456800000)\/",
    "End": "\/Date(1498467600000)\/",
    "ThemeColor": "green",
    "IsFullDay": true
}]

有没有什么明显的迹象表明我做错了?

有人说,这可能是因为我在加载日历视图之前没有登录我的应用程序,但登录时也是一样。

我在调试窗口中收到的错误是:

Index:103 Uncaught ReferenceError: Generatealendar is not defined
    at Object.success (Index:103)
    at i (VM52 jquery-3.2.1.min.js:2)
    at Object.fireWith [as resolveWith] (VM52 jquery-3.2.1.min.js:2)
    at A (VM52 jquery-3.2.1.min.js:4)
    at XMLHttpRequest.<anonymous> (VM52 jquery-3.2.1.min.js:4)

1 回复 | 直到 6 年前

OverdueOrange 6 年前

是的,如上所述,函数名“GenerateCalendar”似乎两次拼写错误。这就是导致日历无法在索引视图中生成的原因。