MVCでjQueryブートグリッドリクエストデータを処理する方法

Question

ASP.Net MVCを使用してjQueryブートグリッドを実装する際にいくつか問題があります。ソート、検索、ページ設定などの機能は実装できません。

これは私が私のコントローラに持っているものです。

public JsonResult IndexJson(BootgridRequestData model) 
{ 
    var contacts = (from x in db.ContactSet 
        select new 
        { 
         x.AccountId, 
         x.FirstName, 
         x.LastName, 
         x.FullName, 
         x.JobTitle, 
         x.ParentCustomerId, 
         x.EMailAddress1, 
         x.Telephone1, 
         x.MobilePhone, 
         x.Fax, 
         x.GenderCode, 
         x.BirthDate 
        }).ToList(); 

    // This tResult throws a Non-invocable member cannot be used like a method error. 
    var tResult = BootgridResponseData<JsonResult>() { 
     current = model.current, 
     rowCount = model.rowCount, 
     rows = contacts, 
     total = contacts.Count 
    }; 

    return Json(tResult, JsonRequestBehavior.AllowGet); 
} 

それから私は、次のヘルパークラスを持っている：

public class BootgridRequestData 
{ 
    public int current { get; set; } 
    public string rowCount { get; set; } 
    public string searchPhrase { get; set; } 
    public IEnumerable<SortData> sortItems { get; set; } 
} 

public class BootgridResponseData<T> where T : class 
{ 
    public int current { get; set; } //? current page 
    public int rowCount { get; set; } //? rows per page 
    public IEnumerable<T> rows { get; set; } //? items 
    public int total { get; set; } //? total rows for whole query 
} 

public class SortData 
{ 
    public string Field { get; set; } //? Field Name 
    public string Type { get; set; } //? ASC or DESC 
} 

私は本当にどこここから行くには余りにもよく分かりません。何かアドバイス？

Answer 1

テンプレートTは、リストのオブジェクトタイプと同じである必要があります。

public class BootgridResponseData<T> where T : class 
{ 
    public int current { get; set; } //? current page 
    public int rowCount { get; set; } //? rows per page 
    public IEnumerable<T> rows { get; set; } //? items 
    public int total { get; set; } //? total rows for whole query 
} 

あなたの場合、あなたのリストはList<object>として生成されています。あなたは（イムGuid、intなど、ニーズにそれを適応させ、すべてのIDが文字列であると仮定した場合）のような新しいタイプを作成する場合、それはいいだろう：

public class Contact 
{ 
    public string AccountId {get; set;} 
    public string FirstName {get; set;} 
    public string LastName {get; set;} 
    public string FullName {get; set;} 
    public string JobTitle {get; set;} 
    public string ParentCustomerId {get; set;} 
    public string EMailAddress1 {get; set;} 
    public string Telephone1 {get; set;} 
    public string MobilePhone {get; set;} 
    public string Fax {get; set;} 
    public string GenderCode {get; set;} 
    public DateTime BirthDate {get; set;} 
} 

とする代わりに、この

select new 
{ 
    x.AccountId, 
    x.FirstName, 
    x.LastName, 
    x.FullName, 
    x.JobTitle, 
    x.ParentCustomerId, 
    x.EMailAddress1, 
    x.Telephone1, 
    x.MobilePhone, 
    x.Fax, 
    x.GenderCode, 
    x.BirthDate 
} 

の私はこの

select new Contact 
{ 
    AccountId = x.AccountId, 
    FirstName = x.FirstName, 
    LastName = x.LastName, 
    FullName = x.FullName, 
    JobTitle = x.JobTitle, 
    ParentCustomerId = x.ParentCustomerId, 
    EMailAddress1 = x.EMailAddress1, 
    Telephone1 = x.Telephone1, 
    MobilePhone = x.MobilePhone, 
    Fax = x.Fax, 
    GenderCode = x.GenderCode, 
    BirthDate = x.BirthDate 
} 

を置くと、連絡先のタイプが今しているので、あなたのリターンは、このようになりますList<Contact>

var tResult = new 
      BootgridResponseData<List<Contact>>() 
      { 
       current = model.current, 
       rowCount = model.rowCount, 
       rows = contacts, 
       total = contacts.Count 
      }; 

フロントエンドでは、テーブルヘッダーを置くことを忘れないでください。フロントエンドで

<table id="grid-data" class="table table-condensed table-hover table-striped"> 
    <thead> 
     <tr> 
      <th data-column-id="AccountId">Account ID</th> 
      <th data-column-id="FirstName">First Name</th> 
      <th data-column-id="LastName">Last Name</th> 
      (...) and so on 
     </tr> 
    </thead> 
</table> 

グリッドJavaScriptがお使いの機能がWeb GETやPOSTであれば、あなたのAjaxの設定が変更される可能性によっては、次のようになります。

$("#grid-data").bootgrid({ 
    ajax: true, 
    ajaxSettings: { 
    method: "GET", 
    cache: false 
} 
    url: "<your_mvc_controller_url>" 
}); 

bootgrid official page examples