AJAX Drop Down List – Part Two

In the part one of AJAX Drop Down List tutorial, I described how to popuate a child drop down list with plain string data. In this post, I will describe how to use XML data to populate the child drop down list.

There are not gonna be many changes, so I will just address those need to be changed.

1. Client Side Page – ProductList.aspx
There is no chnage except the JavaScript code, I will address the JavaScript code change later.

2. Server Side Page – GetList.aspx
The only change is to generate a XML string, instead of a plain string. Here is the code (in VB.NET):

Private Sub Page_Load(ByVal sender As System.Object, ByVal e AsSystem.EventArgs) Handles MyBase.Load

‘Put user code to initialize the page here

If Not IsPostBack() Then

Dim company As String
company= Request.QueryString(“objectValue”)
Dim ds As NewdsProductList
Dim appHandler As New ApplicationHandler
ds = appHandler.GetProductList(company)
Dim sb As New System.Text.StringBuilder
Dim dr As New dsProductList.ProductRow
Dim index As Integer

‘Generate a XML string with a StringBuilder
‘Then at the client side, the JavaScript code will split the string to populate the child drop down list.
sb.Append(“<?xml version=””1.0″” encoding=””UTF-8″”?>“)
sb.Append(“<Products>”)

For index = 0 To ds.Product.Rows.Count – 1

sb.AppendFormat(“<Product ProductName=””{0}”” ProductID=””{1}”” /> “, dr.ProductName, dr.ProductID)

Next

sb.Append(“</Products>”)

Dim retVal As String
retVal = sb.ToString()
Response.ClearContent()
Response.ContentType = “text/xml”
Response.Write(retVal)
Response.End()

End If

End Sub

3. Client Side Page JavaScript Code
The only change we need to make is where the string is parsed.

Here is the portion of the code:

...... 

else if (http_request.readyState == 4 && http_request.status == 200)
{

var cList = document.getElementById("ddlChildList");
var recordNodes = http_request.responseXML.documentElement.getElementsByTagName('Product');
if (recordNodes.length ==0)
{

lbl.innerHTML = "No product is available for this company.";

}
else
{

lbl.innerHTML = "";
var optionItem;
var itemText;
var itemValue;
for (var count=0; count<recordNodes.length; count++)
{

itemValue = recordNodes[count].getAttribute('ProductID');
itemText = recordNodes[count].getAttribute('ProductName');
optionItem = new Option(itemText, itemValue, false, false);
cList.options[cList.length] = optionItem;

}

}

}

......

That’s it.