Geek Answers Handbook

How to use jqGrid with C # / ASP.NET and JSON.NET (and without any AJAX.NET stuff)?

Well, I studied this after a few days and am not very sure what I'm doing wrong. If anyone has any examples of using jqGrid with open source C # / ASP.NET tools, please tell me where to find them. Any advice on finding decent documentation or tools that I could use to debug this would be greatly appreciated (I'm pretty new to js / jQuery). Basically, I just need an in-place editing feature, so if I missed another obvious solution for this, it would be useful to know ... I would like to avoid using AJAX.NET, if at all possible.

It seems to me that I'm just forgetting about something really obvious here.

In the following example, I get jqGrid to display, but it does not show any data.

Here is the relevant 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" />

Generated JSON: I'm not sure if it does this for jqGrid, or if jqGrid does not like my JSON or my WebMethod, but I can call it myself when I go to the correct URL and get the JSON result string.

{"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

+5
source share
5 answers

Before doing anything else, download and install the following:

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

This will allow you to see exactly what is being requested and sent back using jqGrid requests to receive JSON data.

jqGrid, - :

datatype: "json"

:

datatype: "jsonstring"

colNames, , .

, pager, , , DIV.

+3

ASP.NET Date JSON "/Date (ticks)/" , jqGrid. (post):

  • , ( )

, jqGrid?

.

+2

! , , 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();
}
+2

case dataType T.

+2

jqGrid ASP.NET, . .

+1

More articles:


All Articles