Lookup table with data using “Ajax”
Nowadays Microsoft has introduced a new technology called “ Ajax” which is useful for having “fresh” data from the server without delaying more to the client end. There is a product also available in the market produced by Microsoft and named that as “Atlas.NET”.
There is also another way to handle the same state by implementing “Ajax” in the form of “XMLHTTP” request which can be used when there are certain situations where it is necessary to fetch the fresh data from the server without delaying them to persist to
the client.
Whenever there is a situation like in which some data is to be produced in a table and that data comes from the server. This consumes more time to produce the data to the client because every time whole page is sent to and received from the server with the data. There is a solution to overcome this problem by “sending and receiving only required data, not whole page”. Followingexample shows how to overcome this problem using “XMLHTTP”
The “frmAjax.aspx” is the file in which there is a button control clicking on which the data is presented to the client without delaying more.
<%@ Page Language=”VB” AutoEventWireup=”false” CodeFile=”frmAjax.aspx.vb” Inherits=”frmAjax” %>
<html>
<head runat=”server”>
<title>Ajax Lookup Table</title>
<script language=”jscript” type=”text/jscript” >
// JScript File
var xmlRequest=null;
//function that handles button click
function fnajaxcall(){
xmlRequest = new ActiveXObject(”Microsoft.XMLHTTP”);
xmlRequest.onreadystatechange =fnajaxresult;
xmlRequest.open(”POST”,”frmAjax.aspx?Go=yes”, false);
xmlRequest.setRequestHeader(”Content-Type”,”text”);
xmlRequest.send();
return false;
}
//Handling Ready state of XMLHTTP Request
function fnajaxresult(){
if (xmlRequest.readyState == 4){
var response = xmlRequest.responseText;
//this will generate the table came from XMLHTTP request
window.execScript(response);
return false;
}
}
//Clearing Rows from the Table
function fnClearRows(){
var i;
while(tblStudents.rows.length>0)
tblStudents.deleteRow(0);
return false;
}
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:Button ID=”btnCreate” runat=”server” Text=”Create Table” />
<asp:Button ID=”btnClearTable” runat=”server” Text=”Clear Table” /><br />
<br />
<table id=”tblStudents” border=”1″ cellpadding=”0″ cellspacing=”0″>
<tbody id=”oTBody0″ />
</table>
</form>
</body>
</html>
Following is the file named as “frmAjax.aspx.vb“ where the data is fetched from the server.
Imports System.Data
Imports System.Data.OleDb
Partial Class frmAjax
Inherits System.Web.UI.Page
Dim ods As New System.Data.DataSet
Dim ad As New OleDbDataAdapter
Dim cn As New OleDbConnection
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Request.QueryString(”Go”) Is Nothing Then
Response.Clear()
Response.Write(filldataset())
Response.End()
End If
End Sub
Private Function filldataset() As String
Try
Dim iCounter As Integer, jCounter As Integer
Dim strJava As String
cn.ConnectionString = “Provider=Microsoft.Jet.Oledb.4.0;DataSource=” & Server.mapPath(“My_Data\dbStudents.mdb”)
ad.SelectCommand = New OleDbCommand(”Select [no],name+’ ‘+surname,address from students”, cn)
ad.Fill(ods)
strJava = “fnClearRows(); var oTHead = tblStudents.createTHead();” _
& ” var oTFoot = tblStudents.createTFoot();” _
& ” var oCaption = tblStudents.createCaption();”
_
& ” var oRow, oCell;”_
& ” var i, j;”_
& ” var heading = new Array;” _
& ” heading[0] = ‘No’;”_
& ” heading[1] = ‘StudentName’;” _
& ” heading[2] = ‘Address’;”_
& ” oRow = oTHead.insertRow();”_
& ” oTHead.bgColor = ‘lightskyblue’;” _
& ” for (i=0; i<3;i++)” _
& ” {” _
& ” oCell = oRow.insertCell();”_
& ” oCell.align = ‘center’;” _
& ” oCell.style.fontWeight = ‘bold’;” _
& ” oCell.innerText = heading[i];” _
& ” }”
With ods.Tables(0)
For iCounter = 0 To .Rows.Count - 1
strJava = strJava _
& ” oRow = oTBody0.insertRow();”
For jCounter = 0 To 2
strJava = strJava & “oCell = oRow.insertCell();” _
& “oCell.innerText = ‘” & .Rows(iCounter)(jCounter).ToString & “‘;”
Next
Next
End With
Return strJava
Catch ex As Exception
Response.Write(”Error Occured”)
Return “”
Finally
ods.Dispose()
ad.Dispose()
cn.Dispose()
End Try
End Function
Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
btnCreate.Attributes.Add(”onclick”,
“return fnajaxcall();”)
btnClearTable.Attributes.Add(”onclick “if(tblStudents.rows.length==0){alert(’No rows’)} else { fnClearRows();} return false;”)
End Sub
End Class
Output
|
|
After Clicking on the “Create table button” the page will be displayed the following without having Whole Page Recycling
|
No |
Student Name |
Address |
|
1 |
Saurin shah |
xkzfgdfiwgfo wfowhf [wwfwfw |
|
2 |
Ramesh patel |
sfskfgas ifsfhso fhso hf a |
|
3 |
Nikunj patel |
dfasf vassh shgafs a |
|
4 |
Raj sharma |
sfasd fs shgs hs as |
|
5 |
Dhaval patel |
slfnsl nsl snngms; ms;g msp gsagnasgnasd asgnaog h |
|
6 |
Anjum hirani |
sfs fjs hsoghaog wagh sdfapgh phgipea g aw |
|
7 |
Jayesh sutaria |
fj snh glhsgo agoshgosagh oshg oasgosghaosg hasopg |
|
8 |
Yagnik Jadhav |
sfas asdkgbsjagosdghasdl asljgsljgbaslgans |
|
9 |
Bhumit patel |
fgs;gahnsgha gshgoash |
|
10 |
Vimal patel |
Author:
Saurin Shah
Saurin Shah is working as a Programmer at Semaphore Infotech Pvt. Ltd, India. He has more than 3 years Experience in .net. You can contact on email: saurin@semaphore-software.com.
