用于 ASP.net MVC 的 Kendo UI 网格

Question

我有一个搜索页面的需求，我在其中使用 KendoUI 网格来显示搜索结果。 我有一个文本框和按钮，如果输入了文本并且在按钮的单击事件上，我必须显示与搜索结果匹配的用户列表的网格。 我正在使用 ASP.net MVC 和 KENDOUI 网格。

我的观点：

搜索框和按钮：

 <div id="SearchSection">
    <input  type="text" id="txtSearch" class="k-textbox"/>  
     <button  class="k-button"id="btnSearch" style="width:150px">Search</button>

</div>   

KendoUI 网格

  <div id="ADUserSection">
      <div id="ADSearchedUser">
    List of users in Active directory:
           <div id="ADuserGrid">
                  @(Html.Kendo().Grid<ADUser>()
                               .Name("kADUser")
                               .Columns(columns =>
                                {
                                 columns.Bound(p => p.UserLoginName);
                                 columns.Bound(p => p.UserDisplayName);

                                 })
                              .AutoBind(false)

                              .DataSource(ds =>
                                          {
                                            ds.Ajax()
                                              .Read(read =>
                                                   {
                                                    read.Action("GetADUser", "ManageUsers")
                                                        .Data("AdditionalData");
                                                   });

                           })
              )
        )
    </div>

</div>

我的 JavaScript 函数：

 <script>
$(document).ready(function () {
    $("#ADUserSection").fadeOut(0);
    $("#AvailableUserRoleSection").fadeIn()
});

     var enterTest
    $("#btnSearch").click(function () {
    debugger;
    enterTest = $("#txtSearch").val().trim();


    if (enterTest == "") {
        $("#ADUserSection").fadeOut();
    }
    else {
        AdditionalData();
        $("#ADUserSection").fadeIn();
        var grid = $("kADUser").data("kendoGrid").dataSource.read({ searchText: enterTest });
        //**Breaks at this Point**//
    }
});

function AdditionalData() {
    //$("#ADuserGrid").empty();
    $("#ADuserGrid").fadeIn();
    return {
        searchText: enterTest
    }
}

我的控制器操作

 public JsonResult GetADUser([DataSourceRequest] DataSourceRequest request, string searchText)
    {

        viewmodel.searchedADUser = model.GetUserFromAD(searchText);
        return Json(viewmodel.searchedADUser.ToList().ToDataSourceResult(request),      JsonRequestBehavior.AllowGet);

    }

在 javascript 中的按钮单击事件中，当我将网格附加到事件时，我收到无法识别数据源读取的错误。 确切的错误是：

JavaScript 运行时错误：无法获取未定义或空引用的属性“数据源”

请帮助我。任何想法请分享，或者如果我在上面的代码中做错了什么，请指出。

我对 KendoUi 和 MVC 非常陌生，所以请详细说明。

我遇到上述问题是因为网格名称前缺少#。

但是现在我又遇到了一个问题，即使我正在遵循所有正确的步骤。 在我上面的 AdditionalData javascript 函数中，我的参数没有在参数表中设置

function AdditionalData() {
//$("#ADuserGrid").empty();
$("#ADuserGrid").fadeIn();
return {
    searchText: enterTest
}
}

这个 searchText 甚至没有设置好，我在 enterTest 中获得了价值。 任何帮助都会非常有用。我真的陷入了困境。

Answer 1

您正在尝试通过以下方式访问您的网格：

var grid = $("kADUser").data("kendoGrid");

$("kADUser") 不会找到任何元素，因为它正在寻找 kADUser 标记，而空 jQuery 集的 .data() 为 null。

因此，当您尝试访问 grid.dataSource 时，grid 为“未定义或空”（这是错误告诉您的内容）。 您应该使用 id 选择器：

var grid = $("#kADUser").data("kendoGrid");

一般来说，我建议避免复合语句，并将其保持在每行一个语句。这将使调试更加容易。