Как использовать jqGrid с C#/ASP.NET и JSON.NET (и без материалов AJAX.NET)?

Хорошо, я изучал это несколько дней и не совсем уверен, что я делаю неправильно. Если у кого-то есть рабочие примеры использования jqGrid с C#/ASP.NET и инструментами с открытым исходным кодом, пожалуйста, дайте мне знать, где их найти. Любые советы по поиску достойной документации или инструментов, которые я мог бы использовать для отладки, также будут высоко оценены (я новичок в js/jQuery). По сути, мне просто нужна функция редактирования на месте, поэтому, если я упускаю из виду другое очевидное решение для этого, было бы полезно знать... Я бы хотел избежать использования AJAX.NET, если это вообще возможно.

Я чувствую, что просто упускаю из виду что-то действительно очевидное.

В следующем примере я получаю jqGrid для отображения, но он не показывает никаких данных.

Вот соответствующий JavaScript:

jQuery(document).ready(function(){ 
    jQuery("#role_assignment_table").jqGrid({ 
        url:'http://localhost:4034/WebSite2/PageItemHandler.asmx/GetPageItemRolesJson?id=3',
        mtype: 'GET',
        contentType: "application/json; charset=utf-8",
        datatype: "jsonstring",
        colModel:[
            {name:'Id', label:'ID', jsonmap:'Id'},
            {name:'Title', jsonmap:'Title'},
            {name:'AssignedTo', label:'Assigned To', jsonmap:'AssignedTo'},
            {name:'Assigned', jsonmap:'Assigned'},
            {name:'Due', jsonmap:'Due'},
            {name:'Completed', jsonmap:'Completed'}
        ],
        jsonReader: {
            page: "Page",
            total: "Total",
            records: "Records",
            root: "Rows",
            repeatitems: false,
            id: "Id"
        },
        rowNum:10,
        rowList:[10,20,30],
        imgpath: 'js/themes/basic/images',
        viewrecords: false,
        caption: "Role Assignments" 
    });  
});

HTML:

<table id="role_assignment_table" class="scroll" cellpadding="0" cellspacing="0" />

Сгенерированный JSON: я не уверен, попадает ли он в jqGrid, или jqGrid не нравится мой JSON или мой WebMethod, но я могу вызвать его сам, когда перейду к нужному URL и получите строку результата JSON.

{"Page":"1","Total":1.0,"Records":"4",
"Rows":[
{"Id":1,"Item":null,"Title":"Story Manager","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"},
{"Id":2,"Item":null,"Title":"Analysis","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"},
{"Id":3,"Item":null,"Title":"Narrative","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"},
{"Id":4,"Item":null,"Title":"Graphic","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"}
]
}

Ура, Уильям Райли-Лэнд


person wprl    schedule 25.06.2009    source источник


Ответы (5)


Прежде чем делать что-либо еще, загрузите и установите это:

http://www.fiddler2.com/fiddler2/

Это позволит вам точно увидеть, что запрашивается и отправляется обратно запросами jqGrid для получения данных JSON.

У меня есть код для работающего jqGrid, а здесь что-то другое:

datatype: "json"

Вместо вашего:

datatype: "jsonstring"

У меня также есть поле с именем colNames, которое представляет собой массив строк, содержащих имена столбцов.

Наконец, у меня есть поле pager, которое идентифицирует элемент, в котором будут храниться элементы управления пейджингом, и представляет собой DIV.

person Daniel Earwicker    schedule 25.06.2009
comment
это может быть глупый вопрос, но должен ли текст JSON возвращаться в виде XML-документа? Например. мой WebMethod восстанавливает ‹?xml version=1.0 encoding=utf-8?› ‹string xmlns=localhost/WebSite2›INSERT ДАННЫЕ JSON ЗДЕСЬ‹/string› - person wprl; 26.06.2009
comment
P.S. Спасибо за подсказку Fiddler. - person wprl; 26.06.2009
comment
ах, хорошо, .NET 2.0 WebMethods - это только XML. Бьюсь об заклад, это то, что моя проблема. Спасибо! - person wprl; 26.06.2009
comment
Я должен сказать: этот ответ действительно помог мне до того, как Chrome/FireFox позволил вам смотреть сетевую активность в браузере. Спасибо! - person wprl; 21.01.2012

В ASP.NET дата сериализуется как JSON "/Date(ticks)/" который не может быть интерпретирован jqGrid. Возможные решения (сообщение):

  • написать собственный форматтер для сетки
  • изменить данные, которые мы отправляем в сетку (отправив отформатированную дату в виде строки)

Расскажите, как вы реализовали отображение даты с помощью jqGrid?

Спасибо.

person dev    schedule 03.08.2009
comment
Я сделал это, передав строку вместо фактической даты - вы все равно можете выполнять сортировку, если добавите sorttype: 'date' в этот столбец в вашей colModel... - person wprl; 03.08.2009

Будьте осторожны с учетом регистра. Свойство datatype должно быть dataType с T в верхнем регистре.

person Darryl Hebbes    schedule 03.02.2010
comment
Это правда? У меня больше нет возможности проверить. - person wprl; 21.01.2012

У меня была точно такая же проблема! Решение, которое я придумал, состоит в том, чтобы создать собственный модуль форматирования JavaScript:

$(this).jqGrid({  
   ...
   colModel: [
      {
      name: 'SomeDate', index: 'SomeDate', width: 100, formatter: ndateFormatter }
      }],
   ...
});


// Convert C# json Date.
function ndateFormatter(cellval, opts, rwdat, _act) {
    var time = cellval.replace(/\/Date\(([0-9]*)\)\//, '$1');
    var date = new Date();
    date.setTime(time);
    return date.toDateString();
}
person Jonathan    schedule 05.08.2009
comment
Вышеприведенное не работало точно для меня, потому что мой С# генерировал такую ​​дату: \/Date(1311725560000-0700)\/. Мне пришлось изменить регулярное выражение на это, чтобы оно работало: var time = cellval.replace(/\/Date(([0-9]*)(-[0-9]*)?)\//, '$1 '); - person sisdog; 28.12.2011

Если у вас есть проблемы с работой jqGrid с ASP.NET, посмотрите здесь. Это должно сэкономить вам много времени.

person Ron Harlev    schedule 23.07.2009
comment
Спасибо. В конце концов я просто переключился на использование XML, и с этого момента все пошло гладко. Хороший отчет о своих открытиях! - person wprl; 27.07.2009
comment
xml будет работать, но следите за более высокой пропускной способностью, чем облегченная альтернатива json. - person Jalal El-Shaer; 02.01.2010