Client-Side XML Data Islands

This article demonstrates how to send xml data to the web client, filter records from xml at client side by using XPath expression and populate all products of selected category into product drop-down.

This article demonstrates how to :

  1. Send xml data to the web client, and
  2. Filter records from xml at client side by using XPath expression.
  3. Populate all products of selected category into product drop-down. 

Send xml data to web client:

In aspx file, insert an xml tag and define its id. Now inside this xml tag embed xml control which will hold xml data returned from the server.

<xml id="xmldata">
asp:xml id="xmlProduct" runat="server" EnableViewState="False"></asp:xml>

In code behind aspx.vb file, create an XMLDocument object and then LoadXml from GetXML() method of dataset. The XmlDocument provides an xml document according to the W3C Core DOM Level 1 and Core DOM Level 2 standards.

XmlDocument xdoc = new XmlDocument();

Assign xdoc object to document property of asp:xml control.

xmlProduct.Document = xdoc; 

Well asp:xml control(xmlProduct) is ready to use at client side. 

XML at client side : 




       <productname>Gravad lax</productname>












       <productname>Inlagd Sill</productname>






       <productname>Jack's New England Clam Chowder</productname>












       <productname>Nord-Ost Matjeshering</productname>






       <productname>Röd Kaviar</productname>






       <productname>Rogede sild</productname>









Filter records from xml data at client side by using XPath expression: 

XPath : An XPath expression uses a path notation, like those used in URLs, for addressing parts of an XML document. The expression is evaluated to yield an object of the node-set, Boolean, number, or string type.

XPath Expressions :

Example 1 : "//Products[categoryid='8']" refers to all elements of categoryid 8.

Example 2 : "//Products[categoryid='8']/productid refers to all elements of ProductId  of categoryid 8.

Note : The double forward slash (//) is a path operator, indicates a search that can include zero or more levels of hierarchy.

var products = xmldoc.selectNodes("//Products[categoryid='8']");

Here, products contains a collection of all elements belongs to category id 8 returned by selectNodes() method of xmlDocument object.

selectNodes() : Applies the specified pattern-matching operation to this node's context and returns the list of matching nodes as IXMLDOMNodeList ( i.e. the collection of nodes selected by applying the given pattern-matching operation. If no nodes are selected, returns an empty collection). The IXMLDOMNodeList supports iteration through the live collection, in addition to indexed access.

IXMLDOMNodeList members :

  • properties
             length : Read only property indicates the number of items in the collection. 
  • Methods 
             item() : Allows random access to individual nodes within the collection. 
             nextNode() : Returns the next node in the collection. 
             reset() : Resets the iterator. 

Populate product drop-down list with all products of categoryid 8 : 

var option = null;

// iterate products collection to get productId and productName

for ( var i =0 ; i < products.length ; i++)


          //create an option element

          option =  document.createElement("OPTION");

          // specify value and text for option element

          // in products nodesList childNodes(0) refers to CategoryId

          //childNodes(1) to ProductId, and

          //childNodes(2) to ProductName.

          // text property represents the text content of the node.

          option.value = products.item(i).childNodes(1).text; // childNodes(1)

          option.text = products.item(i).childNodes(2).text;

          // add option element to product drop-down list.



Stored Procedure [ GetAllProducts ] : Northwind database of SQL Server


-------- Get Category List -------------------
select categoryid, categoryname
from categories
order by categoryname

-------- Get Product List ------------------------------

select categoryid,productid,productname
from products
order by productname


Reference: MSDN January 2006