使用 Asp.Net Core MVC 和 FullCalendar 显示 SQL Table 的内容

Question

我已将我的应用程序设置为在日历上显示事件。然而，虽然正确的事件数将显示日期和时间始终是当前日期和时间，而不是我输入到 SQL db table 中的日期和时间。对于我做错的任何帮助，将不胜感激。我的代码如下：

查看

@model IEnumerable<wccFacilityBookings.Models.Events>

@{
    ViewBag.Title = "Index";
}

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

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><span id="eventTitle"></span></h4>
            </div>
            <div class="modal-body">
                <p id="pDetails"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" />

@section Scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>

    <script>
        $(document).ready(function () {
            var events = [];
            $.ajax({
                type: "GET",
                url: "/applications/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
                        });
                    })

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

            function GenerateCalender(events) {
                $('#calender').fullCalendar('destroy');
                $('#calender').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,
                    eventClick: function (calEvent, jsEvent, view) {
                        $('#myModal #eventTitle').text(calEvent.title);
                        var $description = $('<div/>');
                        $description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD- 
                        MMM-YYYY HH:mm a")));
                        if (calEvent.end != null) {
                            $description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD- 
                         MMM-YYYY HH:mm a")));
                        }
                        $description.append($('<p/>').html('<b>Description:</b>' + 
                         calEvent.description));
                        $('#myModal #pDetails').empty().html($description);

                        $('#myModal').modal();
                    }
                })
            }
        })
    </script>
}

控制器

// GET: Applications/CalendarView
public IActionResult CalendarView()
{
    return View();
}

public JsonResult GetEvents()
{
    using (WCCFacilityBookingsContext context = new WCCFacilityBookingsContext())
    {
        var events =_context.Events.ToList();
        return Json(events);
    }
}

using Microsoft.CodeAnalysis.CSharp.Syntax;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace wccFacilityBookings.Models
{
    public class Events
    {
        [Key]
        public int EventID { get; set; }
        public string Subject { get; set; }
        public string Description { get; set; }
        public System.DateTime Start { get; set; }
        public Nullable<System.DateTime> End { get; set; }
        public string ThemeColor { get; set; }
        public bool IsFullDay { get; set; }

    }
}

Answer 1

好的，一如既往@YongquingYu 让我走上了正确的轨道。当谈到 Ajax 和 Jquery 时，我是 'nuffy'。由于我不明白的原因，我的问题是大写，一旦我将 'properties' 设为小写，它就起作用了。这与它是 Asp.Net Core 有什么关系吗？无论如何，我的代码（按预期工作）如下：

@section Scripts{

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>

    <script>
        $(document).ready(function () {
            var events = [];
            $.ajax({
                type: "GET",
                url: "/Applications/GetEvents",
                success: function (data) {
                    $.each(data, function (i, v) {
                        events.push({
                            title: v.applicantContactName,
                            description: v.facility,
                            start: moment(v.start),
                            end: v.end != null ? moment(v.end) : null,
                            color: v.themeColor,
                            allDay: v.isFullDay
                        });
                    })

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

            function GenerateCalender(events) {
                $('#calender').fullCalendar('destroy');
                $('#calender').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,
                    eventClick: function (calEvent, jsEvent, view) {
                        $('#myModal #eventTitle').text(calEvent.title);
                        var $description = $('<div/>');
                        $description.append($('<p/>').html('<b>Start: </b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
                        if (calEvent.end != null) {
                            $description.append($('<p/>').html('<b>End: </b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
                        }
                        $description.append($('<p/>').html('<b>Description: </b>' +
                            calEvent.description));
                        $('#myModal #pDetails').empty().html($description);

                        $('#myModal').modal();
                    }
                })
            }
        })
    </script>
}

// 获取：Applications/CalendarView

public IActionResult CalendarView()
{
    return View();
}

public JsonResult GetEvents()
{
    using (WCCFacilityBookingsContext context = new WCCFacilityBookingsContext())
    {
        var events = context.BookingApplications.ToList();
        return Json(events);
    }
}

Answer 2

Does this have something to do with it being Asp.Net Core?

是的，在 .NET Core 3.x 中，当您想将 json 从控制器传递给客户端时， 它会 camel-case全部JSON默认输出.

为避免这种情况，您可以在startup.cs ConfigureServices 方法中添加以下设置：

services.AddMvc()
 .AddJsonOptions(opts => opts.JsonSerializerOptions.PropertyNamingPolicy = null);

由于我之前添加了这个设置，所以我用你的代码测试时没有出现这个问题。如果我删除它，您的问题将重现。

所以你有两种解决方法，在js中把字段名改成camel-case，或者在startup中加入上面的代码。

使用 Asp.Net Core MVC 和 FullCalendar 显示 SQL Table 的内容

Display contents of SQL Table with Asp.Net Core MVC and FullCalendar

json

fullcalendar

asp.net-core-mvc

asp.net-core

fullcalendar-3