jQuery FullCalendarがデータ入力メソッドを呼び出すのに失敗しました

Question

私は現在、ASP.NET MVC3（Razor）の小さなWebサイトで、いくつかの予定があるカレンダーを表示するページが必要です。

私はFullCalendarを選択していくつかの問題に遭遇しました。私は<div>にそれを注入することによって、罰金を表示しているカレンダーを得ました。

しかし、 "イベント"プロパティを追加して、データの読み込みメソッドが呼び出されると、カレンダーは表示されず、当然コントローラ内のメソッドに到達しません。タイトルとナビゲーション矢印を操作するヘッダーセクションを追加しようとしてもレンダリングされません。

ここに私のマスタページに必要なすべてのスクリプトが含まれています。インデックスビューのソースビューには、すべてのスクリプトが含まれています。

私が間違っていることを理解できません。 HTMLをレンダリングするだけで、メソッドを呼び出すことができますので、私のカレンダーに予定をいくつか取得する必要があります。

また、ヘッダーを修正して、タイトルを必要な位置に配置するなどの簡単な操作を行うことができないのはなぜですか？私の構文は壊れているはずですか？

<title>Index</title> 
<link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 
<link href="/css/jquery.lightbox-0.5.css" rel="Stylesheet" type="text/css" media="screen" /> 
<link href="/Content/fullcalendar.css" rel="stylesheet" type="text/css" /> 

    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> 

    <script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script> 

    <script src="/Scripts/jquery.js" type="text/javascript"></script> 

    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> 

    <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> 

    <script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"> </script> 

    <script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script> 

    <script src="/Scripts/fullcalendar.min.js" type="text/javascript"></script> 

    <script src="/Scripts/jquery.lightbox-0.5.min.js" type="text/javascript"></script> 

    <script src="/Scripts/Venatores.js" type="text/javascript"></script> 

データモデル：

public class EventModel 
{ 
    public int ID { get; set; } 
    public string Title { get; set; } 
    public DateTime StartDateTime { get; set; } 
    public DateTime EndDateTime { get; set; } 
    public bool IsAllDay { get; set; } 
} 

コントローラーCalendarControllerの名前：

 public ActionResult Index() 
    { 

     return View(); 
    } 



    public JsonResult PopulateData(double start, double end) 
    { 

     // var startDateTime = FromUnixTimestamp(start); 
     // var endDateTime = FromUnixTimestamp(end); 

     EventModel appointment = new EventModel(); 
     appointment.StartDateTime = DateTime.Now; 
     appointment.EndDateTime = appointment.StartDateTime.AddHours(2.0); 
     appointment.IsAllDay = false; 
     appointment.Title = "Riffel"; 
     appointment.ID = 1; 

     List<EventModel> appointments = new List<EventModel>(); 
     appointments.Add(appointment); 

     var clientList = new List<object>(); 

     foreach (EventModel e in appointments) 
     { 
      clientList.Add(
       new 
        { 
         id = e.ID, 
         title = e.Title, 
         //description = e.Description, 
         start = ToUnixTimespan(e.StartDateTime), 
         end = ToUnixTimespan(e.EndDateTime), 
         allDay = e.IsAllDay, 
         url = "www.google.com" 
       }); 
     } 
     return Json(clientList.ToArray(), JsonRequestBehavior.AllowGet); 

    } 

    private static DateTime FromUnixTimestamp(double timestamp) 
    { 
     var origin = new DateTime(1970, 1, 1, 0, 0, 0, 0); 
     return origin.AddSeconds(timestamp); 
    } 

    private long ToUnixTimespan(DateTime date) 
    { 
     TimeSpan tspan = date.ToUniversalTime().Subtract(
     new DateTime(1970, 1, 1, 0, 0, 0)); 

     return (long)Math.Truncate(tspan.TotalSeconds); 
    } 

マイIndexビュー：

<script type="text/javascript" language="javascript"> 

$(document).ready(function() { 

    $('#calendar').fullCalendar({ 
      //events: "/Calendar/PopulateData" 
     }); 
    }); 

</script> 

<h2>Index</h2> 
<div id="calendar"></div> 

Answer 1

私はASPで動作しません - しかし、FullCalendar APIには「URL」設定が必要なようですサーバーサイドのJSONコールバックを使用するant 「イベント」の設定は、クライアント側の配列または関数集団の設定です。それ以外の面では、残りの部分の大半は理にかなっています。