JqGrid с автозаполнением не может проанализировать данные с контроллера для просмотра

Question

Последние несколько дней я пытался заставить работать jqgrid с полями автозаполнения, теперь я могу заставить его работать с локальными данными, но как только я пытаюсь получить данные из моего контроллера, данные не были проанализированы.

Посмотреть код:

          { name: 'EanNummer', index: 'EanNummer', width: 65, sortable: true, editable: true, edittype: 'text', editoptions: {
              dataInit:
          function (elem) {
              $(elem).autocomplete({ minLength: 0, source: '@Url.Action("GetBrands")' })
              .data("autocomplete")._renderItem = function (ul, item) {
                  return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.Id + ", " + item.Name + "</a>")
            .appendTo(ul);
              };
          } 
          }
          },

если вместо source: url я использую source: ["C++", "java", "php", "coldfusion", "javascript", "asp", "ruby"], например, код работает нормально и обнаруживается, поэтому что-то должно быть неправильно с моим кодом стороны контроллера

Код контроллера:

    public JsonResult GetBrands()
    {

        string vendorId = "";
        var username = "";
        var name = System.Web.HttpContext.Current.User.Identity.Name;
        var charArray = name.Split("\\".ToCharArray());
        username = charArray.Last();
        vendorId = service.GetVendorIdByUsername(username);

        List<String> list = new List<String>();
        var brands = service.getBrandsByVendor(vendorId);

        var s= (from brand in brands
                     select new
                     {
                         Id = brand.BrandId,
                         Name = brand.BrandName

                     }).ToList();

        return Json(s);
    }

Answer 1

Если вы используете item.Id а также item.Name на стороне клиента вы должны вернуть не List<String>, Вместо этого вы должны вернуть список new {Id=brand.BrandId, Name=brand.BrandName}, Вы должны просто использовать LINQ вместо foreach:

return Json ((from brand in brands
              select new {
                  Id = brand.BrandId,
                  Name = brand.BrandName
              }).ToList());

ОБНОВЛЕНО: я изменил для вас демо из ответа и включил поддержку автозаполнения пользовательского интерфейса jQuery в двух формах. Стандартный рендеринг:

и пользовательский рендеринг:

Функция автозаполнения работает в диалоге расширенного поиска так же, как и на панели инструментов поиска:

Вы можете скачать демо здесь.

Код сервера стандартного автозаполнения

public JsonResult GetTitleAutocomplete (string term) {
    var context = new HaackOverflowEntities();
    return Json ((from item in context.Questions
                  where item.Title.Contains (term)
                  select item.Title).ToList(),
                 JsonRequestBehavior.AllowGet);
}

Возвращает массив строк в формате JSON. Список названий фильтруется term аргумент, который будет инициализирован строкой, введенной в поле ввода.

Код сервера пользовательского автозаполнения

public JsonResult GetIds (string term) {
    var context = new HaackOverflowEntities();
    return Json ((from item in context.Questions
                  where SqlFunctions.StringConvert((decimal ?)item.Id).Contains(term) 
                  select new {
                      value = item.Id,
                      //votes = item.Votes,
                      title = item.Title
                  }).ToList (),
                 JsonRequestBehavior.AllowGet);
}

Он использует SqlFunctions.StringConvert, чтобы иметь возможность использовать LIKE в сравнении целых чисел. Кроме того, он возвращает список объектов, имеющих value title имущество. Если бы вы возвращали объекты, имеющие value lable свойства значения из lable свойства будут отображаться в контекстном меню автозаполнения и соответствующих value свойство будет вставлено в поле ввода. Мы используем обычай title собственность вместо

Код на стороне клиента

searchoptions: {
    dataInit: function (elem) {
        $(elem).autocomplete({ source: '<%= Url.Action("GetTitleAutocomplete") %>' });
    }
}

для стандартного рендеринга и

searchoptions: {
    sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
    dataInit: function (elem) {
        // it demonstrates custom item rendering
        $(elem).autocomplete({ source: '<%= Url.Action("GetIds") %>' })
            .data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a><span style='display:inline-block;width:60px;'><b>" +
                        item.value + "</b></span>" + item.title + "</a>")
                    .appendTo(ul);
            };
    }
}

для пользовательского рендеринга.

Дополнительно я использую некоторые настройки CSS:

.ui-autocomplete {
    /* for IE6 which not support max-height it can be width: 350px; */
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}
/*.ui-autocomplete.ui-menu { opacity: 0.9; }*/
.ui-autocomplete.ui-menu .ui-menu-item { font-size: 0.75em; }
.ui-autocomplete.ui-menu a.ui-state-hover { border-color: Tomato }
.ui-resizable-handle {
    z-index: inherit !important;
}

Вы можете раскомментировать .ui-autocomplete.ui-menu { opacity: 0.9; } установка, если вы хотите иметь небольшой эффект непрозрачности в контекстном меню автозаполнения.