Thursday, 3 February 2011

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



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

4 Responses to “Binding Images to GridView from a Folder where Image info defined in XML”

  • Prem says:
    25 October 2011 at 20:30

    Thanks for this nice article.
    I tried but Images are loaded.
    Could suggest why?

  • Anonymous says:
    26 March 2012 at 06:41

    This is great. The next step would be how to update the description data in the XML file. Any pointers on how to do that?

  • Thiru says:
    26 March 2012 at 08:30

    Hi, There are various method available for modifying XML scripts. But before, you required an ID for ImageFile node to identify which image description you required to modify.

    <ImageFiles>
    <ImageFile Id=1>
    ....
    </ImageFile>
    </ImageFiles>

    You can find a particular node by XPath query, and then update the innerXML and save them.

    You can refer the below url http://www.codeproject.com/Articles/9494/Manipulate-XML-data-with-XPath-and-XmlDocument-C

    If you need more help contact me :)

  • Thiru says:
    26 March 2012 at 08:31

    Hi Prem,

    Hope you are trying to ask images are not loaded..
    I believe you are not specifying the image path correctly. Pls check with that.

Post a Comment