Display, Sorting and Pagination for JSON Data via WebService in Asp.net

See more:

ASP.NET

Ajax

jQuery

JSONP

Hi expert and every one i invite you to plz discuss this question and shows some your experience and technic.. i have been searching over internet from couple of days that
1. How to Create a Webservice that retrieve the JSON Data from Server (because i dont want any post back specially while searching the content in any website)
2. then after retrieving JSON Data how to display/show that Data into a Page without any server-side control (like Listview/ Gridview or wihtout any server side control)
3. then after showing JSON Data on page there should be pagination limite on the page without any plugin.. (for exmaple 10 records in per page)
4. sorthing is also the good requirement in any appliaction or website... (so it must be available also)

above are the following 4 Points which we should achieve specially to get rid of the load time and reduce the delay in any application or website but personaly i am trying to do this in asp.net..

till now i have achieved first two points that how to retreive JSON Data via Webservice and Display it on page. but dont acheive the 3rd and 4th points yet. for the purpose of imporiving a code and techinc and for achieving the last 2 points i am sharing what i did


1. Create a Webservice in asp.net which retrive the data from SQL Server by Stroed Procedure and then convert this Data into JSON

before creating a webservice first create the class which will hold the parameters values of stroed procedure

Public Class SearchParameters
    Public Property CHASSIS_NO() As String
        Get
            Return m_CHASSIS_NO
        End Get
        Set(ByVal value As String)
            m_CHASSIS_NO = value
        End Set
    End Property
    Private m_CHASSIS_NO As String
    Public Property MODEL() As String
        Get
            Return m_MODEL
        End Get
        Set(ByVal value As String)
            m_MODEL = value
        End Set
    End Property
    Private m_MODEL As String
    Public Property color() As String
        Get
            Return m_color
        End Get
        Set(ByVal value As String)
            m_color = value
        End Set
    End Property
    Private m_color As String

i just created Chassis_no, Model and color property in SearchParameters Class here, you will complete it for testing if you wish. it will Provide the key value pair in JSON Data.



Then Create the Webservice

<WebMethod()> _
  'Tell to your Class that it`s type is an Array by using SearchParameters
    'Class because SeachParameters Class Basically is an array
    Public Shared Function Select_Search() As SearchParameters()

        'Convert your Array (SeachParameters) in List
        Dim JSON As New List(Of SearchParameters)()

        'Create a Datable Instance
        Dim dtst As New DataTable()

        'Create a Inastance of your TableAdapter
        Dim List As New dsStockTableAdapters.newSTOCK_LISTTableAdapter()

        'Assign  Your Stroed Procedure to DataTable
        dtst = List.GetData("0", "0", "0", "0", "0", "0", "", "", "", "Any", "", "", "", "", "", 0, "", "", 0, "")
        Try
            'Loop thorugh in each row in your DataTable and assign the column values to the properties of SearchParameters Class
            For Each rdr As DataRow In dtst.Rows
                Dim SRCH As New SearchParameters()
                SRCH.CHASSIS_NO = rdr("CHASSIS_NO").ToString()
                SRCH.MODEL = rdr("MODEL").ToString()
                SRCH.color = rdr("color").ToString()
                SRCH.TRANSMISSION = rdr("TRANSMISSION").ToString()
                SRCH.DOOR = rdr("DOOR").ToString()
                SRCH.MAKE = rdr("MAKE").ToString()
                SRCH.Image1 = rdr("Image1").ToString()
                SRCH.MODEL_DESCRIPTION = rdr("MODEL_DESCRIPTION").ToString()
                JSON.Add(SRCH)
            Next
        Catch

        Finally
        End Try
        Return JSON.ToArray() ' Return JSON Data Back
    End Function

you have noticed i have passing static parameters values in stroed procedure but it`s ok for now
actually i will pass the dropdown selected value in stored procedure parameters later...

TO SEE THAT YOUR JSON DATA IS RETREVING ACURATLY IN BROWER FOR THIS YOU HAVE TO CREATE A SCRIPT

Create a function on button click

<script<pre lang="xml">type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
   <script type="text/javascript">

function HandleIT() {
    $.ajax({
        type: "POST",
        url: "Default.aspx/Select_Search",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            console.log(data);
        }

    });
}
</script>
<asp:Button ID="Button2" runat="server" Text="Button" OnClientClick="HandleIT(); return false;"/>

Open your page on Chrome Now when you right click on page and click on Inspect Element > then go to Console Tab you must see the JSON Data in Console Window that`s means you have succussfully Retrived JSON Data

HOW TO DISPLAY JSON DATA WITHOUT ANY SERVER SIDE CONTORL

<script type="text/javascript">
        function HandleIT() {
            $.ajax({
                type: "POST",
                url: "stocklist.aspx/Select_Search",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    for (var i = 0; i < data.d.length; i++) {
                            var output = '<ul class="searchresult">';
                            output += '<li>';
                            output += '<table><tr>';
                                output += '<td><img src="http://localhost:37245/NewPeaceAuto - Steer_Well/WebStock_Images/' + data.d[i].Image1 + '" alt=""/></td>';
                                output += '<td>CHASSIS NO:</td><td>'+ data.d[i].CHASSIS_NO +'</td>';
                                output += '<td>MODEL:</td><td>'+ data.d[i].MODEL +'</td>';
                                output += '<td>COLOR:</td><td>'+ data.d[i].color +'</td>';
                                output += '<td>TRANS:</td><td>'+ data.d[i].TRANSMISSION +'</td>';
                                output += '<td>DOOR:</td><td>'+ data.d[i].DOOR +'</td>';
                                output += '<td>MAKE:</td><td>'+ data.d[i].MAKE +'</td>';
                                output += '</tr></table></li></ul>';
                                $("#update").append(output);                      
                    }
                }
            });
        }
</script>

you can also change the structure of table as per your requirement

DISPLAY DATA INTO DIV

<div id="update"></div>
        <script src="js/jquery.js"></script>

Style Sheet CSS
You Can Create Style for #update, #update ul, #update ul li, Update li:hover etc...


Is there any one who can tell last two points?