如何在 MVC 中处理 jQuery bootgrid 请求数据

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>。如果你创建一个新类型就好了（我假设所有的 id 都是字符串，根据你的需要调整它，Guid，int 等）：

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