// This is my controller class which iam using iam making a time table in Asp.Net mvc .... My View against my contrller every time i run it give a popup of failed iam not exactly sure but i think that the issue with my _Layout or somwthing else mabye its the issue that its not loading the jquery in Asp.net Mvc 5
public class TutorController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult GetEvents()
{
using (TutorHubContext dc = new TutorHubContext())
{
var events = dc.TimeTables.ToList();
return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
}
@{
ViewBag.Title = "Index";
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Index</h2>
<div id="calender"></div>
<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" />
@section Scripts {
<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>
$(document).ready(function () {
events = [];
$.ajax({
type: "GET",
url: "/Tutor/GetEvents",
success: function (data) {
$.each(data, function (i, v) {
events.push({
eventID: v.EventID,
title: v.Subject,
description: v.Description,
start: moment(v.Start),
end: v.End != null ? moment(v.End) : null,
color: v.ThemeColor,
allDay: v.IsFullDay
});
})
GenerateCalender(event)
},
error: function (error) {
alert('failed');
}
})
function GenerateCalender(events) {
$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
contentHeight: 400,
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events: events
})
}
})
</script>
}
</body>
</html>
// plz anybody help me
Something looks a little suspicious here. You say that's your view; but that looks like it contains a complete <html> ... </html> document.
Your _Layout.cshtml should contain the outer <html> ... </html> bits, and inside that file you need to call to @RenderSection("Scripts", required: false).
Later in your view you should have the @section Scripts { ... } just as you do currently.
To be clear, I would make my _Layout.cshtml contain the following (note, per @Stephen Muecke's advice, I added jQuery):
<!DOCTYPE html>
<html>
<head>
<!-- common css here -->
<!-- page specific css here -->
@RenderSection("Css", required: false)
</head>
<body>
@RenderBody()
<!-- common scripts here -->
<script src="//code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- page specific scripts here -->
@RenderSection("Scripts", required: false)
</body>
</html>
Then my {View}.cshtml would contain:
<h2>Index</h2>
<div id="calender"></div>
@section Css {
<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" />
}
@section Scripts {
<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>
$(document).ready(function () {
events = [];
$.ajax({
type: "GET",
url: "/Tutor/GetEvents",
success: function (data) {
$.each(data, function (i, v) {
events.push({
eventID: v.EventID,
title: v.Subject,
description: v.Description,
start: moment(v.Start),
end: v.End != null ? moment(v.End) : null,
color: v.ThemeColor,
allDay: v.IsFullDay
});
})
GenerateCalender(event)
},
error: function (error) {
alert('failed');
}
})
function GenerateCalender(events) {
$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
contentHeight: 400,
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events: events
})
}
})
</script>
}