jqgrid webmethod : failed to save row - asp.net

Question

ByVal datax As ObjectI'm trying to use ASP.NET with webmethod to retrieve data and save data for jqgrid.
I can retrieve data from the webmethod but no luck to do the save.
The server side seems never get my post data. Would someone please help?
grid code:
$('#list99').jqGrid({
datatype: function(postdata) {
$.ajax({
url: 'dbtest.aspx/getdata',
editurl: 'dbtest.aspx/updatedb',
type: 'POST',
data: '{}',
dataType: "json",
contentType: "application/json; charset=utf-8",
error: function(data, textStatus) {
alert('Error loading json');
},
success: function(data, st) {
if (st == 'success') {
var grid = $("#list99");
var gridData = JSON.parse(data.d);
grid.clearGridData();
for (var i = 0; i < gridData.length; i++) {
grid.addRowData(i + 1, gridData[i]);
}
}
$("#list99").jqGrid('navGrid', '#pager99', { add: true, edit: true, del: true });
}
});
},
type: 'POST',
editurl: 'dbtest.aspx/updatedb',
colNames: ['customerid', 'customername'],
colModel: [
{ name: 'customerid', index: 'customerid', width: 80, align: 'left', editable: true, edittype: 'text' },
{ name: 'customername', index: 'customername', width: 120, align: 'left', editable: true, edittype: 'text'}],
pager: $('#pager99'),
rowNum: 5,
rowList: [10],
sortname: 'customerid',
sortorder: 'desc',
viewrecords: true,
//width: 300
autowidth: true
});
server side code:
Public Class customer
Public customerid As String
Public customername As String
End Class
<System.Web.Services.WebMethod()> _
Public Shared Function getdata() As String
Dim c1 As New customer
Dim c2 As New customer
c1.customerid = "1"
c1.customername = "pete"
c2.customerid = "2"
c2.customername = "joah"
Dim lstcustomer As New List(Of customer)
lstcustomer.Add(c1)
lstcustomer.Add(c2)
Dim jsonserial As New JavaScriptSerializer
Dim result As String
result = jsonserial.Serialize(lstcustomer)
Return result
End Function
<System.Web.Services.WebMethod()> _
Public Shared Function updatedb(ByVal datax As Object) As String
//attempt to do save
End Function
The function updatedb just never being called after i clicked "sumbit" after add/edit/delete.
After that i checked with firebug and i got the error message:
"Invalid web service call, missing value for parameter: 'data'."
I've also tried to add the following:
jQuery.extend(jQuery.jgrid.edit, {
ajaxEditOptions: { contentType: "application/json" },
recreateForm: true,
serializeEditData: function(data) {
//alert('in2');
//alert(postData.customerid);
//alert(JSON.stringify(postData));
if (data.customerid == undefined) { data.customerid = null; }
var postData = { 'data': data };
//alert(postData.customerid);
return JSON.stringify(postData);
}
});
It still didnt work =(

Answer 1

I don't recommend you ever use datatype defined as function especially if you do just jQuery.ajax to communicate with the server. jqGrid provide many ways to customize data which will be send to the server (see serializeGridData callback and ajaxGridOptions option of jqGrid for example) and to change the server response before the server response will be processed by jqGrid (beforeProcessing callback for example). The current code use addRowData to fill the data. It' the slowest way to fill the grid which I know. Moreover you call navGrid on every loading of the data instead of calling it once directly after the grid will be created. All other calls will be just ignored. You can find many examples how to use web servicing together with jqGrid. Look at the answer for example
Your current code mix the options of jQuery.ajax with the options of jqGrid. You placed editurl option of jqGrid into the list of options of $.ajax.
One more important error is the usage of correct names of variables in updatedb method. You use currently datax As Object instead of usage customerid and customername as parameters.