kendo-ui mvc autocomplete не отображает результаты

Question

Мне удалось получить рабочую версию с помощью 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, который очень похож на мой вариант использования 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, аналогично тому, что указано в документации... но виджет не может подключиться.

Answer 1

Вы включили фильтрацию сервера, которая значительно сложнее, чем вы внедрили

Если вы намеревались включить эту функцию, вам нужно сделать три вещи:

1. Добавьте библиотеки Kendo ASP.NET MVC в свой проект
2. Измените тип источника данных на aspnetmvc-ajax:

3. Переработайте свое действие для использования DataSourceRequest в вашем контроллере в этом примере. Атрибут DataSourceRequest НЕ является необязательным

   public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)
   {
       return Json(productService.Read().ToDataSourceResult(request));
   }