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

问题描述

我已设置我的应用程序以在日历上显示事件。但是，尽管正确的事件数将显示日期和时间，但始终是当前日期和时间，而不是我在sql db表中输入的内容。对于我做错的任何帮助将不胜感激。我的代码如下：

查看

@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; }

    }
}

解决方法

好吧，@ YongquingYu一如既往地将我带入正确的轨道。当涉及到Ajax和Jquery时，我是个“笨蛋”。我的问题（由于我不了解的原因）与大写有关，一旦我将“属性”小写即可。这是否与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>
}

// GET：应用程序/ CalendarView

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

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

这与Asp.Net Core是否有关？

是的，在 .NET Core 3.x 中，当您要将JSON从控制器传递到客户端时，默认情况下它将以驼峰式显示所有JSON输出。 / p>

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

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

由于我之前添加了此设置，因此在测试您的代码时未出现问题。如果删除它，您的问题将被复制。

因此，您有两种解决方案，请将js中的字段名称更改为camel-case，或在启动时添加以上代码。

asp.net-core asp.net-core-mvc fullcalendar fullcalendar-3 json