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运行时错误：无法获取未定义或空引用的属性“dataSource”

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

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

我遇到了上述问题，因为在网格名称之前缺少＃。

但是现在我还有一个问题，即使我正在采取一切正确的步骤。在上面的AdditionalData javascript函数中，我的参数没有在paaremeter中设置集

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

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

Answer 1

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

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

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

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

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

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

用于ASP.net MVC的KendoUI网格

1 个答案: