完整日历 ASP.NET MVC 更新数据库事件拖拽停止

本文关键字:事件 数据库 更新 日历 ASP NET MVC | 更新日期: 2023-09-27 18:36:31

有人知道在 JQUERY UI 完整日历中进行更改时如何更新我的底层数据源(sql 服务器数据库)吗?

我启用了 FullCalendar 插件并正常工作,也填充了数据,我启用了拖放选项并且它们有效,显然这些更改没有提交到数据库,我不确定该怎么做,也许是对控制器中的方法的某种 AJAX 调用?虽然我不确定如何实施它。

希望这个问题不要太模糊,只是在朝着正确的方向推动之后。

干杯

溶液:

所以最终的解决方案看起来像这样:

ASP.NET MVC 5 CSHTML 页面

@section scripts{
<script type="text/javascript">
// <![CDATA[
$(document).ready(function () {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        theme: false,
        defaultView: 'month',
        editable: false,
        events: "/controller/GetEvents/",
        editable: true,
        eventDrop: function (event, delta, revertFunc) {
            var id = event.id;
            var start = event.start;
            $.ajax({
                url: "/controller/FullCalendarEventDrop/",
                type: "POST",
                data: {id: id, start: start}
            });
        }
    });
 });
// ]]></script>
}

控制器:

[HttpPost]
public void FullCalendarEventDrop(int id, string start)
{
    DateTime startDt = DateTime.ParseExact(start, "ddd MMM d hh:mm:ss UTC yyyy", null).ToUniversalTime();

    OBJECT OBJECTNAME = db.OBJECT.Find(id);
    _OBJECTNAME.StartDate = startDt;
    _OBJECTNAME.EndDate = startDt;
    db.Entry(OBJECTNAME).State = EntityState.Modified;
    db.SaveChanges();
}

所以目前还没有错误处理,但我会把它放进去,最重要的是更新工作。

谢谢

:D

完整日历 ASP.NET MVC 更新数据库事件拖拽停止

您可以使用 eventDrop 回调并通过 AJAX 将数据传递给控制器。

修改自文档...

$('#calendar').fullCalendar({
    events: [
        // events here
    ],
    editable: true,
    eventDrop: function(event, delta, revertFunc) {
        $.ajax({
            url: "/MyController/FullCalendarEventDrop",
            data: event
        });
    }
});

控制器

[HttpPost]
public JsonResult FullCalendarEventDrop(int id, DateTime start, DateTime end)
{
    //Get the event by the id and update its start/end
}

为了扩展 Shoe 的评论,如果您的用户被允许操纵日期,您可能还希望使用"eventResize"事件。 通过 ajax 编写您的"编辑",并通过 JSON 返回以查看所做的编辑。 在 cal 的初始化中:

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay',
        },
        events: '/SampleController/GetEvents',

控制器(在编辑后调用)或在 cal load 时重新初始化事件:

    [HttpGet]
    public JsonResult GetEvents()
    {
        var events = _buildSampleData.GetEventList();
        return Json(events, JsonRequestBehavior.AllowGet);
    }

我会在进行编辑后调用它。