The following is a shortened version of a walkthrough located at MSDN. You can copy all the text from the MSDN web site or from here to create an XML file to use with this lesson. The code used here is for Visual Basic.

 

Create an XML file

1. Right click on the Solution folder for this project and choose Add > Add New Item to add an XML file and name it Bookstore.xml
2. Paste the text from the sample above into it for use with this lesson.
3. Save the XML file in your App_Data folder.

 

Create a form and data source

1. Create a new ASPX web form.
2. In the Toolbox, from the Data group, drag an XmlDataSource control onto the page. If you have the latest version of Visual Studio, you do not need to switch to Design view to drag controls.
3. On the XmlDataSource Tasks menu, click Configure Data Source. The Configure Data Source dialog box opens.
4. In the Data file box, type ~/App_Data/Bookstore.xml, or the path to your newly created XML file and click OK.

 

Add GridView control to display XML data

1. In the Toolbox, from the Data group, drag a GridView control onto the page.
2. On the GridView Tasks menu, in the Choose Data Source list, click XmlDataSource1
3. Press CTRL+F5 to run the page.

You should see the raw data from your XML file.

 

Add a GridView control to display comments

1. In the Toolbox, from the Data group, drag a second GridView control onto the page and place it below the first GridView control.
2.  In the Choose Data Source box, click New data source.
3. Click XML File as the data source. Leave the default, XmlDataSource2. Click OK.
4. The Configure Data Source dialog appears. In the Data file box, type ~/App_Data/Bookstore.xml.
5. In the XPath Expression box, type the following expression: /bookstore/book/comments/userComment. An XPath expression for the data source will cause the userComment to be displayed in the second GridView control.
6. Click OK. The second GridView control shows ratings and user comments.
7. Select the GridView2 control, and in Properties, set Visible to False.

 

Enable Selection for GridView1

1. Select the GridView1 control.
2. From the GridView Tasks menu, select Enable Selection. This adds new column to the GridView control containing a link with the text Select.
3. In Properties, set DataKeyNames to ISBN. The GridView control will treat the ISBN property as the primary key for the XML data.
4. Click the GridView control. In the Properties window, select Events from the drop-down list at the top of the Properties window. This will display the events for the control.
5. Double-click the box for the SelectedIndexChanged event. This opens the code editor and creates an empty handler for the SelectedIndexChanged event. (This assumes your are working with a Visual Basic code behind page.)
6. Add the following code to the handler.

    Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object,
    ByVal e As System.EventArgs) _
    Handles GridView1.SelectedIndexChanged
        Dim currentIndex As Integer
        currentIndex = GridView1.SelectedIndex
        Dim isbn As String
        isbn = CStr(GridView1.DataKeys(currentIndex).Value)
        XmlDataSource2.XPath =
            String.Format(
            "/bookstore/book[@ISBN='{0}']/comments/userComment",
            isbn)
        GridView2.Visible = True
        GridView1.Focus()
        Page.MaintainScrollPositionOnPostBack = True
    End Sub
            

 

Test the page again and use the new Select column to display comments in the lower GridView.

The purpose of using tools like Visual Studio, ASP.net controls and any pre-written code in general is to speed up and simplify the process of development. This web page involves many thousands of lines of code. ASP form controls streamline this process.

Now that we have basic XML data display, we can also use the ASP's built in control properties to make our data look more pleasing and functional without using CSS.

 

Using a GridView control's Properties for formatting

1. Click GridControl1 and from the GridControl Tasks menu and click Auto Format.
2. Choose a format you like, click Apply and OK.
3. Click Edit Columns
4. In the Selected Fields box, select title and change the Header Text property to Title.
5. Also in the Selected Fields box, select price and change the following Properties. The Header Text property change to Price. Change HTMLEncode to False. For the DataFormatString add, ${0:C}. This formats the column for currency. Read all about DataFormatString values here.
6. When you are finished editing each column's properties, click OK.
7. Follow the steps above and make your changes to GridView2.
8. Test your page!

You should now see formatted data similar to my finished product below. If you examine the source code for the web page, you will see that ASP renders the GridViews as HTML tables in a browser.

NOTE: When adding a control to a form, ASP automatically gives it a name consisting of the control name and an incremented number. When developing larger projects it is a good idea to name your controls descriptively which makes them easier to find and also helps when remembering their function.

To do the complete walk-through, go to MSDN.

 

Summary:

Visual Studio, ASP and the many coding languages used with them are making developing applications of all kinds much easier. This is especially true in areas that require reading, displaying, and modifying data from various sources. XML is just one such data source.

XML, which stands for Extensible Markup Language, is widely used across many platforms. According to WikipediA, "Hundreds of document formats using XML syntax have been developed, including RSS, Atom, SOAP, SVG, and XHTML. XML-based formats have become the default for many office-productivity tools, including Microsoft Office (Office Open XML), OpenOffice.org and LibreOffice (OpenDocument), and Apple's iWork. XML has also provided the base language for communication protocols such as XMPP. Applications for the Microsoft .NET Framework use XML files for configuration. Apple has an implementation of a registry based on XML."

Please leave me a comment and look for other articles about XML and other relevant technologies on my website.