MVC中如何处理jQuerybootgrid请求数据
How to deal with jQuery bootgrid request data in MVC
我在使用 ASP.Net MVC 实现 jQuery bootgrid 时遇到了一些问题。我无法实现排序、搜索、分页等功能。
这是我控制器中的内容:
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
}
我不太确定从这里到哪里去。有什么建议吗?
模板 T
需要与列表的 object 类型相同。
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
}
你的 return 将是这样的,因为你的联系人现在是 List<Contact>
类型
var tResult = new
BootgridResponseData<List<Contact>>()
{
current = model.current,
rowCount = model.rowCount,
rows = contacts,
total = contacts.Count
};
在前端,不要忘记把 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 设置可能会改变。
$("#grid-data").bootgrid({
ajax: true,
ajaxSettings: {
method: "GET",
cache: false
}
url: "<your_mvc_controller_url>"
});
我在使用 ASP.Net MVC 实现 jQuery bootgrid 时遇到了一些问题。我无法实现排序、搜索、分页等功能。
这是我控制器中的内容:
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
}
我不太确定从这里到哪里去。有什么建议吗?
模板 T
需要与列表的 object 类型相同。
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
}
你的 return 将是这样的,因为你的联系人现在是 List<Contact>
var tResult = new
BootgridResponseData<List<Contact>>()
{
current = model.current,
rowCount = model.rowCount,
rows = contacts,
total = contacts.Count
};
在前端,不要忘记把 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 设置可能会改变。
$("#grid-data").bootgrid({
ajax: true,
ajaxSettings: {
method: "GET",
cache: false
}
url: "<your_mvc_controller_url>"
});