jquery plugins jQuery डेटाटाबेस सर्वर साइड प्रसंस्करण और ASP.Net




jquery-plugins webforms (4)

मैं asp.net के साथ jquery datatables प्लगइन की सर्वर साइड कार्यक्षमता का उपयोग करने की कोशिश कर रहा हूँ। अजाक्स अनुरोध वैध JSON लौट रहा है, लेकिन तालिका में कुछ भी नहीं दिख रहा है

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

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

यदि अंततः काम करता है तो मैं बाद में अन्य मापदंडों को जोड़ दूंगा। अभी मैं अपनी तालिका में कुछ दिखाने की कोशिश कर रहा हूं।

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

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

यहां मेरा 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 लौट गया:

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

मैंने डेटा को इसमें बदल दिया

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

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


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

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>

एएसपीएक्स कोड:

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

आशा है कि ये आपकी मदद करेगा!

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


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

उम्मीद है की यह मदद करेगा।


आपके जावास्क्रिप्ट कोड में कम से कम दो समस्याएं हैं:

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

यह पहले से चाड ने बताया था। SEcho प्राप्त करने का यह सही तरीका है:

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

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

आपका जेएस कोड अपडेट किया गया है:

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

तो यह सर्वर साइड पर काम करने के लिए, मुझे यकीन नहीं है कि आपको अपने कोड में क्या बदलाव करना होगा (क्योंकि मैं वीबी लड़का नहीं हूं), लेकिन मुझे पता है कि मेरे लिए निम्न कार्य (एएसएमएक्स सेवा ):

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

क्लास "फॉर्मैटलिस्ट" केवल जेएसएन रिटर्न के साथ मदद करने के लिए है, स्वचालित रूप से कनवर्ट करता है क्योंकि हम ScriptService का उपयोग कर रहे हैं