Learn ASP.NET MVC, ASP.NET Core, and Design Patterns through our online training programs. Courses conducted by Bipin Joshi on weekends. Read more details here.

Using AJAX with ASP

Using AJAX with ASP.NET - Working with DataSet (Part 2)

Introduction

In the previous article I explained the overall concept of AJAX and how it can save you server post backs. Our last example was a simple "hello world" kind of example. In this part I will explain how to work with data from a DataSet to populate controls.

Simple Example

In this example we will see how to populate controls with data from DataSet using client side script. We will develop two web forms - DataSupplier.aspx and DataConsumer.aspx. The former populates a DataSet consisting of Orders for a specific Customer. The later consists of a DropDownList and a ListBox. The DropDownList displays list of all the Customers from Customers table. When user selects a specific CustomerID we call DataSupplier.aspx through AJAX and populate the ListBox with the DataSet returned

  • .Create a new Web Application in VS.NET
  • Add two web forms to it - DataConsumer.aspx and DataSupplier.aspx
  • Drag and drop a DropDownList and a ListBox on DataConsumer.aspx
  • Write following code in the Page_Load event handler of DataConsumer.aspx
    Private Sub Page_Load(ByVal sender As System.Object, 
	ByVal e As System.EventArgs) Handles MyBase.Load
        If Not IsPostBack Then
            Dim ds As New DataSet
            Dim da As New SqlDataAdapter
	("select customerid,companyname from customers", 
	"data source=.\vsdotnet;initial 
	catalog=northwind;user id=sa")
            da.Fill(ds, "custoemrs")
            DropDownList1.DataSource = ds
            DropDownList1.DataValueField = "customerid"
            DropDownList1.DataTextField = "companyname"
            DropDownList1.DataBind()
        End If
        DropDownList1.Attributes.Add("onchange", 
	"return GetDataViaAJAX();")
    End Sub
  • Here, we populated a DataSet with all the customer records from Customers table. We then bind this DataSet to the DropDownList
  • We also attach a client side event handler for "onchange" event of the DropDownList with GetDataViaAJAX() function.
  • The GetDataViaAJAX() function is a client side JavaScript function that calls DataSupplier.aspx via AJAX.
  • In the .aspx file add following JavaScript function to the <HEAD> section of the page
var obj;
function GetDataViaAJAX()
{
try
{
obj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
obj = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e1)
{
obj = null;
}
}
if(obj!=null)
{
obj.onreadystatechange = ProcessResponse;
obj.open("GET", "http://localhost/AJAXDemo/datasupplier.aspx?
customerid=" + 
document.getElementById("DropDownList1").value,  true);
obj.send(null);         
}
return false;
}
}
  • This function is similar to what we wrote in the previous article.
  • Note the part marked in bold. This time we call open() method by passing the URL of datasupplier.aspx and pass the Customer ID selected in the DropDOwnList as a query string parameter.
  • Now let's write ProcessResponse() function that deals with the returned data.
  • Add following function after the above function
function ProcessResponse()
{
if(obj.readyState == 4)
{
if(obj.status == 200)
{
var dsRoot=obj.responseXML.documentElement;  
var ddlOrders = document.getElementById("ListBox1");
for (var count = ddlOrders.options.length-1;
count >-1; count--)
{
ddlOrders.options[count] = null;
}
var orders = dsRoot.getElementsByTagName('orderid');
var text; 
var listItem;
for (var count = 0; count < orders.length; count++)
{
text = (orders[count].textContent || 
orders[count].innerText || orders[count].text);
listItem = new Option(text, text,  false, false);
ddlOrders.options[ddlOrders.length] = listItem;
}
}
else
{
alert("Error retrieving data!" );
}
}
}
  • Here, we created a function called ProcessResponse which will be called when the datasupplier.aspx returns the response.
  • This time we used responseXML property of the XMLHTTP instance because our data is going to be in XML format.
  • The documentElement property returns a reference to the root element of the returned XML
  • First we remove all the items from the ListBox by iterating through it and setting individual item to null
  • Then we retrieve all the OrderIDs by calling getElementsByTagName() method of DOM. This method returns array of all the nodes with tag name of orderid.
  • We then iterate through all the elements of this array and add the Order IDs to the ListBox.
  • Now, add following code to the Page_Load event of datasupplier.aspx
Private Sub Page_Load(ByVal sender As System.Object, 
ByVal e As System.EventArgs) Handles MyBase.Load
If Not IsPostBack Then
Dim ds As New DataSet
Dim da As New SqlDataAdapter("select orderid from orders 
where customerid='" & Request.QueryString("customerid") & "'", 
"data source=.\vsdotnet;initial catalog=northwind;user id=sa")
da.Fill(ds, "custoemrs")
Response.Clear()
Response.ContentType = "text/xml"
Response.Write(ds.GetXml())
Response.End()
End If
End Sub
  • Here, we fill a DataSet with all the Orders for the CustomerID specified in the query string
  • We set content type of the response to "text/xml" as our data is XML.
  • We retrieve the data in XML format by using GetXml() method of DataSet.
  • Finally we send this XML data back to the client using Response.Write() methiod.
  • Set the DataConsumer.aspx as the startup page and run the application.
  • Select any Customer from the DropDownList and you should get the relevant Order IDs.in the ListBox.

Code Download

The complete source code of above sample is available for download along with the article. Please see top of the article for download link.

Summary

In this article we saw how to work with data from a DataSet. The GetXml() method of DataSet class comes handy for generating XML version of your data instead of manually formatting it. In the next article I will show how the values addeded from client side JavaScript can be accessed on the server.

 




Bipin Joshi is a software consultant, trainer, author and a yogi having 21+ years of experience in software development. He conducts online courses in ASP.NET MVC / Core, jQuery, AngularJS, and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced Yoga way of life he also teaches Ajapa Meditation to interested individuals. To know more about him click here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 18 Sep 2005



Tags : ASP.NET AJAX JavaScript