Client-Side XML Data Islands

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 asp.net xml control which will hold xml data returned from the server.

<xml id="xmldata">
<asp:xml id="xmlProduct" runat="server" EnableViewState="False"></asp:xml>
</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();
xdoc.LoadXml(_dsProduct.GetXml());

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 : 

<Products>

       <categoryid>8</categoryid>

       <productid>37</productid>

       <productname>Gravad lax</productname>

</Products>

 

<Products>

       <categoryid>8</categoryid>

       <productid>10</productid>

       <productname>Ikura</productname>

</Products>

 

       <Products>

       <categoryid>8</categoryid>

       <productid>36</productid>

       <productname>Inlagd Sill</productname>

</Products>

 

<Products>

       <categoryid>8</categoryid>

       <productid>41</productid>

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

</Products>

 

<Products>

       <categoryid>8</categoryid>

       <productid>13</productid>

       <productname>Konbu</productname>

</Products>

 

<Products>

       <categoryid>8</categoryid>

       <productid>30</productid>

       <productname>Nord-Ost Matjeshering</productname>

 

</Products>

<Products>

       <categoryid>8</categoryid>

       <productid>73</productid>

       <productname>Röd Kaviar</productname>

</Products>

 

<Products>

       <categoryid>8</categoryid>

       <productid>45</productid>

       <productname>Rogede sild</productname>

</Products>

 

<Products>

       <categoryid>8</categoryid>

       <productid>46</productid>

       <productname>Spegesild</productname>

</Products>

 

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.

          this.cmbProducts.add(option);

}

Stored Procedure [ GetAllProducts ] : Northwind database of SQL Server

SET QUOTED_IDENTIFIER ON
GO
SET ANSI_NULLS ON
GO

CREATE PROCEDURE GetAllProducts
AS
-------- Get Category List -------------------
select categoryid, categoryname
from categories
order by categoryname

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

select categoryid,productid,productname
from products
order by productname

GO
SET QUOTED_IDENTIFIER OFF
GO
SET ANSI_NULLS ON
GO

Reference: MSDN January 2006