kendo-ui mvc autocomplete不显示结果

时间:2017-09-12 00:47:18

标签: kendo-ui kendo-autocomplete

我能够使用js版本dojo autocomplate获得工作版本,但我需要使用MVC版本。我按照下面的建议在控制器中添加了DataSourceRequest并更改了几个摆脱了我得到的js错误的项目:

  //Fixed, added the schema definition
  Uncaught TypeError: e.slice is not a function

它似乎工作,因为我通过控制器跟踪它,它返回预期的json(下面)但它没有完成连接,因为微调器挂起并且结果没有显示。

   {
   "Data": [{
    "EmployeeId": 2147483649,
    "EmployeeName": "Emily F Johnston",
    "Rating": 75.0,
    "LastAudited": null
   }, {
    "EmployeeId": 2147483687,
    "EmployeeName": "Joshua Smith",
    "Rating": 80.2,
    "LastAudited": null
  }, {
    "EmployeeId": 2147483656,
    "EmployeeName": "Thomas F Dunn",
    "Rating": 45.0,
    "LastAudited": "\/Date(1463893200000)\/"
  }, {
    "EmployeeId": 2147483660,
    "EmployeeName": "Marjon Christine Marik",
    "Rating": 88.0,
    "LastAudited": null
  }],
  "Total": 4,
  "AggregateResults": null,
  "Errors": null
 }

控制器:

     [HttpPost]
    public ActionResult EmployeeLookup(string text, [DataSourceRequest] DataSourceRequest request)
    {
        var filter = request?.Filters.FirstOrDefault() as FilterDescriptor;
        var search = string.Empty;
        if (filter != null)
        {
            search = filter.Value?.ToString() ?? string.Empty;
        }
        var employees = new List<EmployeeLookupResultEntryViewModel>();
        var results = _employeeService.EmployeeLookup(search);

        if (results == null)
            return Json(employees.ToDataSourceResult(request));

        return Json(results.ToDataSourceResult(request));
    }

自动完成定义:

另外,我发现Telerik的这个doco与我的用例Telerik Custom Template非常相似,但它没有显示控制器方法,所以我无法验证它们是如何连接的。

   @(Html.Kendo().AutoComplete()
                .Name("Employees")
                .DataTextField("EmployeeName")
                .Placeholder("Search Employee")
                .Filter("contains")
                .IgnoreCase(true)
                .MinLength(3)
                .Delay(300)
                .HighlightFirst(true)
               .HtmlAttributes(new { style = "width:100%" })
                .NoDataTemplate("Employee Not Found")
                .DataSource(dataSource =>
                {
                   dataSource.Custom()
                             .ServerFiltering(true)
                             .Type("aspnetmvc-ajax")
                             .Transport(transport =>
                             {
                                transport.Read("EmployeeLookup", "Employee", new {area = "Client"});
                             })
                            .Schema(schema => {schema.Data("Data");});
                    })
                   .HeaderTemplate("<div style=\"width: 400px;\" class=\"dropdown-header k-widget k-header\">" +
                               "<span>Id</span>" +
                                "<span>Name</span>" +
                                 "<span>Pwc Rating" +
                                  "<span>Last Audited</span>" +
                    "</div>")
                 .Template("<span  style=\"width: 50px;\">#: data.EmployeeId #</span><span class=\"cell\">#: data.EmployeeName #</span><span class=\"cell\">#: data.PwcRating #</span><span class=\"cell\">#: data.LastAudited #</span>")
        )

我似乎错过了html中的一些配置设置,因为正在返回json / datasouce,类似于文档所声明的......但是小部件无法连接它。

1 个答案:

答案 0 :(得分:1)

您启用了服务器过滤,这比您实施的过程要复杂得多

如果您打算启用此功能,则需要执行三项操作

  1. 将Kendo ASP.NET MVC库添加到项目中
  2. 将您的数据源类型更改为aspnetmvc-ajax:
  3. 根据example修改您的操作以在控制器中使用DataSourceRequest。 DataSourceRequest属性不是可选的

    $