完整日历JQuery插件不显示MVC 4
完整日历JQuery插件不显示MVC 4
提问于 2016-08-23 18:13:04
我按照这个教程在我的项目中制作了完整的日历：http://studyoverflow.com/asp-mvc/event-calendar-using-jquery-fullcalendar-in-asp-net-mvc/
唯一的区别是我已经有了一个项目，并且我将事件数据库添加到了我的上下文中。这是我的观点：
<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>
}和控制器：
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);
}
}
}我还将以下代码添加到我的BundleConfig.cs文件中：
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"));当然，还下载了NuGet格式的Jquery.Fullcalendar。我想我遵循了所有的步骤，但它没有显示任何东西...可能会遗漏什么？谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-24 06:24:18
根据评论，正确的答案是包含
@Styles.Render("~/Content/fullcalendar")在有问题的视图或_Layout视图中。这将确保日历正确显示。演示中给出的代码中遗漏了这一点。
Stack Overflow用户
发布于 2016-08-24 06:38:12
下面的方法将会起作用。请注意我的评论。
下面是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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39098322
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号