In my index file I am getting data from db table, I am able to get all fields except for the EventId and I am not sure why?
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body class="container">
<div id="calender"></div>
<div id="myModal" 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">×</button>
<h4 class="modal-title"><span id="eventTitle"></span></h4>
</div>
<div class="modal-body">
<p id="pDetails"></p>
<button id="btnDelete" class="btn btn-danger btn-sm">
<span class="btn-info"></span> Remove
</button>
<button id="btnEdit" class="btn btn-danger btn-sm">
<span class="e-open"></span> Edit
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var events = [];
var selectedEvent = null;
FetchEventAndrendarCalendar();
function FetchEventAndrendarCalendar() {
events = [];
$.ajax({
type: "GET",
url: "/Home/GetEvents",
success: function (data) {
var events = [];
var selectedEvent = null;
$.each(data.theData2, function (i, v) {
events.push({
eventid: v.EventId,
title: v.theSubject,
description: v.theDescription,
start: moment(v.theStart),
end: v.theEnd != null ? moment(v.theEnd) : null,
color: v.theThemeColor,
allDay: v.theIsFullDay
});
})
GenerateCalender(events);
},
error: function (error) {
alert(error.responseText);
}
})
}
function GenerateCalender(events) {
$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
contentHeight: "auto",
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
eventLimit: true,
eventColor: '#378006',
events: events,
eventClick: function (calEvent, jsEvent, view) {
selectedEvent = calEvent;
$('#myModal #eventTitle').text(calEvent.title);
var $description = $('<div/>');
$description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
if (calEvent.end != null) {
$description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
}
$description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
$('#myModal #pDetails').empty().html($description);
$('#myModal').modal();
}
})
}
$('btnEdit').click(function () {
})
$('#btnDelete').click(function () {
if (selectedEvent != null && confirm('Are you sure you want to delete this event?')) {
$.ajax({
type: "POST",
url: '/home/DeleteEvent',
data: { 'EventID': selectedEvent.EventId },
success: function (data) {
if (data.status) {
//Refresh the calender
FetchEventAndRenderCalendar();
$('#myModal').modal('hide');
}
},
error: function () {
alert('Failed');
}
})
}
})
})
</script>
</body>
</html>
the part that is the trouble
var selectedEvent = null;
...
$.each(data.theData2, function (i, v) {
events.push({
eventid: v.EventId,
title: v.theSubject,
description: v.theDescription,
start: moment(v.theStart),
end: v.theEnd != null ? moment(v.theEnd) : null,
color: v.theThemeColor,
allDay: v.theIsFullDay
});
})
...
eventClick: function (calEvent, jsEvent, view) {
selectedEvent = calEvent;
...
$.ajax({
type: "POST",
url: '/home/DeleteEvent',
data: { 'EventID': selectedEvent.EventId },
success: function (data) {
if (data.status) {
//Refresh the calender
FetchEventAndRenderCalendar();
$('#myModal').modal('hide');
}
},
below is the home controller:
using Microsoft.AspNetCore.Mvc;
using ExpenseTracker.Data;
using ExpenseTracker.Models;
using Microsoft.CodeAnalysis.CSharp.Syntax;
using Microsoft.Extensions.Logging;
namespace ExpenseTracker.Controllers
{
public class HomeController : Controller
{
private DBCtx Context { get; }
public HomeController(DBCtx _context)
{
this.Context = _context;
}
[Microsoft.AspNetCore.Authorization.Authorize(Roles = ("Admin"))]
public IActionResult FileManager()
{
return View();
}
public IActionResult Index()
{
return View();
}
[HttpGet]
public JsonResult GetEvents()
{
var events = this.Context.CalEvents.ToList();
return new JsonResult(new { theData2 = events });
}
[HttpPost]
public JsonResult SaveEvent(CalEvents e)
{
var status = false;
if (e.EventId > 0)
{
var v = this.Context.CalEvents.Where(a => a.EventId == e.EventId).FirstOrDefault();
if (v != null)
{
v.theSubject = e.theSubject;
v.theDescription = e.theDescription;
v.theStart = e.theStart;
v.theEnd = e.theEnd;
v.theThemeColor = e.theThemeColor;
v.theIsFullDay = e.theIsFullDay;
}
}
else
{
this.Context.CalEvents.Add(e);
}
this.Context.CalEvents.Update(e);
status = true;
return new JsonResult(new {status = status});
}
[HttpPost]
public JsonResult DeleteEvent(int EventID)
{
var status = false;
var v = this.Context.CalEvents.Where(a => a.EventId == EventID).FirstOrDefault();
if (v != null)
{
this.Context.CalEvents.Remove(v);
status = true;
}
return new JsonResult(new { status = status });
}
}
}
and this is the one that is the concern:
[HttpPost]
public JsonResult DeleteEvent(int EventID)
