如何在MVC中处理jQuery bootgrid请求数据 [英] How to deal with jQuery bootgrid request data in MVC

问题描述

在使用ASP.Net MVC实现jQuery bootgrid时遇到一些问题.我无法实现排序，搜索，分页等功能.

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?

推荐答案

模板T必须与列表的对象类型相同.

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
}

在您的情况下，列表的生成方式为List<object>.如果您创建一个新的类型，例如(假设所有ID为字符串，根据需要对其进行调整，Guid，int等)，那将是很好的选择:

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

而不是这个

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>

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>

前端的网格JavaScript将看起来像，取决于您的功能是Web GET还是POST，您的ajax设置可能会更改.

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

看看 bootgrid官方页面示例

这篇关于如何在MVC中处理jQuery bootgrid请求数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！