加载视图时，ASP.NET MVC 在控制台（浏览器开发工具）中抛出错误“jQuery tDatePicker 不是函数”

Posted 2023-05-08

【中文标题】加载视图时，ASP.NET MVC 在控制台（浏览器开发工具）中抛出错误“jQuery tDatePicker 不是函数”

【英文标题】：ASP.NET MVC is throwing error "jQuery tDatePicker is not a function" in the console (Browser Developer Tools) when loading a view

【发布时间】：2020-07-13 15:11:25

【问题描述】：

我正在使用旧版本的 Telerik for ASP.NET MVC。

加载 ASP.NET MVC 视图时，我在控制台（开发人员工具）中看到抛出以下错误：

jQuery tDatePicker 不是函数

使用开发人员工具，我可以看到引发此错误的代码行。行下：

jQuery('#FromDate').tDatePicker(format:'MM/dd/yyyy', minValue:new Date(1899,11,31), maxValue:new Date(2100,0,1), selectedValue:new Date(2020,0,1));

我的 ASP.NET MVC 视图包含以下内容：

@using Telerik.Web.Mvc.UI;

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap2-toggle.min.css" rel="stylesheet">
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap2-toggle.js"></script>

如果我删除以下行：

@using Telerik.Web.Mvc.UI;
<script src="~/Scripts/jquery-1.9.1.js"></script>

...然后该错误消失，但显示另一个不同的错误。无论如何，视图已正确加载：

bootstrap.js requires jquery-1.9.1 or higher

我有点迷茫，不知道如何面对这种错误。一些帮助将不胜感激。

更新： 我已经按照此处的建议注册了 datepicker 客户端库，方法是使用 razor 语法并在我的 _Layout.cshtml 中键入以下行，该文件位于我的 \Views\Shared 文件夹中（这是我在所有视图中使用的母版页）：

@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Add("telerik.common.js").Add("telerik.datepicker.js")))

浏览器开发者工具控制台中继续出现错误（F12）：

此外，日期选择器字段旁边的图标永远不会显示，如下所示：

【问题讨论】：

tDatePicker 函数是什么？这是 Telerik API 中的官方功能吗？

@TomelSafadi 这是 Telereik ASP.NET MVC 扩展。这是 Telerik 的旧扩展。：@Html.Telerik().DatePicker()

【参考方案1】：

您的注册是否正确？ 注册 datepicker 客户端库：

$(Html.Telerik().ScriptRegistrar().DefaultGroup(group =>
     group.Add("telerik.common.js").Add("telerik.datepicker.js")))

当然是你的情况

jQuery(Html.Telerik().ScriptRegistrar().DefaultGroup(group =>
     group.Add("telerik.common.js").Add("telerik.datepicker.js")))

另一种尝试的可能性（因为我不知道您的设置）-注意 id 不工作由于某些未知原因-恕我直言从未修复

@Html.Telerik().DatePickerFor(m => m.EffectiveDate).Name("FromDate");

并像测试一样使用它（！）

 var datepicker = jQuery('#FromDate').data('tDatePicker');
 datepicker.value(new Date('1/1/2020')); // After testing replace with below

如果可行，您可以以同样的方式实现您的格式和最小最大值

 datepicker.format('MM/dd/yyyy');
 datepicker.minValue (new Date('1/1/1900')); 
 datepicker.maxValue(new Date('1/1/2100'));
 datepicker.selectedValue(new Date('1/1/2020'));

【讨论】：

我已经注册了它，但它继续抛出同样的错误（见我的最后一次更新）。

你试过第二种可能吗？我编辑了代码以扩展您的选项

是的，我的 Telerik datepicker 控件是在 ASP.NET MVC 视图 (cshtml) 中使用以下代码行定义的（例如其中一个）：@Html.Telerik().DatePickerFor(m => m.FromDate) 我没有在任何地方手动输入我的第一篇文章中显示的代码行：jQuery('#FromDate').tDatePicker(...) 这行是自动生成的（我使用浏览器开发工具看到它(F12) 通过检查页面生成的代码，因为浏览器由于此处描述的错误而指向那里，我的意思是，在 Visual Studio 的设计模式下，该行不在视图中的任何位置 - cshtml-)。

生成的代码错过了 imho the.data('tDatePicker')。尝试手动测试（tDatePicker）是否正常工作这可能是一些奇怪的配置错误。原始错误表明组件（js）不可用，但要缩小范围，您必须手动添加代码进行测试。

当您说手动测试 (tDatePicker) 是否正常工作或者它可能是一些奇怪的配置错误时，我该如何手动测试它或者您指的是什么配置错误？如何手动添加代码以及我需要在哪里添加此代码进行测试？我有点失落。提前感谢您的大力帮助和支持。