Json 使用Asp.Net核心MVC和FullCalendar显示SQL表的内容

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

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

看法

@model IEnumerable
@{
ViewBag.Title=“Index”；
}
指数
&时代；

接近
@节脚本{
$（文档）.ready（函数（）{
var事件=[]；
$.ajax({
键入：“获取”，
url:“/applications/GetEvents”，
成功：功能（数据）{
$。每个（数据、功能（i、v）{
事件。推({
标题：v.主题，
描述：v.描述，
开始：力矩（v.开始），
结束：v.结束！=零？力矩（v.结束）：零，
颜色：v.ThemeColor，
全天
});
})
生成贷方（事件）；
},
错误：函数（错误）{
警报（“失败”）；
}
})
功能生成贷方（事件）{
$（'日历'）.fullCalendar（'销毁'）；
$（“#日历”）.fullCalendar({
身高：400，
defaultDate:新日期（），
时间格式：“h（：mm）a'，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月、基本周、基本日、日程”
},
eventLimit：对，
eventColor:“#378006”，
事件：事件，
eventClick:函数（calEvent、jsEvent、view）{
$（“#myModal#eventTitle”）.text（calEvent.title）；
变量$description=$（''）；
$description.append（$（'
'）.html（'Start:'+calEvent.Start.format（'DD-
年月日：年月日；
如果（calEvent.end！=null）{
$description.append（$（'
'）.html（'End:'+calEvent.End.format（“DD-
年月日：年月日；
}
$description.append（$（'
'）.html（'description:'+
calEvent.description）；
$（'#myModal#pDetails'）.empty（）.html（$description）；
$（'#myModal'）.modal（）；
}
})
}
})
}

控制器

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

    }
}

//获取：应用程序/日历视图
公共IActionResult日历视图（）
{
返回视图（）；
}
public JsonResult GetEvents（）
{
使用（WCCFacilityBookingsContext context=new WCCFacilityBookingsContext（））
{
var events=_context.events.ToList（）；
返回Json（事件）；
}
}
使用Microsoft.CodeAnalysis.CSharp.Syntax；
使用制度；
使用System.Collections.Generic；
使用System.ComponentModel.DataAnnotations；
使用System.Linq；
使用System.Threading.Tasks；
命名空间wccFacilityBookings.Models
{
公开课活动
{
[关键]
public int EventID{get；set；}
公共字符串主题{get；set；}
公共字符串说明{get；set；}
public System.DateTime Start{get；set；}
公共可为空的结尾{get；set；}
公共字符串ThemeColor{get；set；}
公共bool IsFullDay{get；set；}
}
}

---

好吧，像往常一样，@YongquingYu让我走上了正确的道路。谈到Ajax和Jquery，我是一个“讨厌的人”。出于我不理解的原因，我的问题是资本化，一旦我将“属性”的大小写改为小写，它就起作用了。这与它是Asp.Net核心有关吗？无论如何，我的代码（按预期工作）如下所示：

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

这与它是Asp.Net核心有关吗

是的，在.NET Core 3.x中，当您希望将json从控制器传递到客户端时，默认情况下，它将对所有json输出进行camel case处理

为了避免这种情况，您可以在startup.cs

ConfigureServices

方法中添加以下设置：

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

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

---

您有两种解决方案，在js中将字段名更改为

camel case

，或者在startup中添加上述代码。

您能帮我吗@Yongqinguit在sql表中显示日期时间当我根据您的代码单击事件时，请向我们显示您的sql表日期和视图中显示的事件日期。@Yongqinguit我已将我的sql表的屏幕截图添加到我的问题中（在底部）@YongqingYu我的应用程序中显示的日期和时间始终是当前日期和时间，即2020年10月16日下午2:48（澳大利亚时间）。我也在我的初始问题中添加了相关的类。我从一个ASP.NETMVC项目中获得了原始源代码（我从那里改编了它）。提前感谢您的帮助我正在使用与您相同的代码进行测试，但是，当我单击它时，它会显示来自sql表的正确日期。我建议您在

event单击

函数中调试代码，并在F12中添加watch

calEvent.start

abd

calEvent.end

值，这是我的测试结果：感谢您为我澄清@YongqingYu。非常感谢你的帮助。

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