Jak korzystać z jqGrid z C#/ASP.NET i JSON.NET (i bez rzeczy AJAX.NET)?

Question

OK, zajmowałem się tym przez kilka dni i nie jestem szczególnie pewien, co robię źle. Jeśli ktoś ma przykłady użycia jqGrid z C#/ASP.NET i narzędziami open source, proszę, proszę dać mi znać, gdzie je znaleźć. Wszelkie porady dotyczące znalezienia odpowiedniej dokumentacji lub narzędzi, które można wykorzystać do debugowania tego byłoby również najbardziej doceniane (jestem całkiem nowy w js/jQuery). Zasadniczo potrzebuję funkcji edycji na miejscu, więc jeśli przeoczysz inne oczywiste rozwiązanie, może być pomocne, aby wiedzieć ... Chciałbym uniknąć korzystania z AJAX.NET, jeśli to w ogóle możliwe.

Czuję, że właśnie przeoczyłem coś naprawdę oczywistego.

W poniższym przykładzie otrzymuję jqGrid do wyświetlenia, ale nie pokazuje żadnych danych.

Oto istotne 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" /> 

---

Wygenerowany JSON: Nie jestem pewien, czy to czyni go do jqGrid, lub jeśli jqGrid nie lubi mojego JSON lub mojego WebMethod, ale mogę go nazwać samodzielnie, gdy przejdę do właściwego adresu URL i otrzymam ciąg wyniku 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)\/"} 
] 
} 

Cheers, William Riley-Land

Answer 1

zanim cokolwiek innego, należy pobrać i zainstalować to:

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

To pozwoli Ci zobaczyć dokładnie to, co jest wymagane i odsyłane na żądanie jqGrid, aby uzyskać dane JSON.

mam trochę kodu dla sprawnego jqGrid, i tu jest coś innego:

datatype: "json" 

zamiast swojego:

datatype: "jsonstring" 

Mam także pole o nazwie colNames który jest tablicą stringów zawierających nazwy kolumn.

Wreszcie mam pole pager, które identyfikuje element, który będzie przechowywać kontrolki stronicowania, i jest DIV.

Answer 2

Jeśli masz problemy z uruchomieniem jqGrid do pracy z ASP.NET, proszę spojrzeć na here. To powinno zaoszczędzić wiele czasu.

Answer 3

W programie ASP.NET data jest przekształcana do postaci szeregowej jako JSON "/Date(ticks)/", która nie może być interpretowana przez jqGrid. Możliwe rozwiązania (post):

• Napisać niestandardowego formatowania dla siatki
• zmienić dane wysłane do sieci (poprzez wysłanie sformatowaną datę jako ciąg)

Proszę powiedzieć, jak zrobił implementujesz wyświetlanie daty za pomocą jqGrid?

Dziękuję.

Answer 4

Miałem dokładnie ten sam problem! Rozwiązanie wymyśliłem jest stworzenie niestandardowego formatowania 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(); 
} 

Answer 5

być ostrożnym ze sprawą własności wrażliwy typu danych ma być dataType z wielkimi literami T.