Reader Level:
Articles

Working With XML Server Control in ASP.NET

By Megha Goyal on August 21, 2012
In this article we will discuss how to work with a XML server control in ASP.NET.
  • 0
  • 0
  • 5794

Suppose a Webshop wants to create a Web application that can store the details of the books available for sale in XML format and we want to store the details of the books and display them in tabular format. To show the data in tabular format we will use the XSLT file and a XML server control.

Let's have a look at the following steps:

Step 1

Go to the Visual Studio 2010.

Step 2

Click on File -> New -> WebSite.

Step 3

Now select the ASP.NET Website template from the available templates.

xs1.jpg

Step 4

Now give the name to your application and click on the ok button.

xs2.jpg

Step 5

Now right-click on the project name in the Solution Explorer and select Add New Item from it.

xs3.jpg

Step 6

Now select the XML File template from the available templates.

xs4.jpg

Step 7

Now give the name to your file .i.e. book.xml and click the Add button.

xs5.jpg

Step 8

Now add the following code in this file and press ctrl+s to save this file.

<?xml version="1.0" encoding="utf-8" ?>
<
Books>
 
<
Book>
   
<
BookId>B001</BookId>
   
<
Title>Getting Started with XML</Title>
   
<
Price>$2.5</Price>
   
<
Author>
     
<
FirstName>Micheal</FirstName>
     
<
LastName>Hicks</LastName>
   
</
Author>
   
<
Author>
     
<
FirstName>John</FirstName>
     
<
LastName>Williams</LastName>
   
</
Author>
 
</
Book>
 
<
Book>
   
<
BookId>B002</BookId>
   
<
Title>Understanding XML</Title>
   
<
Price>$22.15</Price>
   
<
Author>
     
<
FirstName>David</FirstName>
     
<
LastName>Simpson</LastName>
   
</
Author>
 
</
Book>
</
Books>

Step 9

Now again right-click on the project name in Solution Explorer and select Add New Item.

xs3.jpg

Step 10

Now select XSLT file from the available templates.

xs6.jpg

Step 11

Now give a name to your file and click on the Add button.

xs7.jpg

Step 12

Now add the following code in this file named my_stylesheet.xsl.

<?xml version="1.0" encoding="utf-8"?>
<
xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
<
xsl:template match="Author">
   
<
xsl:value-of select="FirstName"/>
   
<
xsl:value-of select="LastName"/>
   
<
xsl:if test="position()!=last()">, </xsl:if>
 
</
xsl:template>
 
<
xsl:template match="/">
 
<
html>
   
<
head>
     
<
title>Books at webshop</title>
   
</
head>
   
<
body>
     
<
h1>Books at webshop</h1>
     
<
table border="3" cellspacing="2" cellpadding="6">
       
<
thead align="center" bgcolor="silver">
         
<
th>Book Id</th>
         
<
th>Title</th>
         
<
th>price</th>
         
<
th>Author(s)</th>
       
</
thead>
       
<
tbody>
         
<
xsl:for-each select="Books/Book">
           
<
tr>
             
<
td>
               
<
font color="green">
                 
<
xsl:value-of select="BookId"/>
               
</
font>
             
</
td>
             
<
td>
               
<
xsl:value-of select="Title"/>
             
</
td>
             
<
td>
               
<
xsl:value-of select="Price"/>
             
</
td>
             
<
td>
               
<
xsl:apply-templates select="Author"/>
             
</
td>
           
</
tr>

         
</
xsl:for-each>
       
</
tbody>
     
</
table>
   
</
body>
 
</
html>
 
</
xsl:template>
</
xsl:stylesheet>

Step 13

Now drag and drop the XML server control on the web form named myform.aspx like this:

xs8.jpg

Step 14

Now right-click on this control and select the property option from it.

xs9.jpg

Step 15

In the property window of it just select the DocumentSource property of it.

xs10.jpg

Step 16

Now click on the browse button and select the XML file whose data needs to be displayed and click on the ok button.

xs11.jpg

Step 17

Now select the TransformSource property of the XML server Control.

xs12.jpg

Step 18

Now select the xslt file .i.e. my_stylesheet.xsl by which we want to display the data in tabular format.

xs13.jpg

Step 19

Now press F5 key to run the application.

Step 20

The output will be like this:

xs14.jpg

COMMENT USING

Trending up