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); 
       }; 
      } 
      } 
      }, 

かの代わりのソース：私はソースを使用URL：[ "C++"、 "ジャワ"、 "PHP"、 "ColdFusionの"、 "ジャバスクリプト"、 "ASP"、 "サンプルコードのためのルビー "]正常に動作して現れるので、何かが私のコントローラ側のコードが間違っている必要があり

コントローラコード：あなたは、クライアントのSIDにitem.Idとitem.Nameを使用する場合は

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

あなたはList<String>を返さないでください。代わりにnew {Id=brand.BrandId, Name=brand.BrandName}のリストを返す必要があります。あなただけのforeachの代わりにLINQを使用する必要があります。

更新

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

：私はthe answerからあなたのためのデモを修正し、2つの形式でのjQuery UIオートコンプリートのサポートが含まれています。標準のレンダリング：

とカスタムレンダリング：

オートコンプリート機能がSearching Toolbarのように同じようにAdvanced Searchingダイアログで動作します。

hereからデモをダウンロードできます。

標準オートコンプリートのサーバコードは、JSON形式の文字列の配列を返す

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); 
} 

あります。タイトルリストはterm引数でフィルタリングされ、入力フィールドに入力された文字列に初期化されます。

カスタムオートコンプリートのサーバーコードは、それが整数の比較でLIKEを使用できるようにSqlFunctions.StringConvertを使用しています

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); 
} 

です。さらに、というプロパティを持つオブジェクトのリストを返します。titleプロパティvalueのオブジェクトを返す場合は、lableプロパティの値は、オートコンプリートコンテキストメニューに表示され、対応するvalueプロパティが入力フィールドに挿入されます。代わりにカスタムtitleプロパティを使用します。

クライアント側のコードは、カスタムレンダリングのための標準的なレンダリングと

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); 
      }; 
    } 
} 

ため

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

です。

さらに私はいくつかの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; }設定のコメントを解除することができます。