Fullcalendar JQuery插件没有出现MVC 4

时间:2016-08-23 10:13:04

标签: asp.net-mvc asp.net-mvc-4 fullcalendar

我按照本教程在我的项目中制作了完整日历:http://studyoverflow.com/asp-mvc/event-calendar-using-jquery-fullcalendar-in-asp-net-mvc/

唯一的区别是我已经有一个项目,我将Events db添加到我的上下文中。 这是我的观点:

public void setDescription(View view,String s1, String s2) 
{
    ButterKnife.bind(this, view);
    //
    text1.setText(s1);
    text2.setText(s2);
}

控制器:

<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>
}

我还将其添加到我的BundleConfig.cs文件中:

 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);
        }

    }
}

当然在NuGet中下载了Jquery.Fullcalendar。 我想我遵循了所有步骤,但它没有显示任何内容......可能缺少什么? Thanls

1 个答案:

答案 0 :(得分:2)

以下内容有效。注意我的意见。

这是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"));

这是控制器:

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

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

}

以下是索引的视图:

@{
    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>

这里是事件模型:

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; }
    }
}

这是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);
    }

}

这是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>