I am trying to get a list of events in my events table in SQL SERVER table from the Home Controller page but I am only getting the dates fields.
here are the codes for home controller, Index, DB context and model:
idex:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<body>
<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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.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 () {
$.ajax({
type: "GET",
url: "/Home/GetEvents",
success: function (data) {
var events = [];
$.each(data.theData, function (i, v) {
events.push({
title: v.Subject,
description: v.Description,
start: moment(v.theStart),
end: v.theEnd != null ? moment(v.theEnd) : null,
color: v.ThemeColor,
allDay: v.IsFullDay
});
})
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) {
$('#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();
}
})
}
})
</script>
</body>
</html>
Home Controller:
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using ExpenseTracker.Data;
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 { theData = events });
}
}
}
DB Context:
using ExpenseTracker.Models;
using Microsoft.EntityFrameworkCore;
namespace ExpenseTracker.Data
{
public class DBCtx : DbContext
{
public DBCtx(DbContextOptions<DBCtx> options) : base(options)
{
}
public DbSet<CalEvents> CalEvents { get; set; }
}
}
and the model:
using System.ComponentModel.DataAnnotations;
namespace ExpenseTracker.Models
{
public class CalEvents
{
[Key]
public int EventId { get; set; }
public string Subject { get; set; }
public string Description { get; set; }
public DateTime theStart { get; set; }
public DateTime theEnd { get; set; }
public string ThemeColor { get; set; }
public Boolean IsFullDay { get; set; }
}
}
When running the app I am getting the calendrer to show but only dates are taken from the database table but the rest of the records which are strings and Boolean are not present and it says undefined.