如何在全日历ASP.NET Core MVC中删除事件？

如何解决如何在全日历ASP.NET Core MVC中删除事件？

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

家庭控制器：

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>

解决方法

要达到您的要求，如@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");
}

测试结果