Como usar jqGrid com C # / ASP.NET e JSON.NET (e nenhum material AJAX.NET)?

Question

OK, eu estive olhando para esta alguns dias e não estou particularmente certo o que estou fazendo de errado. Se alguém tem exemplos do uso de jqGrid com ferramentas C # / ASP.NET e código aberto de trabalho, por favor, por favor deixe-me saber onde encontrá-los. Todas as dicas sobre como encontrar documentação ou ferramentas que eu poderia usar para depurar este seria mais apreciada muito decente (eu sou muito novo para js / jQuery). Basicamente, eu só preciso a funcionalidade de edição no local, por isso, se eu estou com vista para uma outra solução óbvia para isso, pode ser útil saber ... Eu gostaria de evitar o uso de AJAX.NET se possível.

Eu sinto que eu só estou com vista algo realmente óbvio aqui.

No exemplo a seguir, eu recebo o jqGrid para exibir, mas não mostra dados.

Aqui está o JavaScript relevante:

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" 
    });  
});

---

O HTML:

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

---

O JSON gerado: Eu não tenho certeza se ele faz isso ao jqGrid, ou se o jqGrid não gosta meu JSON ou o meu WebMethod, mas eu posso chamá-lo de mim mesmo quando eu vou para a URL adequada e obter a seqüência resultado 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

Antes de fazer qualquer outra coisa, faça o download e instalar este:

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

Ele permitirá que você ver exatamente o que está sendo solicitado e enviado de volta pelos pedidos jqgrid para obter os dados JSON.

Eu tenho algum código para um jqGrid trabalhar, e está aqui algo diferente:

datatype: "json"

Em vez do seu:

datatype: "jsonstring"

Eu também tenho um campo chamado colNames que é uma matriz de strings contendo os nomes das colunas.

Finalmente, tenho um campo pager que identifica um elemento que irá armazenar os controles de paginação, e é um DIV.

Answer 2

Em ASP.NET, Data fica serializado como JSON "/ data (carrapatos ) / " que não pode ser interpretado por jqGrid. Possíveis soluções ( pós ):

• escrever um formatador personalizado para a rede
• alterar os dados que enviamos para a rede (enviando data formatada como string)

Por favor, diga como você implementar visualização da data com jqGrid?

Obrigado.

Answer 3

Tenha cuidado com a propriedade sensível caso tipo de dados é destinado a ser dataType com maiúscula T .

Answer 4

Eu tinha exatamente o mesmo problema! A solução que eu vim com é criar um JavaScript personalizado formatador:

$(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

Se você tiver problemas para obter jqGrid trabalhar com ASP.NET, por favor, ter um olhar aqui . Isso deve poupar um monte de tempo.