jquery plugins - procesamiento del lado del servidor jQuery DataTables y ASP.Net
jquery-plugins webforms (4)
Estoy tratando de usar la funcionalidad del lado del servidor del plugin jQuery Datatables con ASP.Net. La solicitud de ajax devuelve JSON válido, pero no aparece nada en la tabla.
Originalmente tuve problemas con los datos que estaba enviando en la solicitud de Ajax. Recibí un error de "primitivo JSON no válido". Descubrí que los datos deben estar en una cadena en lugar de ser serializados por JSON, como se describe en esta publicación: http://encosia.com/2008/06/05/3-mistakes-to-avoid-when-using-jquery- con-aspnet-ajax / . No estaba muy seguro de cómo solucionarlo, así que intenté agregar esto en la solicitud de Ajax:
"data": "{''sEcho'': ''" + aoData.sEcho + "''}"
Si finalmente funciona, agregaré los otros parámetros más adelante. Ahora mismo estoy tratando de hacer que aparezca algo en mi mesa.
El JSON que regresa se ve bien y valida, pero el sEcho en la publicación no está definido, y creo que por eso no se están cargando datos en la tabla.
Entonces, ¿qué estoy haciendo mal? ¿Estoy incluso en el camino correcto o estoy siendo estúpido? ¿Alguien se encontró con esto antes o tiene alguna sugerencia?
Aquí está mi jQuery:
$(document).ready(function()
{
$("#grid").dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bServerSide":true,
"sAjaxSource": "GridTest.asmx/ServerSideTest",
"fnServerData": function(sSource, aoData, fnCallback) {
$.ajax({
"type": "POST",
"dataType": ''json'',
"contentType": "application/json; charset=utf-8",
"url": sSource,
"data": "{''sEcho'': ''" + aoData.sEcho + "''}",
"success": fnCallback
});
}
});
});
HTML:
<table id="grid">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>UserID</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
</table>
Webmethod:
<WebMethod()> _
Public Function ServerSideTest() As Data
Dim list As New List(Of String)
list.Add("testing")
list.Add("chad")
list.Add("testing")
Dim container As New List(Of List(Of String))
container.Add(list)
list = New List(Of String)
list.Add("testing2")
list.Add("chad")
list.Add("testing")
container.Add(list)
HttpContext.Current.Response.ContentType = "application/json"
Return New Data(HttpContext.Current.Request("sEcho"), 2, 2, container)
End Function
Public Class Data
Private _iTotalRecords As Integer
Private _iTotalDisplayRecords As Integer
Private _sEcho As Integer
Private _sColumns As String
Private _aaData As List(Of List(Of String))
Public Property sEcho() As Integer
Get
Return _sEcho
End Get
Set(ByVal value As Integer)
_sEcho = value
End Set
End Property
Public Property iTotalRecords() As Integer
Get
Return _iTotalRecords
End Get
Set(ByVal value As Integer)
_iTotalRecords = value
End Set
End Property
Public Property iTotalDisplayRecords() As Integer
Get
Return _iTotalDisplayRecords
End Get
Set(ByVal value As Integer)
_iTotalDisplayRecords = value
End Set
End Property
Public Property aaData() As List(Of List(Of String))
Get
Return _aaData
End Get
Set(ByVal value As List(Of List(Of String)))
_aaData = value
End Set
End Property
Public Sub New(ByVal sEcho As Integer, ByVal iTotalRecords As Integer, ByVal iTotalDisplayRecords As Integer, ByVal aaData As List(Of List(Of String)))
If sEcho <> 0 Then Me.sEcho = sEcho
Me.iTotalRecords = iTotalRecords
Me.iTotalDisplayRecords = iTotalDisplayRecords
Me.aaData = aaData
End Sub
JSON devuelto:
{"__type":"Data","sEcho":0,"iTotalRecords":2,"iTotalDisplayRecords":2,"aaData":[["testing","chad","testing"],["testing2","chad","testing"]]}
Cambié los datos a
"data": "{''sEcho'': ''"+ aoData[0].value + "''}",
Y funcionó. Entonces, ahora la pregunta es cómo pasar el resto de los datos al servicio web. Intenté usar JSON2 para convertir el JSON en una cadena, pero eso abrió otra lata de gusanos, y es un problema aparte.
Es posible que desee echar un vistazo a la solución zowen aquí http://weblogs.asp.net/zowens/archive/2010/01/19/jquery-datatables-plugin-meets-c.aspx . Hizo un analizador de tablas de datos que funciona bastante bien.
Espero que esto ayude.
Hay al menos dos problemas en su código de JavaScript:
- "datos": "{''sEcho'': ''" + aoData [0] .value + "''}",
Esto ya fue señalado por Chad. Esa es la forma correcta de obtener el sEcho:
- "éxito": función (msg) {fnCallback (msg.d); }
Si está usando una versión reciente de .net (creo que 3.5 y superior), necesita ajustar la función de éxito para regresar correctamente. Lea esto para comprender por qué tiene que pasar "msg.d".
Aquí está su código js actualizado:
$("#grid").dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bServerSide":true,
"sAjaxSource": "GridTest.asmx/ServerSideTest",
"fnServerData": function(sSource, aoData, fnCallback) {
$.ajax({
"type": "POST",
"dataType": ''json'',
"contentType": "application/json; charset=utf-8",
"url": sSource,
"data": "{''sEcho'': ''" + aoData[0].value + "''}",
"success": function (msg) {
fnCallback(msg.d);
}
});
}
});
Entonces, para que esto funcione en el lado del servidor, no estoy seguro de qué tendrá que cambiar en su código (ya que no soy un tipo VB), pero sé que lo siguiente me funciona (usando un servicio web de asmx )
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Collections.Generic;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class GridTest : System.Web.Services.WebService
{
[WebMethod]
public FormatedList ServerSideTest(string sEcho)
{
var list = new FormatedList();
list.sEcho = sEcho;
list.iTotalRecords = 1;
list.iTotalDisplayRecords = 1;
var item = new List<string>();
item.Add("Gecko");
item.Add("Firefox 1.0");
item.Add("Win 98+ / OSX.2+");
item.Add("1.7");
item.Add("A");
list.aaData = new List<List<string>>();
list.aaData.Add(item);
return list;
}
}
public class FormatedList
{
public FormatedList()
{
}
public string sEcho { get; set; }
public int iTotalRecords { get; set; }
public int iTotalDisplayRecords { get; set; }
public List<List<string>> aaData { get; set; }
}
La clase "FormatedList" es simplemente para ayudar con el retorno json, convertido automáticamente porque estamos usando ScriptService.
He estado trabajando en lo mismo y un amigo mío me ayudó con esta parte. Este código está en C #, pero debería poder portarlo.
código jQuery:
<script type="text/javascript">
$(document).ready(function() {
function renderTable(result) {
var dtData = [];
// Data tables requires all data to be stuffed into a generic jagged array, so loop through our
// typed object and create one.
$.each(result, function() {
dtData.push([
this.FirstName,
this.LastName,
this.Sign
]);
});
$(''#grid'').dataTable({
''aaData'': dtData,
"bJQueryUI": true
});
}
// Make an AJAX call to the PageMethod in the codebehind
$.ajax({
url: ''<%= Request.Url.AbsolutePath %>/ServerSideTest'',
data: ''{}'',
type: ''POST'',
contentType: ''application/json; charset=utf-8'',
dataType: ''json'',
success: function(result) {
// Call the renderTable method that both fills the aaData array with data and initializes the DataTable.
renderTable(result.d);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + ": " + textStatus + ": " + errorThrown);
}
});
});
</script>
código aspx:
<table id="grid" width="100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Sign</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
</table>
código detrás:
// to serialize JSON in ASP.NET, it requires a class template.
[Serializable]
public class Data
{
// Yay for 3.5 auto properties
public string FirstName { get; set; }
public string LastName { get; set; }
public string Sign { get; set; }
};
[WebMethod]
public static List<Data> ServerSideTest()
{
List<Data> DataList = new List<Data>();
Data thisData = new Data();
thisData.FirstName = "Sol";
thisData.LastName = "Hawk";
thisData.Sign = "Aries";
DataList.Add(thisData);
Data thisData2 = new Data();
thisData2.FirstName = "Mako";
thisData2.LastName = "Shark";
thisData2.Sign = "Libra";
DataList.Add(thisData2);
return DataList;
}
¡Espero que esto ayude!
El siguiente paso para mí es trabajar en filtrado, paginación y clasificación. Avísame si estas partes funcionan =)