完整日历 ASP.NET MVC 更新数据库 eventDragStop

Question

有人知道在 JQUERY UI 完整日历中进行更改时如何更新我的基础数据源（sql server 数据库）吗？

我启用了 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

Answer 1

您可以使用 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

}

Answer 2

要扩展 Shoe 的评论，如果允许您的用户操纵日期，您可能还想使用 'eventResize' 事件。通过 ajax 编写您的 "edits" 并通过 JSON 编写您的 return 以及查看所做的编辑。在您的校准初始化中：

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

控制器（编辑后调用）或在调用时重新初始化事件：

    [HttpGet]
    public JsonResult GetEvents()
    {
        var events = _buildSampleData.GetEventList();

        return Json(events, JsonRequestBehavior.AllowGet);
    }

我会在编辑完成后调用它。

完整日历 ASP.NET MVC 更新数据库 eventDragStop

Full Calendar ASP.NET MVC update database eventDragStop

c#

jquery-ui

asp.net-ajax

fullcalendar

asp.net-mvc-5