¿Cómo usar jqGrid con C # / ASP.NET y JSON.NET (y sin material AJAX.NET)?

Question

Bien, he estado investigando esto unos días y no estoy particularmente seguro de lo que estoy haciendo mal. Si alguien tiene ejemplos de uso de jqGrid con C # / ASP.NET y herramientas de código abierto, por favor, hágame saber dónde encontrarlos. Cualquier consejo sobre cómo encontrar documentación o herramientas decentes que pueda usar para depurar esto también sería muy apreciado (soy bastante nuevo en js / jQuery). Básicamente, solo necesito la funcionalidad de edición en el lugar, por lo que si estoy pasando por alto otra solución obvia para eso, podría ser útil saber ... Me gustaría evitar usar AJAX.NET si es posible.

Siento que estoy pasando por alto algo realmente obvio aquí.

En el siguiente ejemplo, obtengo el jqGrid para mostrar, pero no muestra datos.

Aquí está el 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" 
    });  
});

---

El HTML:

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

---

El JSON generado: no estoy seguro si llega a jqGrid, o si a jqGrid no le gusta mi JSON o mi WebMethod, pero puedo llamarlo yo mismo cuando voy a la URL correcta y obtenga la cadena de resultados 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)\/"}
]
}

Saludos, William Riley-Land

Answer 1

Antes de hacer cualquier otra cosa, descargue e instale esto:

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

Le permitirá ver exactamente lo que se solicita y devuelve mediante las solicitudes de jqGrid para obtener los datos JSON.

Tengo un código para un jqGrid que funciona, y aquí hay algo diferente:

datatype: "json"

En lugar de su:

datatype: "jsonstring"

También tengo un campo llamado colNames que es una matriz de cadenas que contiene nombres de columna.

Finalmente, tengo un campo pager que identifica un elemento que almacenará los controles de paginación, y es un DIV.

Answer 2

En ASP.NET, la fecha se serializa como JSON " / Date (ticks) / & Quot; que jqGrid no puede interpretar. Posibles soluciones ( post ):

• escriba un formateador personalizado para la cuadrícula
• cambia los datos que enviamos a la cuadrícula (enviando la fecha formateada como cadena)

¿Cómo implementó la visualización de la fecha con jqGrid?

Gracias.

Answer 3

Tenga cuidado con la propiedad de mayúsculas y minúsculas datatype está destinado a ser dataType con mayúsculas T .

Answer 4

¡Tenía exactamente el mismo problema! La solución que se me ocurrió es crear un formateador de JavaScript personalizado:

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

Si tiene problemas para que jqGrid funcione con ASP.NET, eche un vistazo aquí . Esto debería ahorrarle mucho tiempo.