Introduction
Usually a DataGrid filling or update requires a postback to
the server, but using AJAX we can fill the DataGrid contents without a form
submit (refresh). In this article, you will learn how to achieve this functionality
with the help of a DropDownList control through a sample application. Here we
use a DropDownList which is filled with city values; upon changing the DropDownList
value, we get the DataGrid filled with the data of authors from the city by
using AJAX. This article will be useful for the people who have some basic
knowledge about AJAX and who want to enrich that.
Since we are aware of basic AJAX functionality, we are
moving a step further with this DataGrid example. I will mainly explain about
how we send the request from the client, how it gets processed, and how the
client script runs to display the data in the DataGrid.
Sample Application Structure
In our sample, we have two webforms (AjaxServer.aspx and
DataGridEx.aspx), one javascript file, and one stylesheet(css file). While
AjaxServer.aspx does the server functionality that returns the authors result
upon selection, DataGridEx.aspx displays that result using AJAX.
Let's see how each entity works.
1. AjaxServer.aspx
This page gets the selected "City" choice as the
request. It fetches all the authors who belong to that city and returns a
Response XML string to the client as in Listing 1.
Listing 1 - AjaxSever.aspx.vb Code
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
If Not IsPostBack Then
choice = Request("Choice")
If choice.Length > 0 Then
Response.Clear()
If choice = "All Cities" Then
DA = New SqlDataAdapter("select * from authors", con)
Else
DA = New SqlDataAdapter("select * from authors where city ='" &
Request("Choice") & "'", con)
End If
DA.Fill(ds)
chString = ds.GetXml()
Response.Clear()
Response.ContentType = "text/xml"
Response.Write(chString)
Response.End()
Else
Response.Clear()
Response.End()
End If
Else
Response.Clear()
Response.End()
End If
End Sub
2. DataGridEx.aspx
This page initially shows all the author information in the DataGrid.
Upon every change in the DropDownList, it fetches the content using the
javascript file and shows it. For displaying the status of the "Running
Process," we've used a panel here. The panel has a GIF image (initially
invisible) that will be shown while the process is happening in the server, and
will become invisible after the process is over (See Figure 1). This is just to
make the user aware of the running process.
Figure 1 - Screenshot of DatagridEx.aspx(To show
the Process)
3. Javascript File
This file handles the request and response of the entire
process. This file will generate the XMLHttp request and send the city selected
to the AjaxServer.aspx page. On return, it gets an output like a table that is
to be filled up in the DataGrid.
Initially the panel that has the "Process" image
is invisible. When the DropDownList gets changed, the "Process" image
will be visible till the DataGrid gets filled up with the returned content (see
Listing 2). The DataGrid is filled with the contents returned using a simple
for loop that reads through the contents (see Listing 3).
Listing 2 - Process Status
function FetchDGContents()
{
var selecteditem = document.Form1.ddlcity.value;
imgtbl.style.visibility = 'visible';
var requestUrl = AjaxServerPageName + "?Choice=" +
encodeURIComponent(selecteditem);
CreateXmlReq();
if(XmlReq)
{
XmlReq.onreadystatechange = HandleResponse;
XmlReq.open("GET", requestUrl, true);
XmlReq.send();
}
}
Listing 3 - Filling the DataGrid with the Received Response
function FillTable(scity)
{
var auth = scity.getElementsByTagName('Authors');
var tbl = document.getElementById('dgauthors').getElementsByTagName("tbody")[0];
for(var i=0;i<auth.context.childNodes(0).parentNode.childNodes.length;i++)
{
var row = document.createElement("TR");
row.setAttribute("className","text");
row.setAttribute("bgColor","#ECECEC");
for(var j=0;j<auth.context.childNodes(0).childNodes.length;j++)
{
var cell = document.createElement("TD");
cell.innerHTML = auth.context.childNodes(i).childNodes(j).text;
row.appendChild(cell);
}
tbl.appendChild(row)
}
}
Running Sample Code
Download
the sample and unzip it. Create a virtual directory with the name MyAjax and
copy the zipfile contents to it. Open the solution and press F5 to see the
output.
Summary
This article shows how to work with the DataGrid using AJAX to show the process status of the server call.