jqGrid, ASP.NET, JSON está me deixando louco. Por favor ajude
Pergunta
Eu venho tentando chegar a este trabalho por dias e dias e parece que uma coisa depois da outra. Inicialmente, eu finalmente rastrearam a datas de passagem ASP.NET problemas na cadeia de trás JSON para a rede. Agora estou usando JSON.NET e as datas estão voltando a forma como eles devem ser estou preso de volta à direita onde eu alwasy parece ser. Aqui está o meu código, string JSON retornado, e código de jqGrid também: (me desculpe é tão longa, mas eu simplesmente não queria deixar nada de fora, caso essa era a parte que estava me enroscando-se)! Basicamente, estou sempre preso no método de sucesso da chamada ajax, onde eu tento addJSONData .... a partir de agora eu estou recebendo um erro do Firebug que diz: inválido ID de propriedade ({Total: 1, página: 1, de registos: 5, [{ "ROWID": 1, "... RNAME": "BCC", "SubmitterID": "BCC4010", "Su
Qualquer ajuda seria tão muito apreciada! I Quer usar este plug-in tanto, mas eu estou indo absolutamente louco tentando fazê-lo funcionar!
Agradecemos antecipadamente, Briana: -)
WebMethod:
<WebMethod()> _
<Script.Services.ScriptMethod(UseHttpGet:=False, ResponseFormat:=ResponseFormat.Json)> _
Public Function GetTableData() As String
Dim objController As New TradingPartnersController
Dim gv_page As String = String.Empty
Dim sidx As String = String.Empty
Dim sord As String = String.Empty
Dim start As String = String.Empty
Dim limit As String = String.Empty
Dim row As String = String.Empty
Dim header As String = String.Empty
Dim count As Integer = 0
Dim total_pages As Integer = 0
gv_page = HttpContext.Current.Request.Form("page") '.Form("page")
' get the requested page
limit = HttpContext.Current.Request.Form("rows")
' get how many rows we want to have into the grid
sidx = HttpContext.Current.Request.Form("sidx")
' get index row - i.e. user click to sort
sord = HttpContext.Current.Request.Form("sord")
' get the direction
If String.IsNullOrEmpty(sidx) Then
sidx = "PartnerID"
End If
If String.IsNullOrEmpty(sord) Then
sord = "ASC"
End If
If String.IsNullOrEmpty(limit) Then
limit = 10
End If
'' connect to the database
'GridView1.DataSource = objController.ListAll()
'GridView1.DataBind()
Dim objCollection As List(Of TradingPartnersInfo) = objController.ListAll()
count = objCollection.Count
If count > 0 Then
total_pages = Math.Ceiling(count / Int32.Parse(limit))
Else
total_pages = 0
End If
If gv_page Is Nothing Then
gv_page = 1
End If
If Not gv_page > total_pages Then
gv_page = total_pages
End If
start = Math.Ceiling(Int32.Parse(limit) * (Int32.Parse(gv_page) - Int32.Parse(limit)))
If start < 1 Then start = 1
Dim objPageCollection As List(Of TradingPartnersInfo) = objController.ListTradingPartners(sidx, sord, Int32.Parse(start), Int32.Parse(limit))
Dim json As New StringBuilder
json.Append("{")
json.Append("total:" & total_pages.ToString & ",")
json.Append("page:" & gv_page.ToString & ",")
json.Append("records:" & count.ToString & ",")
json.Append(JsonConvert.SerializeObject(objPageCollection))
json.Append("}")
Return json.ToString
End Function
Here is the jqGrid code:
jQuery('table.scroll').jqGrid({
jsonReader: {
root: "rows", //arry containing actual data
page: "page", //current page
total: "total", //total pages for the query
records: "records", //total number of records
repeatitems: false,
id: "ID" //index of the column with the PK in it
},
datatype: function(postdata) {
jQuery.jmsajax({
type: "POST",
url: "EDI.asmx",
method: "GetTableData",
dataType: "msjson",
data: {},
complete: function(data) {
var mygrid = jQuery('table.scroll')[0];
var result = (eval("(" + data.responseText + ")"));
var myjsongrid = (jeval(result.d));
alert(myjsongrid.rows);
mygrid.addJSONData(jeval(myjsongrid.rows)); //This is ERROR LINE
myjsongrid = null;
myjsongridParsed = null;
result = null;
},
success: function(data) {
alert('success: ' + data);
},
error: function(xhr) {
var res = xhr.responseText;
alert(res);
}
});
},
colNames: [
"ROWID",
"ID",
"PartnerID",
"Direction",
"InterchangeVersion",
"InterchangeSenderID",
"InterchangeReceiverID",
"ProductionMode",
"SubmitterName",
"SubmitterID",
"SubmitterPOC",
"CommQual",
"CommNumber",
"ReceiverName",
"ReceiverID",
"PartnerType",
"PartnerNotes",
"IncomingSP",
"OutgoingSP",
"ExchangeAck",
"isDeleted",
"DateTimeInserted",
"KeyID"
],
colModel: [
{ name: "ROWID",
width: 1,
hidden: true,
key: false,
sorttype: 'int',
editrules: { searchhidden: false,
hidedlg: true,
index: 'ROWID',
jsonmap: 'ROWID'
}
},
{ name: "ID",
width: 1,
hidden: true,
key: true,
sorttype: 'int',
editrules: { searchhidden: true,
hidedlg: false,
index: 'ID',
jsonmap: 'ID'
}
},
{ name: "PartnerID",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: 'text',
editrules: { required: true,
index: 'PartnerID',
jsonmap: 'PartnerID',
label: 'PartnerID',
resizable: true,
search: true
}
},
{ name: "Direction",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: 'select',
editoptions: { value: "I:O" },
editrules: { required: true,
index: 'Direction',
jsonmap: 'Direction',
label: 'Direction',
resizable: true,
search: true
}
},
{ name: "InterchangeVersion",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: 'select',
editoptions: { value: "004010X098A1:004010X097A1:004010X096A1:004010X098A:004010X097A:004010X096A" },
editrules: { required: true,
index: 'InterchangeVersion',
jsonmap: 'InterchangeVersion',
label: 'InterchangeVersion',
resizable: true, search: true
}
},
{ name: "InterchangeSenderID",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: 'text',
editrules: { required: true,
index: 'InterchangeSenderID',
jsonmap: 'InterchangeSenderID',
label: 'InterchangeSenderID',
resizable: true,
search: true
}
},
{ name: "InterchangeReceiverID",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: 'text',
editrules: { required: true,
index: 'InterchangeReceiverID',
jsonmap: 'InterchangeReceiverID',
label: 'InterchangeReceiverID',
resizable: true,
search: true
}
},
{ name: "ProductionMode",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: 'select',
editoptions: { value: "T:P" },
editrules: { required: true,
index: 'ProductionMode',
jsonmap: 'ProductionMode',
label: 'ProductionMode',
resizable: true,
search: true
}
},
{ name: "SubmitterName",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: 'text',
editrules: { required: true,
index: 'SubmitterName',
jsonmap: 'SubmitterName',
label: 'SubmitterName',
resizable: true,
search: true
}
},
{ name: "SubmitterID",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: 'text',
editrules: { required: true,
index: 'SubmitterID',
jsonmap: 'SubmitterID',
label: 'SubmitterID',
resizable: true,
search: true
}
},
{ name: "SubmitterPOC",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: 'text',
editrules: { required: true,
index: 'SubmitterPOC',
jsonmap: 'SubmitterPOC',
label: 'SubmitterPOC',
resizable: true,
search: true
}
},
{ name: "CommQual",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: "select",
editoptions: { value: "ED:EM:FX:TE" },
editrules: { required: false,
index: 'CommQual',
jsonmap: 'CommQual',
label: 'CommQual',
resizable: true,
search: true
}
},
{ name: "CommNumber",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: 'text',
editrules: { required: false,
index: 'CommNumber',
jsonmap: 'CommNumber',
label: 'CommNumber',
resizable: true,
search: true
}
},
{ name: "ReceiverName",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: 'text',
editrules: { required: true,
index: 'ReceiverName',
jsonmap: 'ReceiverName',
label: 'ReceiverName',
resizable: true,
search: true
}
},
{ name: "ReceiverID",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: 'text',
editrules: { required: true,
index: 'ReceiverID',
jsonmap: 'ReceiverID',
label: 'ReceiverID',
resizable: true,
search: true
}
},
{ name: "PartnerType",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: "select",
editoptions: { value: "Clearinghouse:PPO:Both" },
editrules: { required: true,
index: 'PartnerType',
jsonmap: 'PartnerType',
label: 'PartnerType',
resizable: true,
search: true
}
},
{ name: "PartnerNotes",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: 'textarea',
editrules: { required: false,
index: 'PartnerNotes',
jsonmap: 'PartnerNotes',
label: 'PartnerNotes',
resizable: true,
search: true
}
},
{ name: "IncomingDataPrepSP",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: 'text',
editrules: { required: false,
index: 'IncomingDataPrepSP',
jsonmap: 'IncomingDataPrepSP',
label: 'IncomingDataPrepSP',
resizable: true,
search: true
}
},
{ name: "OutgoingDataPrepSP",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: 'text',
editrules: { required: false,
index: 'OugoingDataPrepSP',
jsonmap: 'OugoingDataPrepSP',
label: 'OutgoingDataPrepSP',
resizable: true,
search: true
}
},
{ name: "ExchangeAck",
width: 50,
resizable: true,
sortable: true,
sorttype: 'text',
editable: true,
edittype: "select",
editoptions: { value: "True:False" },
editrules: { required: true,
index: 'ExchangeAck',
jsonmap: 'ExchangeAck',
label: 'ExchangeAck',
resizable: true,
search: true
}
},
{ name: "isDeleted",
width: 5,
resizable: false,
sortable: true,
sorttype: 'text',
editable: true,
edittype: "select",
editoptions: { value: "Yes:No" },
editrules: { required: true,
index: 'isDeleted',
jsonmap: 'msg.d.isDeleted',
label: 'isDeleted',
resizable: true,
search: true
}
},
{ name: "DateTimeInserted",
width: 20,
hidden: false,
datefmt: 'Y-m-d',
sorttype: 'date',
editable: false,
editrules: { index: 'DateTimeInserted',
jsonmap: 'DateTimeInserted',
label: 'DateTimeInserted',
resizable: true,
search: true
}
},
{ name: "KeyID",
width: 5,
hidden: true,
key: false,
sorttype: 'int',
editrules: { index: 'KeyID',
jsonmap: 'KeyID',
hidedlg: true,
label: 'KeyID',
resizable: false,
search: false
}
}
],
height: 400,
shrinkToFit: true,
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40, 50],
sortname: 'ROWID',
sortorder: "asc",
viewrecords: true,
imgpath: 'http://localhost/DNN5/js/jQuery/jqGrid-3.4.3/themes/sand/images',
caption: 'X12 Trading Partners',
viewrecords: true,
gridComplete: function() {
alert("i'm grid complete" + JSON.stringify(msg));
//updates the new column order position
$('table.scroll').tableDnDUpdate();
}}).navGrid('table.scroll', { edit: true, add: true, del: true }).tableDnD();
Aqui está a Devolvido JSON string: (Não tenho nenhum problema de ver esses dados serem devolvidos ao cliente.)
sucesso:
{total:1,page:1,records:5,[{"ROWID":1,"ID":1,"PartnerID":"BCN","Direction":"I","InterchangeVersion":"004010X096A1","InterchangeSenderID":"BCC4010","InterchangeReceiverID":"company","ProductionMode":"T","SubmitterName":"BCC","SubmitterID":"BCC4010","SubmitterPOC":"BCC","CommQual":"","CommNumber":"","ReceiverName":"company","ReceiverID":"BCC4010","PartnerTypes":"","PartnerNotes":"","IncomingDataPrepSP":"","OutgoingDataPrepSP":"","ExchangeAck":false,"DateTimeInserted":new Date(1214412777787),"IsDeleted":false},{"ROWID":2,"ID":2,"PartnerID":"BCN","Direction":"I","InterchangeVersion":"004010X098A1","InterchangeSenderID":"BCC4010","InterchangeReceiverID":"company","ProductionMode":"T","SubmitterName":"BCC","SubmitterID":"BCC4010","SubmitterPOC":"BCC","CommQual":"","CommNumber":"","ReceiverName":"company","ReceiverID":"BCC4010","PartnerTypes":"","PartnerNotes":"","IncomingDataPrepSP":"","OutgoingDataPrepSP":"","ExchangeAck":false,"DateTimeInserted":new Date(1212088125000),"IsDeleted":false},{"ROWID":3,"ID":3,"PartnerID":"BCN","Direction":"O","InterchangeVersion":"004010X091A1","InterchangeSenderID":"HCA770385729","InterchangeReceiverID":"BCC47198 ","ProductionMode":"T","SubmitterName":"company Administrators","SubmitterID":"HCA770385729","SubmitterPOC":"briana","CommQual":"EM","CommNumber":"briana@company.com","ReceiverName":"BCN","ReceiverID":"BCC47198","PartnerTypes":"","PartnerNotes":"","IncomingDataPrepSP":"","OutgoingDataPrepSP":"","ExchangeAck":false,"DateTimeInserted":new Date(1212088125547),"IsDeleted":false},{"ROWID":4,"ID":4,"PartnerID":"EHG","Direction":"I","InterchangeVersion":"004010X097A1","InterchangeSenderID":"330989922","InterchangeReceiverID":"company","ProductionMode":"T","SubmitterName":"DENTALCONNECT","SubmitterID":"330989922","SubmitterPOC":"","CommQual":"","CommNumber":"","ReceiverName":"","ReceiverID":"","PartnerTypes":"Clearinghouse","PartnerNotes":"Dental clearinghouse. Sends billing address in the pay-to segment (NM1*87) and the service address in the billing segment (NM1*85).","IncomingDataPrepSP":"[dispatch].spPreprocessEHG","OutgoingDataPrepSP":"","ExchangeAck":true,"DateTimeInserted":new Date(1235603192033),"IsDeleted":false},{"ROWID":5,"ID":5,"PartnerID":"EMDEON","Direction":"I","InterchangeVersion":"004010X097A1","InterchangeSenderID":"341884003","InterchangeReceiverID":"857297703","ProductionMode":"T","SubmitterName":"INTERACTIVE PAYER NETWORK","SubmitterID":"341884003","SubmitterPOC":"","CommQual":"","CommNumber":"","ReceiverName":"","ReceiverID":"","PartnerTypes":"Clearinghouse","PartnerNotes":"Dental clearinghouse. Sends billing address in the pay-to segment (NM1*87) and the service address in the billing segment (NM1*85).","IncomingDataPrepSP":"","OutgoingDataPrepSP":"","ExchangeAck":true,"DateTimeInserted":new Date(1235603192000),"IsDeleted":false}]}
Solução
Na verdade, tvanfosson faz um excelente ponto com a exigência de identificador as 'linhas'. Estou familiarizado com o jMSAjax para que meus comentários podem ser nula e sem efeito. Eu estou contente de estar ciente disso.
Poderia ser algo tão simples como o tipo de retorno sendo corda? Isto é, quando a resposta é avaliado, você acabar com a corda encapsulado não o objeto JSON.
Eu estive em um lugar semelhante a mim mesmo. Eu encontrei as opções para ser, criar um objeto de negócios que representa a resposta esperada jqGrid e retornar o objeto não é uma string (ASP.NET serializará-lo como JSON para você!) Ou modificar o jqGrid para eval a resposta duas vezes (confuso).
Outras dicas
faltando um identificador para essa lista:
return_value = {
total:1,
page:1,
records:5,
[{ .. some X12 messages ..}]
}
Eu passei muito tempo tentando conseguir jqGrid trabalhar com ASP.NET usando JSON. Agora que eu tenho que trabalhar, eu gostaria de compartilhar com você. Na esperança de economizar tempo para outras pessoas.
Eu encontrei a resposta aqui . Isso não quer dizer que não existem outras maneiras de fazer este trabalho (eu tenho certeza que existem). Mas este definitivamente funciona.
Para resumir as coisas que fez a diferença para mim:
- Usando o "tipo de dados: function () {" nas configurações do jqGrid, e não usar "tipo de dados: json". A função usa "$ .ajax (" para chamar o serviço. Olhando em Fiddler, isso mudou os dados provenientes de volta para o navegador, para ser puro JSON (em vez de JSON envolto em XML).
- Usando um serviço web que retorna um classe de dados (no esquema jqGrid espera). A primeira vez que tentei usar JSON.NET mas por alguma razão a mensagem mostrou (em Fiddler novamente) para ser escapou com \ para cada citação no corda. Tenho certeza que você pode obter JSON.NET ao trabalho. Mas ele funciona muito bem sem ele.
Ele não se parece com você está adicionando o identificador de linhas de propriedade. Tente mudar:
json.Append(JsonConvert.SerializeObject(objPageCollection))
para
json.Append("rows: " + JsonConvert.SerializeObject(objPageCollection))
Se isto não funcionar, eu sugiro que você simplificar o problema - reduzir os dados para uma linha, por exemplo - e veja se você pode fazê-lo funcionar com os dados mais simples, em seguida, adicionar gradualmente mais coisas de volta para ele .