Я недавно реализовал это сам (вчера фактически) впервые. Самым большим препятствием для меня было выяснить, как написать функцию контроллера. Подпись функции - вот что мне потребовалось больше всего времени (обратите внимание на параметры _search, searchField, searchOper и searchString, поскольку они отсутствуют в большинстве примеров asp.net mvc, которые я видел). Javascript отправляет сообщения в контроллер как для начальной загрузки, так и для поискового вызова. В коде вы увидите, что я проверяю, является ли параметр _search истинным или нет.
Ниже приведен контроллер и код JavaScript. Приношу свои извинения за любые проблемы с форматированием, так как я впервые публикую здесь.
public ActionResult GetAppGroups(string sidx, string sord, int page, int rows, bool _search, string searchField, string searchOper, string searchString)
{
List<AppGroup> groups = service.GetAppGroups();
List<AppGroup> results;
if (_search)
results = groups.Where(x => x.Name.Contains(searchString)).ToList();
else
results = groups.Skip(page * rows).Take(rows).ToList();
int i = 1;
var jsonData = new
{
total = groups.Count / 20,
page = page,
records = groups.Count,
rows = (
from appgroup in results
select new
{
i = i++,
cell = new string[] {
appgroup.Name,
appgroup.Description
}
}).ToArray()
};
return Json(jsonData);
}
А вот мой HTML / Javascript:
$(document).ready(function() {
$("#listGroups").jqGrid({
url: '<%= ResolveUrl("~/JSON/GetAppGroups/") %>',
datatype: 'json',
mtype: 'GET',
caption: 'App Groups',
colNames: ['Name', 'Description'],
colModel: [
{ name: 'Name', index: 'Name', width: 250, resizable: true, editable: false},
{ name: 'Description', index: 'Description', width: 650, resizable: true, editable: false},
],
loadtext: 'Loading Unix App Groups...',
multiselect: true,
pager: $("#pager"),
rowNum: 10,
rowList: [5,10,20,50],
sortname: 'ID',
sortorder: 'desc',
viewrecords: true,
imgpath: '../scripts/jqgrid/themes/basic/images'
//});
}).navGrid('#pager', {search:true, edit: false, add:false, del:false, searchtext:"Search"});