How to deal with jQuery bootgrid request data in MVC

Question

I'm having some issues with implementing a jQuery bootgrid using ASP.Net MVC. I can't implement the sorting, searching, pagination etc. functionality.

This is what I have in my controller:

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

Then I have the following helper classes:

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
}

I'm not really too sure where to go from here. Any advice?

Answer 1

The template T needs to be the same object type of your list.

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
}

In your case your list its being generated as List<object>. It would be nice if you create a new type like(im assuming all the ids are strings, adapt it at your needs, Guid, int etc):

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

and Instead of this

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
}

i would put this

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
 }

and your return will be like this, because your contacts are now of the type List<Contact>

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

In the front end, don't forget to put the table headers.

<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>

The grid JavaScript in the front end will look like, depending if your function is a web GET or POST, your ajax settings may change.

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

Take a look at bootgrid official page examples