Client-Side XML Data Islands

This article demonstrates how to :

Send xml data to the web client, and
Filter records from xml at client side by using XPath expression.
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.

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 :

<productname>Gravad lax</productname>

</Products>

<productname>Ikura</productname>

</Products>

<productname>Inlagd Sill</productname>

</Products>

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

</Products>

<productname>Konbu</productname>

</Products>

<productname>Nord-Ost Matjeshering</productname>

</Products>

<productname>RÃ¶d Kaviar</productname>

</Products>

<productname>Rogede sild</productname>

</Products>

<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