如何删除 fullcalendar ASP.NET Core MVC 中的事件？

Question

我试图在单击弹出模式删除按钮时删除一个事件。有人可以帮我吗？我在选择事件时尝试使用的控制器中有删除方法。我希望能够单击该事件，然后在单击删除按钮后删除该事件。

家庭控制器：

public class HomeController : Controller
{
    private readonly IEventsRepo eventsRepo;
    private readonly EventsContext db;
    

    public HomeController(IEventsRepo _eventsRepo, EventsContext _db)
    {
        eventsRepo = _eventsRepo;
        db = _db;
    }


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

    [HttpGet]
    public IActionResult GetEvents()
    {
        var events = db.Event.Select(e => new
        {
            id = e.ID,
            title = e.Title,
            start = e.Start.ToString("yyyy-MM-dd HH:mm:ss"),
            end = e.End.ToString("yyyy-MM-dd HH:mm:ss")
        }).ToList();
        return new JsonResult(events);
        
    }



    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> CreateEvent(Events model)
    {
        if (ModelState.IsValid)
        {
            var newEvent = new Events
            {
                ID = model.ID,
                Title = model.Title,
                Start = model.Start,
                End = model.End
            };
            await eventsRepo.CreateAsync(newEvent);
            return RedirectToAction(nameof(Index));
        }
        return View();



    }

    [HttpGet]
    public IActionResult DeleteEvent(int id)
    {
        var deleteEvent = eventsRepo.GetById(id);
        if (deleteEvent == null)
        {
            return NotFound();
        }
        var model = new Events()
        {
            ID = deleteEvent.ID,
            Title = deleteEvent.Title,
            Start = deleteEvent.Start,
            End = deleteEvent.End
        };
        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> DeleteEvent(Events model)
    {
        await eventsRepo.Delete(model.ID);
        return RedirectToAction(nameof(Index));
    }

索引：

  @model DataAccess.Models.Events
  @{
     ViewData["Title"] = "Home Page";
  }

  <div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="modalTitle"></h5>

            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <p><b>Start:</b> <span id="eventStart"></span></p>
            <p><b>End:</b> <span id="eventEnd"></span></p>
        </div>
        <div class="modal-footer">
            <button id="btnEdit" class="btn btn-secondary pull-right">
                <i class="far fa-edit"></i> Edit
            </button>
            
                <button id="btnDelete" class="btn btn-secondary pull-right" style="margin-right:5px;">
                    <i class="fas fa-user-times"></i> Delete
                </button>
            

            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>
  <form method="post" asp-action="CreateEvent" id="BookingForm">
<div class="modal fade" id="saveModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle"> New Booking </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label> Name</label>
                    <input asp-for="Title" id="inputName" class="form-control" placeholder="Enter Name..." />
                    <span asp-validation-for="Title" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Start"></label>
                    <input asp-for="Start" id="inputStart" class="form-control" placeholder="Enter Start date and time..." />
                    <span asp-validation-for="Start" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="End"></label>
                    <input asp-for="End" id="inputEnd" class="form-control" placeholder="Enter End date and time..." />
                    <span asp-validation-for="End" class="text-danger"></span>
                </div>
            </div>
            <div class="modal-footer">
                <div class="form-group">
                    <button type="submit" class="btn btn-rounded btn-success"><i class="fas fa-check-square"></i> Save </button>
                    <button type="button" class="btn btn-secondary btn-danger" data-dismiss="modal"><i class="fas fa-user-times"></i> Cancel </button>
                </div>
            </div>
        </div>
    </div>
</div>

  <div id='calendar'></div>

  <script>


var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    navLinks: true,
    eventColor: 'green',
    eventClick: function (info) {
        selectedEvent = info.event;
        console.log(selectedEvent);
        $('#modalTitle').text(info.event.title);
        $('#eventStart').text(info.event.start);
        $('#eventEnd').text(info.event.end);
        $('#eventModal').modal();
    },
    events: '@Url.Action("getevents", "home")',
    Selectable: true,
    dateClick: function () {
        $('#saveModal').modal();

    }
})


calendar.render();




</script>

Answer 1

为了达到你的要求，正如@ADyson提到的，你可以尝试获取特定事件的id并将其存储在隐藏字段中，这样你就可以发出AJAX请求通过该事件 ID 到操作方法，如下所示。

使用隐藏字段存储事件id

<div class="modal-body">
    <input type="hidden" id="eventId" value="" />
    <p><b>Start:</b> <span id="eventStart"></span></p>
    <p><b>End:</b> <span id="eventEnd"></span></p>
</div>

获取事件 ID 并将其存储在隐藏字段中

eventClick: function (info) {
    selectedEvent = info.event;
    console.log(selectedEvent);
    $('#eventId').val(info.event.id);
    $('#modalTitle').text(info.event.title);
    $('#eventStart').text(info.event.start);
    $('#eventEnd').text(info.event.end);
    $('#eventModal').modal();
}

删除按钮和delEvenet()功能

<button id="btnDelete" class="btn btn-secondary pull-right" style="margin-right:5px;" onclick="delEvenet();">
    <i class="fas fa-user-times"></i> Delete
</button>

delEvenet()函数代码

function delEvenet() {
    var event_id = $('#eventId').val();
    console.log(event_id);

    $.get('@Url.Action("DeleteEvent", "home")?id=' + event_id, function (data) {
        console.log(data);

        window.location.reload();
    });
}

操作方法

[HttpGet]
public IActionResult DeleteEvent(int id)
{
    //...
    //your code logic here
    
    return Ok("deleted");
}

测试结果

如何删除 fullcalendar ASP.NET Core MVC 中的事件？

How to delete an event in fullcalendar ASP.NET Core MVC?

asp.net-mvc

jquery

fullcalendar

asp.net-core