Display Records From Database using jQuery

Hey Hi,

In this post you will see how to display records using jQuery. As JQuery is light weight so we can call any method from our .vb/.cs page using  $.ajax() method . There are other ways to do this like $.get() method
Here I will show you with $.ajax call.
For the new users I will explain what is the use of doing this. Suppose you want to show data on image (hover effect) or suppose you need to display error messages or suppose you need to display anything but "Without Page refresh" you can do it with jQuery.

So lets start now,
Let us consider I have a listing screen each row represents data about employee. I need to display details about that employee when I click the image button placed before name.
In my aspx page I placed a html table
   

<table align="center">
    <tr>
    <td><img src="CallSend.jpg"  height="20" width="20" id="imgDetail" style="cursor:hand;" onclick="getCars(event,0)"/><div id="output" class="pop-up" visible="false">
 
    </div></td>
    <td width="5px"></td>
    <td>Detail</td>
    </tr>
    <tr>
    <td colspan="2" height="5px"></td>
    </tr>
    <tr>
    <td><img src="CallSend.jpg"  height="20" width="20" id="imgDetail2" style="cursor:hand;" onclick="getCars(event,1)"/> </td>
    <td width="5px"></td>
    <td>Detail</td>
    </tr>
    </table>


Now, when I click on 'imgDetail' button I will see details.

Here you can see getDetails() function with parameters. This function contains jQuery coding to fetch data
Here is the code

<script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>

    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
  function getCars(e,callid) {
      $.ajax({
          type: "POST",
          url: "getData.aspx?callid=" + callid,
          data: "{}",
          contentType: "application/json",
          dataType: "json",
          success: function(response) {
              var posx = e.pageX;
              var posy = e.pageY;
              var cars = response.d;
              var data = eval(response);

              $('#output').show()
              $('#output').css('top', e.pageY)
              $('#output').css('left', e.pageX)
              $('#output').empty();
              $('#output').append('<table>')
         
              $.each(data, function(index, data) {             
                  $('#output').append('<tr><td>ID :' + data._Id + '</td><td>&nbsp;</td><td> Name:' + data._name + '</td><td>&nbsp;</td><td> Address:' + data._address + '</td></tr>');
                  $('#output').append('<tr><td colspan=5 width=' + '2px' + '></td></tr>');

              });
           
              $('#output').append('</table>');
          },
          failure: function(msg) {
              $('#output').text(msg);
          }
      });
  }
</script>

   
   


Here in simple function getDetails() we are calling aspx page getData.aspx page in ajax call
The getData.aspx.vb contains following


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim id = Convert.ToInt32(Request.QueryString("callid"))
        Response.Write(getList(id))
        Response.End()

    End Sub
    Public Function getList(ByVal id As Integer) As String
        Dim str As String
        Dim obj As data = New data()
        If id = 1 Then
            str = obj.createList(id)
        Else
            str = obj.createList()
        End If

        Return str
    End Function

The createList function is placed in data.vb file, the file is like this


Imports Microsoft.VisualBasic
Imports System.Web.Script.Serialization


Public Class data
    Private components As System.ComponentModel.IContainer
    Private _Id As Integer
    Private _name As String
    Private _address As String
    'NOTE: The following procedure is required by the Component Designer
    'It can be modified using the Component Designer.
    'Do not modify it using the code editor.
    Private Sub InitializeComponent()
        components = New System.ComponentModel.Container
    End Sub
    Public Sub New()
        MyBase.New()
        InitializeComponent()
    End Sub
    Public Property Id() As Integer
        Get
            Return _Id
        End Get
        Set(ByVal Value As Integer)
            _Id = Value
        End Set
    End Property
    Public Property name() As String
        Get
            Return _name
        End Get
        Set(ByVal Value As String)
            _name = Value
        End Set
    End Property
    Public Property address() As String
        Get
            Return _address
        End Get
        Set(ByVal Value As String)
            _address = Value
        End Set
    End Property

    Public Sub Add(ByVal Id As Integer, ByVal name As String, ByVal address As String)
        _Id = Id
        _name = name
        _address = address
    End Sub
    Public Function createList() As String
        Dim datalist(3) As data
        Dim str As String
        Dim js As JavaScriptSerializer
        js = New JavaScriptSerializer()
        datalist(0) = New data()
        datalist(1) = New data()
        datalist(2) = New data()
        datalist(3) = New data()
        datalist(0).Add(1, "ABC", "Mumbai")
        datalist(1).Add(1, "PQR", "Mumbai")
        datalist(2).Add(1, "XYZ", "Mumbai")
        datalist(3).Add(1, "DEF", "Mumbai")
        str = js.Serialize(datalist)
        Return str

    End Function

    Public Function createList(ByVal id As Integer) As String
        Dim datalist(3) As data
        Dim str As String
        Dim js As JavaScriptSerializer
        js = New JavaScriptSerializer()
        datalist(0) = New data()
        datalist(1) = New data()
        datalist(2) = New data()
        datalist(3) = New data()
        datalist(0).Add(1, "RK", "Mumbai")
        datalist(1).Add(2, "RK", "Mumbai")
        datalist(2).Add(3, "RD", "Mumbai")
        datalist(3).Add(4, "RD", "Mumbai")
        str = js.Serialize(datalist)
        Return str
    End Function
End Class

Here I will explain you what happens actually ,
The user will click on image button then getDetails() function gets executed. In that we are calling page getData.aspx page through ajax call.
In that page we are creating list and serialized it with javascript Serializer . The data will be look like

[{"_Id":1,"_name":"RK","_address":"Mumbai"},{"_Id":2,"_name":"RK","_address":"Mumbai"},{"_Id":3,"_name":"RD","_address":"Mumbai"},{"_Id":4,"_name":"RD","_address":"Mumbai"}]

we will got this in 'response' after successful execution. Then we will show it in div

This is simple .