2012-05-23 56 views
1

我目前在asp.net mvc 4中工作,我正在嘗試將fullcalendar添加到我的項目中。該fullcalendar在這裏找到:http://arshaw.com/fullcalendar/jquery不能在頁面加載

當我點擊我的ActionLink的,我的日曆將不會加載。我似乎無法找到爲什麼它不起作用。

下面的代碼:

CSHTML

@section JavaScript 
{ 
    <link href="@Url.Content("/Content/fullcalendar.css") " rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="@Url.Content("/Scripts/jquery-ui-1.8.11.min.js")"></script> 
    <script type="text/javascript" src="@Url.Content("/Scripts/fullcalendar.js")"></script> 
    @* <script type="text/javascript" src="@Url.Content("/Scripts/fullcalendar.min.js")"></script>*@ 
} 
@{ 
    ViewBag.Title = "Tijdregistratie"; 
} 
<script type='text/javascript'> 
    $(document).ready(function() { 

     var date = new Date(); 
     var d = date.getDate(); 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 

     $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev', 
       center: 'title', 
       right: 'next' 
      }, 
      editable: true, 
      events: "/TijdRegistratie/GetGeplandeTaken/" 
     }); 
    }); 
</script> 
<div id='calendar'> 
</div> 

控制器

private TijdRegistratieService.ITijdRegistratieService _tijdRegistratieClient; 

     public TijdRegistratieController() 
     { 
      _tijdRegistratieClient = new TijdRegistratieService.TijdRegistratieServiceClient(); 
     } 

     public ActionResult TijdRegistratieOverzicht() 
     { 


      return View("TijdRegistratieOverzicht"); 
     } 

     public JsonResult GetGeplandeTaken(double start, double end) 
     { 
      String beginDatum = ConvertFromUnixTimestamp(start).ToString(); 
      String eindDatum = ConvertFromUnixTimestamp(end).ToString(); 

      int psnID = (int)HttpContext.Session["userPSNID"]; 

      var geplandeTaken = _tijdRegistratieClient.GetGeregistreerdeTaken(1, beginDatum, eindDatum); 

      var eventList = from e in geplandeTaken 
          select new 
          { 
           id = e.taakID, 
           title = e.BeginUur.Substring(0, e.BeginUur.Length - 3) + " - " + e.EindUur.Substring(0, e.EindUur.Length - 3), 
           start = string.Format("{0:u}", e.BeginDatum), 
           end = string.Format("{0:u}", e.EindDatum) 
           //allDay = false 
          }; 

      var rows = eventList.ToArray(); 

      return Json(rows, JsonRequestBehavior.AllowGet); 
     } 

     private static DateTime ConvertFromUnixTimestamp(double timestamp) 
     { 
      var origin = new DateTime(1970, 1, 1, 0, 0, 0, 0); 

      return origin.AddSeconds(timestamp); 
     } 

Layout.cshtml(全自動裝在每一頁)

<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title</title> 
    <meta name="viewport" content="width=device-width" /> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" /> 
    <link rel="stylesheet" href="~/Content/autocomplete.css" type="text/css" media="all" /> 
    <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script> 
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" /> 
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script> 
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i8n/jquery.mobile.datebox.i8n.en.js"></script> 
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script> 
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i8n/jquery.mobile.datebox.i8n.en.js"></script> 

    @RenderSection("JavaScript", required: false) 
    <script> 

所以我目前wonde響我如何解決這個問題。這是我使用JQuery的第二個項目,如果我錯過了某些明顯的東西,請原諒我。

編輯:在Firefox中運行出現以下錯誤螢火蟲:fullCalendar不是一個函數。

+1

@ EmRA228發佈了正確答案。不幸的是,它被Ohgodwhy錯誤地下調了。 OP顯示的源代碼中沒有提及jQuery。我投票拒絕刪除他的回覆,並會在取消刪除後立即上傳。現在當然還有其他的答案表明,正確的事情與不正確的恕我直言刪除的第一個答案值得信任。 –

+0

似乎不起作用。我的同事(在我做之前曾在這個項目上工作過)突然提到他在不同的頁面加載每一個。因爲這個原因,Jquery會自動加載到每個頁面中。我會將該頁面添加到我的問題中。 –

+0

@darin dimitrov謝謝親愛的。 – EmRa228

回答

0

您必須刪除:從您的CSHTML頁

@section JavaScript 
{ 
    <link href="@Url.Content("/Content/fullcalendar.css") " rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="@Url.Content("/Scripts/jquery-ui-1.8.11.min.js")"></script> 
    <script type="text/javascript" src="@Url.Content("/Scripts/fullcalendar.js")"></script> 
    @* <script type="text/javascript" src="@Url.Content("/Scripts/fullcalendar.min.js")"></script>*@ 
} 

,並將它們添加到您的主載入頁面。現在它會加載到每個頁面上,並且它會工作得很好。

0

=)))))

你沒有包括http://jquery.com

+0

如果你點擊了鏈接,看到了頁面,你會注意到jQuery文件確實被包含在內。 Downvote試圖獲得即時業力。 – Ohgodwhy

+0

其實這就是JQuery-ui文件。我忘了將jquery上傳頁面添加到我原來的帖子中。之後我添加了它。 EmRa228發佈時這是一個有效的帖子,所以downvoting看起來像一個笑話。 –

+0

@Cedric謝謝。 – EmRa228

0

你福爾戈包括jQuery庫 「的jquery.js」

下載最新版本,請檢查您的演示頁它包括:

<script type='text/javascript' src='/js/fullcalendar-1.5.3/jquery/jquery-1.7.1.min.js'></script> 

而你的例子沒有。

+0

似乎不起作用。我的同事(在我做之前曾在這個項目上工作過)突然提到他在不同的頁面加載每一個。因爲這個原因,Jquery會自動加載到每個頁面中。我會將該頁面添加到我的問題中。 –

0

第一眼看上去,你並不需要通過2個PARAMS你的方法是什麼?

GetGeplandeTaken(雙頭,雙頭

你的方法和觀點叫什麼名字?如果你在方法上設置斷點,你有這個參數的任何值?

+0

顯然該方法從jquery中自動獲取參數。不要問我爲什麼,但參數不會給出錯誤。如果我去頁面本身,一切工作正常。這只是與我的動作鏈接的頁面鏈接不起作用。我的所有其他actionlinks工作正常,所以我猜這是JQuery的問題。 –

+0

你可以在你的頁面和onclick事件上添加一個按鈕,把你當前的$(document).ready代碼?只需檢查是否有關於document.ready的問題。 –

+0

我用一個按鈕測試了代碼。該按鈕的作品。我點擊它,我的日曆不會被加載。這似乎是fullcalendar函數本身的加載問題。 –