AJAX-based DataGrid Control Programming

Introduction

In traditional Web development, each time the DataGrid Control is filled or updated, it returns data to the server. However, with the help of AJAX technology, we can fill the DataGrid Control without submitting and refreshing the form.

In this article, we use a simple example and the help of a DropDownList control to discuss how to achieve this purpose. In this example, we use a DropDownList control. Once the value of DropDownList is changed, it fills the DataGrid Control with the corresponding city name. In this process, we cleverly introduced AJAX technology.

Now that we have some basic AJAX knowledge, let's further discuss this DataGrid sample program. In this example, we mainly explain how to send a request from the client, how to process the request, and how to run the client script to display data in the DataGrid.

Sample Application Structure

In this example, we have created two Web forms AjaxServer. aspx and DataGridEx. aspx), one JavaScript file and one cascading style table file css ). The file AjaxServer. aspx is responsible for returning the author result once the server function is selected), and the file DataGridEx. aspx is responsible for displaying the returned results using AJAX technology. Let's make further analysis.

1. AjaxServer. aspx

This page uses the selected "City" as the request. It retrieves all the authors of the city and returns an XML response string to the client. See list 1 ).

List 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 displays all the author information in the DataGrid. Whenever the DropDownList changes, it uses a JavaScript file to retrieve the content and pre-display it. Note: To display the status of the currently running process, we use a panel here. This Panel has a GIF image that is not visible at the beginning)-when processing occurs on the server side, it is displayed, and once processing ends, it becomes invisible, as shown in Figure 1 ). The fundamental purpose of this operation is to give users a detailed picture of the currently running process.

Figure 1. The snapshot of DatagridEx. aspx is used to display processes)

3. JavaScript file

This file processes the request and response of the entire process. This file generates XMLHttpRequest and sends the selected city to the AjaxServer. aspx page. Once returned, it gets an output result similar to the database table-the result will be filled in the DataGrid.
At the beginning, the "process" Image in the panel is invisible. When the DropDownList option changes, the "process" image is displayed until the returned result is filled with the DataGrid. See list 2 ). This DataGrid is filled with the returned data-you can use a simple for loop to read the returned content, as shown in list 3 ).

List 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(); } }

List 3-populate the DataGrid Control with received response data

function FillTable(scity){ var auth = scity.getElementsByTagName('Authors'); var tbl = document.getElementById('dgauthors').getElementsByTagName("tbody")[0]; for(var i=0;i{ var row = document.createElement("TR"); row.setAttribute("className","text"); row.setAttribute("bgColor","#ECECEC"); for(var j=0;j{ var cell = document.createElement("TD"); cell.innerHTML = auth.context.childNodes(i).childNodes(j).text; row.appendChild(cell); } tbl.appendChild(row) } }

Run sample code

You can download the corresponding sample source code for analysis. First, create a virtual directory named MyAjax and copy the extracted files to the directory. Finally, open Visual Studio. NET Solution Explorer, press F5 to run the program, and observe the results.

Summary

This article uses a simple example-using AJAX technology to operate the DataGrid Control-to display the processing status of server calls. This is another simple example of applying AJAX technology to Web development on the. NET platform.

(