telerik kendo and bunble MVC at the end of the page

telerik kendo and bunble MVC at the end of the page

本文关键字：the end of page at MVC kendo and bunble telerik      更新时间：2023-09-26

我参与了一个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，因为从第二个示例生成的代码如下所示：

<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>

我的问题是：如何避免这个错误？

您可能需要定义剑道控制。尝试@(Html.Kendo().DatePicker().Deferred.Name("datepicker"))

您可以在加载所有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)});}
相关文章：