页面末尾的telerik kendo和bunble MVC答案

【问题标题】：telerik kendo and bunble MVC at the end of the page页面末尾的telerik kendo和bunble MVC
【发布时间】：2015-11-11 22:24:45
【问题描述】：

我参与了一个 MVC .Net 项目和 Telerik Kendo。

这是如何使用剑道的示例。

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

    @(Html.Kendo().DatePicker().Name("datepicker"))

    @RenderSection("scripts", required: false)
</body>
</html>

此代码完美运行。我的项目的要求之一是在谷歌速度测试页面上获得一个不错的分数。为此，我必须将 Javascript 文件移动到页面末尾。像这样。

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

</head>
<body>
    @RenderBody()

    @(Html.Kendo().DatePicker().Name("datepicker"))

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

但是在这种方法中我得到一个 Javascript 错误：jQuery is not defined 因为从第二个示例生成的代码如下所示：

<body>


<h2>Index</h2>


    <input class="k-input" id="datepicker" name="datepicker" type="date"><script>
    jQuery(function(){jQuery("#datepicker").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
</script>


    <script src="/Scripts/jquery-1.8.2.js"></script>

    <script src="/Scripts/kendo/2012.3.1315/kendo.web.min.js"></script>
    <script src="/Scripts/kendo/2012.3.1315/kendo.aspnetmvc.min.js"></script>



</body>

我的问题是：我怎样才能避免这个错误？

【问题讨论】：

将 @RenderSection("scripts", required: false) 移动到末尾（在 2 @Scripts.Render(...) 行代码之后
@StephenMuecke - 那也行不通。这是 Kendo 组件在客户端中呈现方式的限制。在页面呈现之前，它们至少需要在页面中加载 jQuery。剩下的可以到最后：telerik.com/forums/…
@JustinNiessner，不熟悉 Kendo，但无论如何都应该这样做 - 视图中（@section scripts { 内）使用 jquery 的任何脚本都可能无法工作，除非包含在 document.ready 中
走老路，只使用 kendo javascript 而不是 MVC 帮助器来构建您的控件 :)

标签： javascript jquery asp.net-mvc telerik kendo-asp.net-mvc

【解决方案1】：

可能你需要延迟剑道控制。试试@(Html.Kendo().DatePicker().Deferred.Name("datepicker"))

【讨论】：

【解决方案2】：

您可以在加载所有 js 文件后创建日期选择器控件 - 将以下行放入 js 文件并在您的页面上引用此 js 文件。

jQuery("#datepicker").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});}

【讨论】：