ASP.NET MVC 3 jQuery fullCalendar

我正在尝试实现jquery完整日历与json事件更新。我不知道为什么油不起作用。她是我的版面。cstml头

<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="../../Scripts/fullcalendar.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript">        </script>
<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<link href="../../Content/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css"    />

 </head>

这是我的索引。cshtml

@{
ViewBag.Title = "Home Page";
}

 <h2>@ViewBag.Message</h2>
 <p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET    MVC     Website">http://asp.net/mvc</a>.
 </p>
   <script type="text/javascript">
     $(document).ready(function () {
     $('#calendar').fullCalendar({
            events: "/Home/CalendarData"
        });
    });  
   </script>
  <div id="calendar">
  </div>

我的控制器

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.Mvc;
 using MvcApplication4.Models;
 namespace MvcApplication4.Controllers
  {
   public class HomeController : Controller
   {
    public ActionResult Index()
    {
        ViewBag.Message = "Welcome to ASP.NET MVC!";
        return View();
    }
    public ActionResult About()
    {
        return View();
    }

    [HandleError]
        public ActionResult CalendarData()
        {
            IList<CalendarDTO> tasksList = new List<CalendarDTO>();
            tasksList.Add(new CalendarDTO
            {
                id = 1,
                title = "Google search",
                start = ToUnixTimespan(DateTime.Now),
                end = ToUnixTimespan(DateTime.Now.AddHours(4)),
                url = "www.google.com"
            });
            tasksList.Add(new CalendarDTO
            {
                id = 1,
                title = "Bing search",
                start = ToUnixTimespan(DateTime.Now.AddDays(1)),
                end = ToUnixTimespan(DateTime.Now.AddDays(1).AddHours(4)),
                url = "www.bing.com"
            });
            return Json(tasksList);
        }
        private long ToUnixTimespan(DateTime date)
        {
            TimeSpan tspan = date.ToUniversalTime().Subtract(
         new DateTime(1970, 1, 1, 0, 0, 0));
              return (long)Math.Truncate(tspan.TotalSeconds);
        }
       }
   }

我的视图中什么也没有。有什么建议吗?提前感谢!

Javascript include的顺序在这里很重要…

你应该把jQuery库放在jQueryUI库之上，然后是fullCalendar库。

EDIT:另外，您应该在第一个CSS标记中使用Url.Content()。这有助于在页面加载时解析实际的服务器路径。你不需要使用相对路径

所以你的标签应该看起来像…

<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.3.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.7.2.custom.min.js")" type="text/javascript"></script>    
<script src="@Url.Content("~/Scripts/fullcalendar.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/jquery-ui-1.7.2.custom.css")" rel="stylesheet" type="text/css"    />

编辑2 :事实上，我想我知道你什么都看不到的真正原因了。

在你的布局。在Cshtml中，您需要添加body标签。秀…

<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="../../Scripts/fullcalendar.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript">        </script>
<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<link href="../../Content/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css"    />

</head>
<body>
    <div id="page">
        @RenderBody()
    </div>
</body>

您需要RenderBody()方法，以便Razor引擎知道在哪里放置未在section中定义的视图内容。布局视图中不能有多个RenderBody()方法

相关内容

最新更新

热门标签：