jQuery डेटाटेबल्स सर्वर साइड प्रोसेसिंग और एएसपी.Net

Question

मैं एएसपी.Net के साथ jQuery डेटाटेबल्स प्लगइन की सर्वर साइड कार्यक्षमता का उपयोग करने की कोशिश कर रहा हूं। AJAX अनुरोध वैध JSON लौटा रहा है, लेकिन तालिका में कुछ भी दिखाई नहीं दे रहा है।

मुझे मूल रूप से उस डेटा के साथ समस्याएं थीं जो मैं AJAX अनुरोध में भेज रहा था। मुझे एक "अवैध JSON प्राइमेटिव" त्रुटि मिल रही थी। मैंने पाया कि जेएसओएन धारावाहिक के बजाए डेटा को स्ट्रिंग में होना चाहिए, जैसा कि इस पोस्ट में वर्णित है: http://encosia.com/2008/06/05/3-mistakes-to-avoid-when-using-jquery-with-aspnet-ajax/। मैं काफी यकीन है कि ठीक करने का तरीका नहीं था, इसलिए मैं ajax अनुरोध में जोड़ने की कोशिश की: aboves अंत में मैं बाद में अन्य पैरामीटर जोड़ देंगे काम करता है

"data": "{'sEcho': '" + aoData.sEcho + "'}" 

। अभी मैं अपनी मेज में कुछ दिखाने के लिए कोशिश कर रहा हूं।

लौटने वाला JSON ठीक दिखता है और मान्य करता है, लेकिन पोस्ट में एसईको अनिर्धारित है, और मुझे लगता है कि तालिका में कोई डेटा लोड क्यों नहीं किया जा रहा है।

तो, मैं गलत क्या कर रहा हूं? क्या मैं भी सही रास्ते पर हूं या मैं बेवकूफ हूं? क्या कोई इस से पहले भाग गया है या कोई सुझाव है?

$(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 
       }); 
      } 
     }); 


}); 

एचटीएमएल:

<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:

यहाँ मेरी jQuery है

{"__type":"Data","sEcho":0,"iTotalRecords":2,"iTotalDisplayRecords":2,"aaData":[["testing","chad","testing"],["testing2","chad","testing"]]} 

Answer 1

मैंने डेटा को

"data": "{'sEcho': '"+ aoData[0].value + "'}", 

पर बदल दिया और यह काम किया। तो अब सवाल यह है कि शेष डेटा को webservice पर कैसे पास किया जाए। मैंने जेएसओएन को स्ट्रिंग में बदलने के लिए JSON2 का उपयोग करने का प्रयास किया, लेकिन उसने कीड़े का एक और प्रकार खोला, और यह एक अलग मुद्दा है।

Answer 2

मैं एक ही चीज़ पर काम कर रहा हूं और मेरे एक दोस्त ने मुझे इस हिस्से में मदद की। यह कोड सी # में है लेकिन आपको इसे बंद करने में सक्षम होना चाहिए।

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> 

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> 

कोड के पीछे:

// 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; 
    } 

मुझे आशा है कि इस मदद करता है!

मेरे लिए अगला कदम फ़िल्टरिंग, पेजिंग और सॉर्टिंग काम कर रहा है। अगर आपको इन भागों को काम करने में मिलता है तो मुझे बताएं =)

Answer 3

आप यहां http://weblogs.asp.net/zowens/archive/2010/01/19/jquery-datatables-plugin-meets-c.aspx पर ज़वेन के समाधान को देखना चाहते हैं। उन्होंने एक डाटाटेबल पार्सर किया है जो बहुत अच्छी तरह से काम करता है।

उम्मीद है कि इससे मदद मिलती है।

Answer 4

रहे हैं अपने जावास्क्रिप्ट कोड में कम से कम दो मुद्दों:

1. "डाटा": "{ 'sEcho': '' + aoData [0] .Value + ''}",

यह पहले ही चाड द्वारा इंगित किया गया था। एसईको प्राप्त करने का यह सही तरीका है:

1. "सफलता": फ़ंक्शन (msg) {fnCallback (msg.d); }

यदि आप .NET के हालिया संस्करण का उपयोग कर रहे हैं (मुझे 3.5 और ऊपर विश्वास है) तो आपको सफलतापूर्वक कार्य करने के लिए सफलता फ़ंक्शन को समायोजित करने की आवश्यकता है। यह समझने के लिए कि आपको "msg.d" क्यों पास करना है, this पढ़ें।

यहाँ अपने js कोड अद्यतन किया जाता है:

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

फिर इस सर्वर साइड पर काम कर पाने के, मुझे यकीन है कि आप अपने कोड में परिवर्तित करने के लिए (के बाद से मैं नहीं एक हूँ होगा क्या नहीं कर रहा हूँ वीबी पुरुष), लेकिन मुझे पता है कि मेरे लिए काम करता है निम्नलिखित (एक 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; } 
} 

वर्ग "FormatedList" बस json वापसी के साथ मदद करने के लिए है, स्वचालित रूप से, क्योंकि हम ScriptService उपयोग कर रहे हैं परिवर्तित ।