2017-08-03 21 views
-5

//這是我的控制器類,它使用iam在Asp.Net mvc中製作時間表。 ...我的觀點反對我的contrller每次我運行它給一個彈出的失敗的IAM不完全確定,但我認爲這個問題與我的_Layout或somwthing else mabye它的問題,它沒有加載在Asp.net Mvc 5 jQuery我的代碼不是在Asp.Net Mvc的_Layout中渲染@scripts節,甚至當我運行時它給出失敗的彈出

public class TutorController : Controller 
    { 
     public ActionResult Index() 
     { 
      return View(); 
     } 
     public JsonResult GetEvents() 
     { 
      using (TutorHubContext dc = new TutorHubContext()) 
      { 
       var events = dc.TimeTables.ToList(); 
       return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet }; 
      } 
     } 
    } 



@{ 
    ViewBag.Title = "Index"; 
} 
<!DOCTYPE html> 
<html> 
<head> 

</head> 
<body> 

    <h2>Index</h2> 

    <div id="calender"></div> 


    <link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" /> 
    <link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" /> 
    @section Scripts { 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script> 

    <script> 
     $(document).ready(function() { 

      events = []; 
      $.ajax({ 
       type: "GET", 
       url: "/Tutor/GetEvents", 
       success: function (data) { 
        $.each(data, function (i, v) { 
         events.push({ 
          eventID: v.EventID, 
          title: v.Subject, 
          description: v.Description, 
          start: moment(v.Start), 
          end: v.End != null ? moment(v.End) : null, 
          color: v.ThemeColor, 
          allDay: v.IsFullDay 
         }); 
        }) 
        GenerateCalender(event) 
       }, 
       error: function (error) { 
        alert('failed'); 
       } 
      }) 

      function GenerateCalender(events) { 
       $('#calender').fullCalendar('destroy'); 
       $('#calender').fullCalendar({ 
        contentHeight: 400, 
        defaultDate: new Date(), 
        timeFormat: 'h(:mm)a', 
        header: { 
         left: 'prev,next today', 
         center: 'title', 
         right: 'month,basicWeek,basicDay,agenda' 
        }, 
        eventLimit: true, 
        eventColor: '#378006', 
        events: events 
       }) 
      } 
     }) 

    </script> 
    } 
</body> 
</html> 

// PLZ有人幫我

+0

我使用的Visual Studio 2017年 –

+0

您還沒有'jquery- {}版本.js'(這必須是第一個腳本) - –

+1

如果你得到一個'警報(「失敗」); '那麼顯然這個代碼*被包含在頁面中,並且*正在執行。至於*爲什麼* AJAX調用失敗,您將不得不檢查實際的錯誤。 '警報('失敗');'並沒有真正地告訴你很多,是嗎?該函數中的'error'變量有什麼?當您使用瀏覽器的調試工具時,在網絡選項卡中,服務器的響應是什麼?當你調試你的服務器端代碼時,它在哪裏失敗? – David

回答

1

東西看起來有點可疑這裏。你說這是你的看法;但看起來它包含一個完整的<html> ... </html>文檔。

您的_Layout.cshtml應該包含外部<html> ... </html>位,並且在該文件中需要調用@RenderSection("Scripts", required: false)

在您以後的觀點中,您應該像目前一樣擁有@section Scripts { ... }

要清楚,我會讓我的_Layout.cshtml包含以下(注,每@Stephen Muecke的意見,我說的jQuery):

<!DOCTYPE html> 
<html> 
<head> 
    <!-- common css here --> 

    <!-- page specific css here --> 
    @RenderSection("Css", required: false) 
</head> 
<body> 
    @RenderBody() 
    <!-- common scripts here --> 
    <script src="//code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 

    <!-- page specific scripts here --> 
    @RenderSection("Scripts", required: false) 
</body> 
</html> 

然後我{}查看將.cshtml包含:

<h2>Index</h2> 

<div id="calender"></div> 

@section Css { 
    <link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" /> 
    <link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" /> 
} 
@section Scripts { 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script> 
<script> 
    $(document).ready(function() { 
     events = []; 
     $.ajax({ 
      type: "GET", 
      url: "/Tutor/GetEvents", 
      success: function (data) { 
       $.each(data, function (i, v) { 
        events.push({ 
         eventID: v.EventID, 
         title: v.Subject, 
         description: v.Description, 
         start: moment(v.Start), 
         end: v.End != null ? moment(v.End) : null, 
         color: v.ThemeColor, 
         allDay: v.IsFullDay 
        }); 
       }) 
       GenerateCalender(event) 
      }, 
      error: function (error) { 
       alert('failed'); 
      } 
     }) 

     function GenerateCalender(events) { 
      $('#calender').fullCalendar('destroy'); 
      $('#calender').fullCalendar({ 
       contentHeight: 400, 
       defaultDate: new Date(), 
       timeFormat: 'h(:mm)a', 
       header: { 
        left: 'prev,next today', 
        center: 'title', 
        right: 'month,basicWeek,basicDay,agenda' 
       }, 
       eventLimit: true, 
       eventColor: '#378006', 
       events: events 
      }) 
     } 
    }) 
    </script> 
} 
+1

雖然這當然更好,但瀏覽器對於在HTML文檔中包含完整的HTML文檔相當寬容。 OP報告'alert('failed')''行正在成功執行,這非常確定地表明客戶端代碼至少能夠成功執行。 – David

+0

@大衛好點 - upvoted。 – Paul

相關問題