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.

    shopping1.jpg


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

    shopping2.jpg
     
  5. Now select the XML file template from the available templates from the Add New Item dialog box.

    shopping3.jpg
     
  6. Give the name to this file as Product.xml and select the Add button.

    shopping4.jpg
     
  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:

    shopping5.jpg
     
  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:

    shopping6.jpg
     
  10. Select any color scheme from the available schemes and click the ok button.

    shopping7.jpg
     
  11. The scheme will be applied to this GridView control.

    shopping8.jpg
     
  12. Now to display banner advertisements on the web page just add an AdRotator control from the toolbox to the myform.aspx file.

    shopping9.jpg
     
  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.

    shopping10.jpg
     
  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.

    shopping11.jpg
     
  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.

    shopping12.jpg
     
  18. In it select the Advertisement File property of it and click on the browse button.

    shopping13.jpg
     
  19. Now select the appropriate XML file i.e. advertis.xml file and click the ok button.

    shopping14.jpg
     
  20. Now press F5 to run the application.
     
  21. The output will be as follows:

    shopping15.jpg
     
  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.

Next Recommended Readings