Binding Images to GridView from a Folder where Image info defined in XML

Tweet

This post is a continuation of a series. Please look at the end of this post for more information

In this post, I am going to blog How to bind images from folder where Image Name, Path and the details mentioned in XML file. Here the XML file contains the file name which is inside of the application path or url which can be accessible using http/https.

The XML file looks like the following:

<?xml version="1.0" encoding="utf-8" ?>
<ImageFiles>
  <ImageFile>
    <FileName>D:\Blog\FolderImage\ImageShowFrmXML\ImageShowFrmXML\Images\220px-Brihadeshwara_front_right.jpg</FileName>
    <ImageDescription>
      <b style="color:Green;">Brihadeshwara temple, Tamil Nadu, India</b>
      <div style="font-size:12px;font-weight:normal;">Rajarajeswaram, also known as Brihadeshwara temple built by Chola emperor Rajaraja-I Thanjavore. Fully constructed in granite, the temple tower measures 216'. At time of its construction, it was the tallest Hindu temple in the world.</div>
    </ImageDescription>
  </ImageFile>
  <ImageFile>
    <FileName>D:\Blog\FolderImage\ImageShowFrmXML\ImageShowFrmXML\Images\220px-Mamallapuram1a.jpg</FileName>
    <ImageDescription>
      <b style="color:Green;">Shore Temples, Tamil Nadu, India</b>
      <div style="font-size:12px;font-weight:normal;">Shore Temples, Tamil Nadu, India||Raajasimmeswaram, Kshatriya Simmeswaram - popularly known as shore temples in Mamallapuram built by Rajasimha Pallava - I. (c. eighth century C.E.)</div>
    </ImageDescription>
  </ImageFile>
</ImageFiles>

The XML file contains list of ImageFile nodes, each one defined for each image. The ImageFile node contains two child nodes, FileName and ImageDescription.

The FileName is used for defining the file name with the path or http/https url. Here the path must be inside of application folder or any virtual directory folder.

The ImageDescription node contains html script which provides the details of the image. You can add/modify any html script inside of the node.

GridView Script

<asp:GridView ID="grdImages" runat="server" BorderStyle="None"
    ShowHeader="False" AutoGenerateColumns="False" Width="540px"
    BackColor="White" BorderColor="#E7E7FF" BorderWidth="1px" CellPadding="3"
    GridLines="Horizontal">
    <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="width:300px; vertical-align:top;">
                            <asp:Label ID="lblDescription" runat="server" Text='<%# Eval("ImageDescription") %>'></asp:Label>
                        </td>
                        <td style="width:240px">
                            <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("FileName") %>' Width="240" Height="160" />
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
    <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
    <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
    <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
    <AlternatingRowStyle BackColor="#F7F7F7" />
</asp:GridView>

C# Code Behind

protected void Page_Load(object sender, EventArgs e)
{
    string fileName = HttpContext.Current.Request.PhysicalApplicationPath + @"Data/ImageFiles.xml";
    XPathDocument doc = new XPathDocument(fileName);
    XPathNavigator nav = doc.CreateNavigator();

    XPathExpression expr = nav.Compile("/ImageFiles/ImageFile");
    XPathNodeIterator iterator = nav.Select(expr);

    IList<ImageFileInfo> ImageFileList = new List<ImageFileInfo>();

    while (iterator.MoveNext())
    {
        XPathNavigator nav2 = iterator.Current.Clone();
        ImageFileInfo imageFileInfo = new ImageFileInfo();
        foreach (XPathNavigator child in nav2.SelectChildren(XPathNodeType.All))
        {
            if (child.Name == "FileName")
            {
                if (child.Value.StartsWith("http"))
                    imageFileInfo.FileName = child.Value;
                else
                    imageFileInfo.FileName = ResolveUrl(child.Value.Replace(Server.MapPath("/"), "~/"));
            }
            if (child.Name == "ImageDescription") imageFileInfo.ImageDescription = child.InnerXml;
        }
        ImageFileList.Add(imageFileInfo);
    }

    grdImages.DataSource = ImageFileList;
    grdImages.DataBind();
}

The Entity Class for holding file name with path of the image

public class ImageFileInfo
{
    public string FileName { get; set; }
    public string ImageDescription { get; set; }
}

This code has been tested with IE 6.0/9.0, Firefox 3.6, Opera 11.01

Below is the output of the screen,

Output of the Screen where images bind in GridView

download the working example of the source code in C# here and in VB here

The other links on Binding Images to GridView from folder:

1. Binding all (or specific) images to GridView
2. Binding images to GridView where image file name and other info stored in Text file
3. Binding images to GridView where the file name and other info stored in XML file
4. Binding images to GridView where the image should show in Horizontal layout