使用带有MVC4的jquery完整日历

I am learning MVC and jquery but I have a view and I can get that to load but it is blank.

我正在学习MVC和jquery,但我有一个视图,我可以加载,但它是空白的。

I am trying to get a basic calendar using the jquery-fullcalendar.

我正在尝试使用jquery-fullcalendar获取基本日历。

I will post my view code and see what I maybe doing wrong.

我将发布我的视图代码,看看我可能做错了什么。

update I have tried to use fullcalendars sample code and still it never renders anyone know why?

更新我试图使用fullcalendars示例代码,但它仍然没有让任何人知道为什么?

 <script>
   $(document).ready(function () {
      $('#calendar').fullCalendar({
          // put your options and callbacks here
      })
  });
</script>

  <div id='calendar'></div>

I know I am just missing something but I just can't see it.

我知道我只是遗漏了一些东西,但我却看不到它。

2 个解决方案

#1

Using the "basic" template I would remove the jquery script tag from the view. When I create a new MVC4 project in VS2012 the _Layout.cshtml looks like this

使用“基本”模板,我将从视图中删除jquery脚本标记。当我在VS2012中创建一个新的MVC4项目时,_Layout.cshtml看起来像这样

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

The line @Scripts.Render("~/bundles/jquery") puts the jquery script tag after the body of your view. You can change your view so that it renders the fullcalender.js and your document ready function after the jquery script tag like this

@ Scripts.Render行(“〜/ bundles / jquery”)将jquery脚本标记放在视图正文之后。您可以更改视图,以便在jquery脚本标记之后呈现fullcalender.js和文档就绪函数

@{
    ViewBag.Title = "Index";
}
@section scripts {
    <link href="@Url.Content("~/Scripts/fullcalendar.css")"rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/fullcalendar.js")" type="text/javascript"></script>
    <script type ='text/javascript'>
        $(document).ready(function () {
            $('#calendar').fullCalendar({});
        });
    </script>
}
<h2>Index</h2>

<div id='calendar'></div>

#2

If anyone else has this problem I am using Telerik for the menus and in the layout there is this code

如果其他人有这个问题,我使用Telerik作为菜单,在布局中有这个代码

@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true))) @(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.windows7.css").Combined(true).Compress(true)))

@(Html.Telerik()。ScriptRegistrar()。DefaultGroup(group => group.Combined(true).Compress(true)))@(Html.Telerik()。StyleSheetRegistrar()。DefaultGroup(group => group.Add ( “telerik.common.css”)。添加( “telerik.windows7.css”)。组合(真).Compress(真)))

These where in the body and i just moved them to the head it does not seem to have affected the menus but did fix the full calendar and started to render it

这些在身体的位置,我只是将它们移动到头部,它似乎没有影响菜单,但确实修复了完整的日历并开始渲染它

#1