Displaying XML Data in an ASP.NET Datagrid...

Read an XML file and display the contents in a Datagrid just as you would if the data came from a database table.

Date: August 21, 2004

In an earlier article we demonstrated how to use the DataSet's WriteXml method to write the contents of a DataSet / DataGrid out to an XML file. This short article will demonstrate the opposite - how to read an XML file and display the contents in an ASP.NET Datagrid.

We will start by showing the .aspx page. It is a simple page implementing a datagrid control and setting a couple of properties. The code is shown below.

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="XmlToDatagrid.aspx.vb" Inherits="XmlToDatagrid.XmlToDatagrid"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>XmlToDatagrid</title>
    <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  </HEAD>
  <body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post" runat="server">
      <asp:DataGrid id="dtgCust" style="Z-INDEX: 101; LEFT: 72px; POSITION: absolute; TOP: 48px"
        runat="server" CellPadding="4">
        <AlternatingItemStyle BackColor="LightGoldenrodYellow"></AlternatingItemStyle>
        <HeaderStyle BackColor="LightGoldenrodYellow"></HeaderStyle>
      </asp:DataGrid>
    </form>
  </body>
</HTML>

The code behind file is shown below. We will take it in sections for easier explanation. As can be seen here this is the normal top of page code plus, in the Page_Load event we are setting some variables to set up the sorting capabilites of the datagrid. We are also setting properties of the datagrid to set up paging and sorting. This time we are doing it here rather than in the .aspx page. At the bottom of the code we are calling a routine to bind data to our datagrid.

Imports System
Imports System.Xml

Public Class XmlToDatagrid
  Inherits System.Web.UI.Page

  Protected WithEvents dtgCust As System.Web.UI.WebControls.DataGrid
  Dim strOrderBy As String
  Dim dv As New DataView

' " Web Form Designer Generated Code Omitted "

  Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

    If Not IsPostBack Then
      strOrderBy = "CustomerID ASC"
      ViewState("strOrderBy") = strOrderBy
      ViewState("Column") = "CustomerID"
      ViewState("Order") = "ASC"

    With dtgCust
      .AllowSorting = True
      .AllowPaging = True
      .PageSize = 10
      .PagerStyle.HorizontalAlign = HorizontalAlign.Right
      .PagerStyle.Position = PagerPosition.Bottom
      .PagerStyle.Mode = PagerMode.NumericPages
      .PagerStyle.PageButtonCount = 5
    End With

    End If
    dtgCustBind()

  End Sub

In the code section below we show the routine to read the XML, using the Dataset's ReadXml method. Since we are enabling sorting in the Datagrid we create a DataTable and from that a DataView to set the initial sorting method. We then bind the DataView to the Datagrid.

  Public Sub dtgCustBind()

    Dim ds As DataSet
    ds = New DataSet

    Try
      ds.ReadXml(MapPath("customers.xml"))
    Catch ex As Exception
      Response.Write(ex.Message.ToString())
    Finally
      ds.Dispose()
    End Try

    Dim dtbl As DataTable = ds.Tables(0)
    dv = New DataView(dtbl)
    dv.Sort = ViewState("strOrderBy")
    dtgCust.DataSource = dv
    dtgCust.DataBind()

  End Sub

This final section just shows the paging and sorting events to handle those aspects of the presentation datagrid.

  Private Sub dtgCust_SortCommand1(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridSortCommandEventArgs) Handles dtgCust.SortCommand

    If ViewState("Order") = "ASC" Then
      strOrderBy = e.SortExpression & " DESC"
      ViewState("Order") = "DESC"
    Else
      strOrderBy = e.SortExpression & " ASC"
      ViewState("Order") = "ASC"
    End If

    ViewState("strOrderBy") = strOrderBy
    ViewState("Column") = e.SortExpression()
    dtgCustBind()

  End Sub

  Private Sub dgResults_PageIndexChanged1(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs) Handles dtgCust.PageIndexChanged

    dtgCust.CurrentPageIndex = e.NewPageIndex
    dv.Sort = ViewState("Column") & " " & ViewState("Order")
    dtgCust.DataSource = dv
    dtgCust.DataBind()

  End Sub

End Class

This article demonstrates how you can display an XML file contents in an ASP.NET datagrid. It also demonstrates some techniques for setting datagrid properties in codebehind, as well as setting paging and sorting.

The code above is shown in VB. The download, however, also includes a c# version.

You may download the code here.