无法使用 jquery 填充 Telerik 下拉列表答案

【问题标题】：Unable to populate telerik dropdown list using jquery无法使用 jquery 填充 Telerik 下拉列表
【发布时间】：2012-08-23 16:58:44
【问题描述】：

我正在尝试使用 jquery 填充 Telerk 下拉列表。以下是我被建议这样做的方式：

var dropDownList = $('#DropDownList').data('tDropDownList');

var dataSource = 
[
    { Text: "Product 1", Value: "1" },
    { Text: "Product 2", Value: "2" },
    { Text: "Product 3", Value: "3" }
];

dropDownList.dataBind(dataSource);

在这里，我需要以下 JavaScript 文件才能使其工作：

jquery-1.7.1.min.js
telerik.common.min.js
telerik.list.min.js

我在我的 Site.Master 中将它们与其他 CSS 和 JS 文件一起注册：

<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/Content/telerik.common.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/Scripts/Students.js"></script>        
    <script type="text/javascript" src="/Scripts/telerik.common.min.js"></script>
    <script type="text/javascript" src="/Scripts/telerik.list.min.js"></script>
    <script type="text/javascript" src="/Scripts/telerik.combobox.min.js"></script>
</head>

然后在 Site.Master 的最后我使用 ScriptRegistrar：

<%= Html.Telerik().ScriptRegistrar() %>

但是，当我运行应用程序时，我收到以下“未定义”错误：

 'undefined' is null or not an object

上线：

dropDownList.dataBind(dataSource);

这是我的 DDL：

<%= Html.Telerik().DropDownList()
.Name("DropDownList")
.HtmlAttributes(new {@id = "DropDownList"})
.Items(items => {
    items.Add().Text("Select").Value("Select");
        })                     
        %>

我在这里错过了一些步骤吗？我是否还需要在我拥有 DDL 的页面上注册 java 脚本文件？ “site.master”是我已经注册过JS文件的“MasterPageFile”。

感谢任何帮助。

【问题讨论】：

dropDownList.dataBind(dataSource); 相对于脚本声明和相对于<%= Html.Telerik().ScriptRegistrar() %> 的行在哪里？在结果页面上查看源代码并查看所有 script 元素的位置...您可能会发现有重复项。

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

【解决方案1】：

尝试删除 jquery 的其他版本，只留下 jquery-1.7.1.min.js 并先注册它。希望这会有所帮助！

【讨论】：

试过了，仍然在同一行得到同样的错误：'undefined' is null or not an object

【解决方案2】：

您应该在 Telerik DropDown 组件加载（初始化）后运行您的绑定代码。一种方法是声明 OnLoad 事件处理程序：

.ClientEvents(events => events.OnLoad("List_OnLoad"))

function List_OnLoad(){
  var dropDownList = $(this).data('tDropDownList');
  // the same as 
  //var dropDownList = $('#DropDownList').data('tDropDownList');
  dropDownList.dataBind(dataSource);
}

【讨论】：

【解决方案3】：

在您的页面中添加另一个 ScriptRegistrar 并将您的代码放入 OnDocumentReady 方法中。这将在您的 site.master ScriptRegistrar 中使用 ScriptRegistrar 注册您的函数，并且一切都应该正常工作，因为此时控件已经初始化。希望这会有所帮助。

【讨论】：