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.