Binding XML Data to a WebForm Control in ASP.Net

Suppose we have the requirement that a web site needs to create a Web Application to store the details in XML data format of the products available for sale. The details of the products should be displayed in a data grid. The details include product id, product name, description, price, quantity available and category. The form should have an advertisement banner. When the user clicks the banner, the order form of the WebShoppe Website should be displayed.

Let's have a look at the following steps:

1. Open the Visual Studio 2010.
    
2. Now go to File -> New -> WebSite.
    
3. Now give the name to your application and click the ok button. A Web Application will be created.
   
   
   
   
   
4. Now right-click on the name of the project in the Solution Explorer and select the Add New Item option from it.
   
   
    
5. Now select the XML file template from the available templates from the Add New Item dialog box.
   
   
    
6. Give the name to this file as Product.xml and select the Add button.
   
   
    
7. Now open the file and add the following code in it:
   

   <?xml version="1.0" encoding="utf-8" ?>
   <productdata>
     <product category="toy">
       <prodid>
         P001
       </prodid>
       <productname>Mini Bus</productname>
       <description>This is a toy for children aged 4 and above</description>
       <price>75</price>
       <qtyavilable>54</qtyavilable>
     </product>
     <product category="toy">
       <prodid>
         P002
       </prodid>
       <productname>Barbie Doll</productname>
       <description>This is a toy for children in the age group of 5-10</description>
       <price>100</price>
       <qtyavilable>200</qtyavilable>
     </product>
   </productdata>
   
   

8. Now to display the XML data in a GridView just add a GridView control on the Web form; see:
   
   
    
9. To make the format of the GridView just click on the smart button appearing aside the GridView control and select the Auto format option, as in:
   
   
    
10. Select any color scheme from the available schemes and click the ok button.
    
    
     
11. The scheme will be applied to this GridView control.
    
    
     
12. Now to display banner advertisements on the web page just add an AdRotator control from the toolbox to the myform.aspx file.
    
    
     
13. Now write the following code in the page_load event to bind the XML document to the GridView control.
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data.SqlClient;
    using System.Data; 
    public partial class myform : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataSet ds = new DataSet();
            ds.ReadXml(MapPath("Product.xml"));
            GridView1.DataSource = ds;
            GridView1.DataBind();
        }
    }
     
14. Now to write the code for the advertisement file just again right-click on the project name and select Add New Item.
    
    
     
15. Select XML File from the available templates in the Add New Item Dialog Box and give the name to the file as advertis.xml and click on add button.
    
    
     
16. Now add the following code in it to create an advertisement file:
    

    <?xml version="1.0" encoding="utf-8" ?>
    <Advertisements>
      <Ad>
        <ImageUrl>http://localhost:1330/productdetails/Images/myshopping.jpg</ImageUrl>
        <NavigateUrl>http://localhost:1330/productdetails/Onlineshopping.aspx</NavigateUrl>
        <AlternateText>The Order Online Form for WebShoppe</AlternateText>
        <Impressions>1</Impressions>
      </Ad>
      <Ad>
        <ImageUrl>http://localhost:1330/productdetails/Images/barbiel2.jpg</ImageUrl>
        <NavigateUrl>http://localhost:1330/productdetails/Onlineshopping.aspx</NavigateUrl>
        <AlternateText>The Order Online Form for WebShoppe</AlternateText>
        <Impressions>2</Impressions>
      </Ad>
    </Advertisements>

     
    
17. Now select the AdRotator control on the web form and open the property window of it.
    
    
     
18. In it select the Advertisement File property of it and click on the browse button.
    
    
     
19. Now select the appropriate XML file i.e. advertis.xml file and click the ok button.
    
    
     
20. Now press F5 to run the application.
     
21. The output will be as follows:
    
    
     
22. In it the XML data of the product file is showing in the GridView and a banner is displaying.
     
23. When we will click this banner we will be redirected to the onlineshopping web form.