2011-08-05 42 views
2

jsonイベントの更新を使用してjquery full calendarを実装しようとしています。なぜ私はうまく動かないのか分かりません。彼女はここに私のindex.cshtmlASP.NET MVC 3 jQuery fullCalendar

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

私は私の見解では何も得ていないよある私のlayout.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> 

です。助言がありますか?前もって感謝します!

+0

これは推測ですが、あなたのスクリプトの順番を変更しようとしましたか(最初にjqueryを入れ、次にui、カレンダーを入れてください)... – forsvarir

答えて

2

Javascriptが順序が問題ここに...

あなたはjQueryUI libに上のjQueryのlibを入れ、その後、fullCalendar libにしなければならないん含まれています。

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のようになります。 実は、私はあなたのビューで何かを取得していない本当の理由を参照してくださいと思います。

layout.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()方法を必要としています。レイアウトビューでは、RenderBody()メソッドを複数持つことはできません。

+0

Davidさん、ありがとうございました。私はそれを働かせることができれば。ありがとう! – Dan

+0

今働いて、私はそれを将来見るでしょう! – Dan

+0

私はreanderbodyを持っています、レイアウトページの残りの部分を投稿するだけのポイントはありません。 – Dan