ASP.NET MVC中FullCalendar日期无法传递至控制器的问题求助

云上老周

2026-8-15

ASP.NET MVC集成FullCalendar日期参数无法传递至控制器问题

我在ASP.NET MVC Web应用中集成FullCalendar实现事件创建与查看功能，其他功能正常，但创建事件时，选中的Start和End日期无法传递到控制器，其他数据能正常接收。控制台日志确认提交时日期值存在，仅日期参数无法传递，求排查解决。

视图代码

<div id="myModalSave" 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">Save Event</h4>
            </div>
            <div class="modal-body">
                <form class="col-md-12 form-horizontal">
                    <input type="hidden" id="hdEventID" value="0" />
                    <div class="form-group">
                        <label>Subject</label>
                        <input type="text" id="txtSubject" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Start</label>
                        <div class="input-group date" id="dtp1">
                            <input type="text" id="txtStart" class="form-control" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="checkbox">
                            <label><input type="checkbox" id="chkIsFullDay" checked="checked" />  Is Full Day event</label>
                        </div>
                    </div>
                    <div class="form-group" id="divEndDate" style="display:none">
                        <label>End</label>
                        <div class="input-group date" id="dtp2">
                            <input type="text" id="txtEnd" class="form-control" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea id="txtDescription" rows="3" class="form-control"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Theme Color</label>
                        <select id="ddThemeColor" class="form-control">
                            <option value="">Default</option>
                            <option value="red">Red</option>
                            <option value="blue">Blue</option>
                            <option value="black">Black</option>
                            <option value="green">Green</option>
                        </select>
                    </div>
                    <button type="button" id="btnSave" class="btn btn-success">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </form>
            </div>
        </div>
    </div>
</div>

脚本代码

$('#btnSave').click(function () {
    //Validation
    if ($('#txtSubject').val().trim() == "") {
        alert('Subject required');
        return;
    }
    if ($('#txtStart').val().trim() == "") {
        alert('Start date required');
        return;
    }
    if ($('#chkIsFullDay').is(':checked') == false && $('#txtEnd').val().trim() == "") {
        alert('End date required');
        return;
    }
    else {
        var startDate = moment($('#txtStart').val(), "DD/MM/YYYY HH:mm A").toDate();
        var endDate = moment($('#txtEnd').val(), "DD/MM/YYYY HH:mm A").toDate();
        if (startDate > endDate) {
            alert('Invalid end date');
            return;
        }
    }

    var data = {
        EventID: $('#hdEventID').val(),
        Subject: $('#txtSubject').val().trim(),
        Start: $('#txtStart').val().trim(),
        End: $('#chkIsFullDay').is(':checked') ? null : $('#txtEnd').val().trim(),
        Description: $('#txtDescription').val(),
        ThemeColor: $('#ddThemeColor').val(),
        IsFullDay: $('#chkIsFullDay').is(':checked')
    }
    SaveEvent(data);
    // call function for submit data to the server
})

function SaveEvent(data) {
    $.ajax({
        type: "POST",
        url: '/home/SaveEvent',
        data: data,
        success: function (data) {
            if (data.status) {
                //Refresh the calender
                FetchEventAndRenderCalendar();
                $('#myModalSave').modal('hide');
            }
        },
        error: function () {
            alert('Failed');
        }
    })
}

模型代码

public partial class EventsMain
{
    [Key]
    public int Id { get; set; }
    public string Subject { get; set; }
    public string Description { get; set; }
    public DateTime Start_Date { get; set; }
    public DateTime? End_Date { get; set; }
    public bool IsFullDay { get; set; }
    public string Theme_Color { get; set; }
    public int Create_By { get; set; }
    public DateTime Created_Date { get; set; } = DateTime.Now;
}

控制器代码

public JsonResult SaveEvent(EventsMain e)
{
    var status = false;

    if (e.Id > 0)
    {
        //Update the event
        var v = db.EventsMain.Where(a => a.Id == e.Id).FirstOrDefault();
        if (v != null)
        {
            v.Subject = e.Subject;
            v.Start = e.Start;
            v.End = e.End;
            v.Description = e.Description;
            v.IsFullDay = e.IsFullDay;
            v.ThemeColor = e.ThemeColor;
        }
    }
    else
    {
        e.Create_By = int.Parse(((System.Security.Claims.ClaimsIdentity)User.Identity).FindFirst("UserId").Value);
        db.EventsMain.Add(e);
    }

    db.SaveChanges();
    status = true;

    return new JsonResult { Data = new { status = status } };
}

问题排查与修正方案

核心问题分析

参数名称不匹配：模型字段为Start_Date/End_Date/Theme_Color，但前端传递的参数名是Start/End/ThemeColor，控制器中还错误地引用了模型不存在的属性。
日期格式解析冲突：前端传递的是DD/MM/YYYY HH:mm A格式的字符串，ASP.NET MVC默认日期解析规则无法识别该格式，导致绑定失败。
视图标签未闭合：原视图中大量<div>/<form>标签未闭合，可能引发DOM解析异常，影响数据获取。

具体修正步骤

1. 修正前端参数名与模型字段匹配

修改脚本中的data对象，使参数名完全对应模型字段：

var data = {
    Id: $('#hdEventID').val(),
    Subject: $('#txtSubject').val().trim(),
    Start_Date: $('#txtStart').val().trim(),
    End_Date: $('#chkIsFullDay').is(':checked') ? null : $('#txtEnd').val().trim(),
    Description: $('#txtDescription').val(),
    Theme_Color: $('#ddThemeColor').val(),
    IsFullDay: $('#chkIsFullDay').is(':checked')
}

2. 修复控制器中的属性引用错误

将控制器中更新逻辑的属性名替换为模型实际存在的字段：

public JsonResult SaveEvent(EventsMain e)
{
    var status = false;

    if (e.Id > 0)
    {
        var v = db.EventsMain.Where(a => a.Id == e.Id).FirstOrDefault();
        if (v != null)
        {
            v.Subject = e.Subject;
            v.Start_Date = e.Start_Date;
            v.End_Date = e.End_Date;
            v.Description = e.Description;
            v.IsFullDay = e.IsFullDay;
            v.Theme_Color = e.Theme_Color;
        }
    }
    else
    {
        e.Create_By = int.Parse(((System.Security.Claims.ClaimsIdentity)User.Identity).FindFirst("UserId").Value);
        db.EventsMain.Add(e);
    }

    db.SaveChanges();
    status = true;

    return new JsonResult { Data = new { status = status } };
}

3. 解决日期格式解析问题

推荐将前端日期转换为ISO标准格式，确保ASP.NET MVC能正确解析：

var data = {
    Id: $('#hdEventID').val(),
    Subject: $('#txtSubject').val().trim(),
    Start_Date: moment($('#txtStart').val(), "DD/MM/YYYY HH:mm A").toISOString(),
    End_Date: $('#chkIsFullDay').is(':checked') ? null : moment($('#txtEnd').val(), "DD/MM/YYYY HH:mm A").toISOString(),
    Description: $('#txtDescription').val(),
    Theme_Color: $('#ddThemeColor').val(),
    IsFullDay: $('#chkIsFullDay').is(':checked')
}

4. 补全视图中未闭合的标签

参考上方修正后的视图代码，确保所有HTML标签正确闭合，避免DOM解析异常。

内容的提问来源于stack exchange，提问作者Dev Beginner

ASP.NET MVC中FullCalendar日期无法传递至控制器的问题求助

视图代码 #

脚本代码 #

模型代码 #

控制器代码 #

问题排查与修正方案 #

核心问题分析 #

具体修正步骤 #