Fullcalendar JQuery-Plugin nicht MVC 4 erscheint

Question

folgte ich dieses Tutorial die fullcalendar in meinem Projekt zu machen: http://studyoverflow.com/asp-mvc/event-calendar-using-jquery-fullcalendar-in-asp-net-mvc/

Der einzige Unterschied ist, dass ich bereits ein Projekt haben, und ich hinzugefügt, um die Ereignisse db meinem Kontext. Das ist meine Ansicht:

<div id="fullcalendar"></div> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 

    <script type="text/javascript"> 
     $(function() { 
      $('#fullcalendar').fullCalendar({ 
       header: { 
        left: 'prev,next today', 
        center: 'title', 
        right: 'month,basicWeek,basicDay' 
       }, 
       defaultDate: new Date(), 
       events: "/api/event/" 
      }); 
     }); 
    </script> 
} 

Und der Controller:

public class EventController : ApiController 
    { 

     private SGPContext db = new SGPContext(); 

     // GET api/event 
     public IQueryable GetEvents() 
     { 
      return db.Events; 
     } 

     protected override void Dispose(bool disposing) 
     { 
      if (disposing) 
      { 
       db.Dispose(); 
      } 
      base.Dispose(disposing); 
     } 

    } 
} 

Ich habe auch das meiner BundleConfig.cs Datei:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
          "~/Scripts/jquery-{version}.js")); 

//jQuery fullcalendar plugin css 
bundles.Add(new StyleBundle("~/Content/fullcalendar").Include(
          "~/Content/fullcalendar.css")); 

//jQuery fullcalendar plugin js 
bundles.Add(new ScriptBundle("~/bundles/fullcalendar").Include(
          "~/Scripts/moment.js", //Include the moment.js 
          "~/Scripts/fullcalendar.js")); 

Und natürlich heruntergeladen die Jquery.Fullcalendar in NuGet. Ich denke, ich habe alle Schritte verfolgt, aber es zeigt nichts ... Was kann fehlen? Thanls

Answer 1

sich nach den Kommentaren, ist die richtige Antwort

@Styles.Render("~/Content/fullcalendar") 

entweder in der Ansicht in Frage oder die _Layout Ansicht aufzunehmen. Dadurch wird sichergestellt, dass der Kalender ordnungsgemäß angezeigt wird. Dies wurde durch den Code in der Demo verpasst.

Answer 2

Folgendes funktioniert. Achte auf meine Kommentare. Hier

ist die BundleConfig:

public class BundleConfig 
{ 
    //not only add nuget package fullcalendar, but nuget moment 

    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725 
    public static void RegisterBundles(BundleCollection bundles) 
    { 
     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery-{version}.js")); 

     //jQuery fullcalendar plugin css 
     bundles.Add(new StyleBundle("~/Content/fullcalendar").Include(
            "~/Content/fullcalendar.css")); 

     //jQuery fullcalendar plugin js 
     bundles.Add(new ScriptBundle("~/bundles/fullcalendar").Include(
            "~/Scripts/moment.js", //Include the moment.js 
            "~/Scripts/fullcalendar.js")); 

Hier ist die Steuerung:

public class HomeController : Controller 
{ 
    // 
    // GET: /Home/ 

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

} 

Hier ist der Blick für Index:

@{ 
    ViewBag.Title = "Index"; 
} 
<script type="text/javascript"> 
    $(function() { 
     $('#fullcalendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,basicWeek,basicDay' 
      }, 
      defaultDate: new Date(), 
      events: "/api/event/" 
     }); 
    }); 
</script> 
<h2>Index</h2> 
<div id="fullcalendar"></div> 

Hier wird das Event-Modell:

namespace MVCFullCalendarDemo.Models 
{ 
    public class Event 
    { 
     public int id { get; set; } 
     public string title { get; set; } 
     public DateTime start { get; set; } 
     public DateTime end { get; set; } 
    } 

    public class EventContext : DbContext 
    { 
     public DbSet<Event> Events { get; set; } 
    } 
} 

Hier

ist der Controller für WebAPI:

public class Event : ApiController 
{ 
    private EventContext db = new EventContext(); 

    // GET api/Event 
    public IQueryable GetEvents() 
    { 
     return db.Events; 
    } 

    protected override void Dispose(bool disposing) 
    { 
     if (disposing) 
     { 
      db.Dispose(); 
     } 
     base.Dispose(disposing); 
    } 

} 

Hier ist layout.cshtml

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@ViewBag.Title</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
    @*the next line should be here, not in the body*@ 
    @Scripts.Render("~/bundles/jquery") 
</head> 
<body> 
    @RenderBody() 


    @Styles.Render("~/Content/fullcalendar") 
    @Scripts.Render("~/bundles/fullcalendar") 
    @RenderSection("scripts", required: false) 
</body> 
</html>