Binding Images to GridView from a Folder where image info defined in Text file

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

Today, in this post I am going to post binding images from folders where the image file names are mentioned in the text file. The text file contains list of file names with the path which is stored. It also contains image urls which is accessible from internet/internet.

There are two different scenarios I am taking to implement considering the image path stores in a text file. They are –

There is a text file stored in application which contains list of file name with path. The application required to fetch the file name from the text file and bind the imaged to the GridView.
Same as above post, but addition to this the text file also contains some information about each image (Ex: Title of the Image, Description). So when showing images, the system also needs to show the information about the images.

The implementation of the first scenario is follows:

The Text file contains list of image file name with path, full Image url which can be accessible by http/https.

D:\Blog\FolderImage\FolderImageTextFile\FolderImageTextFile\Images\229106_ed3b12ba0e_m.jpg
http://farm5.static.flickr.com/4073/4790347242_1108fc076d_m.jpg
http://farm5.static.flickr.com/4106/5020712476_5cf2997f38_m.jpg
D:\Blog\FolderImage\FolderImageTextFile\FolderImageTextFile\Images\3622179267_69fea7ef95_m.bmp
D:\Blog\FolderImage\FolderImageTextFile\FolderImageTextFile\Images\4131887507_7c11155e59_m.png
D:\Blog\FolderImage\FolderImageTextFile\FolderImageTextFile\Images\4435962715_99f6ac0332_m.gif
D:\Blog\FolderImage\FolderImageTextFile\FolderImageTextFile\Images\4436467516_9ca99b4d24_m.png
D:\Blog\FolderImage\FolderImageTextFile\FolderImageTextFile\Images\4785868505_636c34bcd2_m.tif
D:\Blog\FolderImage\FolderImageTextFile\FolderImageTextFile\Images\4785869969_e66764603a_m.jpg
D:\Blog\FolderImage\FolderImageTextFile\FolderImageTextFile\Images\4785873427_8d791da8d2_m.bmp
D:\Blog\FolderImage\FolderImageTextFile\FolderImageTextFile\Images\4785875511_6f4b8c3af3_m.tif
D:\Blog\FolderImage\FolderImageTextFile\FolderImageTextFile\Images\4790347242_1108fc076d_b.jpg
D:\Blog\FolderImage\FolderImageTextFile\FolderImageTextFile\Images\4790347242_1108fc076d_m.jpg
D:\Blog\FolderImage\FolderImageTextFile\FolderImageTextFile\Images\5020712476_5cf2997f38_m.gif

GridView Script

<asp:GridView ID="grdImages" runat="server" BorderStyle="None"
    ShowHeader="false" AutoGenerateColumns="False" Width="61">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("FileName") %>' Width="240" Height="160" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

C# Code behind

protected void Page_Load(object sender, EventArgs e)
{
    string[] fileContent = System.IO.File.ReadAllLines(HttpContext.Current.Request.PhysicalApplicationPath + @"Data/Temple.txt");

    IList<ImageFileInfo> ImageFileList = new List<ImageFileInfo>();
    foreach (string strFileInfo in fileContent.ToList<string>())
    {
        if (strFileInfo.StartsWith("http"))
            ImageFileList.Add(new ImageFileInfo { FileName = strFileInfo });
        else
            ImageFileList.Add(new ImageFileInfo { FileName = ResolveUrl(strFileInfo.Replace(Server.MapPath("/"), "~/")) });
    }

    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; }
}

The implementation of the second scenario is follows:

The text file contains not only the image file name with path (or url), it also contains Title of the image and some description of each image. Our requirement is to show list of image in the ASP.NET page with the information provided in the text file for each image.

Text File

D:\Blog\FolderImage\ImageWithInfo\ImageWithInfo\Images\220px-Brihadeshwara_front_right.jpg||Brihadeshwara temple, Tamil Nadu, India||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.
D:\Blog\FolderImage\ImageWithInfo\ImageWithInfo\Images\220px-Mamallapuram1a.jpg||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.)
D:\Blog\FolderImage\ImageWithInfo\ImageWithInfo\Images\280px-Temple_Tangore_1.jpg||Chidambaram Temple, Tamil Nadu, India||Chidambaram Temple (Tamil: சிதம்பரம் கோயில் - Tillai Chidambaram Natarajar Kovil) is a Hindu temple dedicated to Lord Shiva located in the heart of the temple town of Chidambaram, 78 km south of Pondicherry and 60 km north of Karaikal in Cuddalore District, the east-central part of the Tamil Nadu state of southeastern India. The Sangam classics list chief architect Viduvelvidugu Perumtaccan, respected clan of traditional Vishwakarmas, as directing the temple's renovation. There have been several renovations in its history, particularly by Pallava and Chola emperors in the ancient and pre-medieval periods.
D:\Blog\FolderImage\ImageWithInfo\ImageWithInfo\Images\280px-Kailasanathar_temple.jpg||Kailasanath Temple, Tamil Nadu, India.||The Kailasanath temple is located in the temple town of Kanchipuram in Tamil Nadu, India. It was built by the Pallavas in the early 8th century CE. It is famous for its splendid vimana. It also contains numerous panels showing lord Siva as Nataraja in various postures.This temple was built by Pallava King Narasimhavarman II (Rajasimhan).
D:\Blog\FolderImage\ImageWithInfo\ImageWithInfo\Images\280px-Kanchi_Kamakshi_temple22.jpg||Kamakshi Amman Temple, Tamil Nadu, India.||The Kamakshi Temple is a famous Hindu temple dedicated to Kamakshi, one of the forms of the goddess Parvati. It is located in the historic city of Kanchipuram, near Chennai, India and is popularly associated with Sankaracharya, one of the greatest Hindu gurus. The Meenakshi Temple in Madurai, the Akilandeswari temple in Thiruvanaikaval near Tiruchirappalli and this Kamakshi are the important centers of worship of Parvati as the mother goddess, in the state of Tamil Nadu. The temple was most probably built by the Pallava kings, whose capital was Kanchipuram, around 6 C.E
D:\Blog\FolderImage\ImageWithInfo\ImageWithInfo\Images\280px-Kapaleeswarar1.jpg||Kapaleeshwarar Temple, Tamil Nadu, India.||Kapaleeshwarar Temple (Tamil கபாலீஸ்வரர் கோவில்) is temple of Shiva (Tamil சிவா), located in Mylapore, which is in the Indian state of Tamil Nadu. The form of Shiva's wife Parvati worshipped at this temple is called Karpagambal (from Tamil, "goddess of the wish-yielding tree"). The Pallava Nayanmars built this temple around the 7th century CE. According to the Puranas, Shakti worshipped Shiva, in the form of a peacock, which is why the vernacular name Mylai was given to the area that developed around the temple, as Mayil means Peacock in Tamil.
D:\Blog\FolderImage\ImageWithInfo\ImageWithInfo\Images\280px-Temple_de_Mînâkshî01.jpg||Meenakshi Amman Temple, Tamil Nadu, India.||Meenakshi Sundareswarar Temple or Meenakshi Amman Temple (Tamil: மீனாட்சி அம்மன் கோவில்) is a historic Hindu temple located in the holy city of Madurai in India. It is dedicated to Lord Shiva - who is known here as Sundareswarar or Beautiful Lord- and his consort, Parvati who is known as Meenakshi. The temple forms the heart and lifeline of the 2500 year old city of Madurai. The complex houses 14 magnificent Gopurams or towers including two golden Gopurams for the main deities, that are elaborately sculptured and painted. The temple is a significant symbol for the Tamil people, and has been mentioned since antiquity in Tamil literature, though the present structure is believed to have been built in 1600. The tallest temple tower is 51.9 metres (170 ft) high.
http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Rock_Fort_Temple_Trichy_1942.jpg/280px-Rock_Fort_Temple_Trichy_1942.jpg||Rockfort Ucchi Pillayar Temple, Tamil Nadu, India.||Rockfort or Ucchi Pillayar koil, is a combination of two famous 7th century Hindu temples, one dedicated to Lord Ganesh and the other dedicated to Lord Shiva, located a top of a huge rock in Trichy, India. Geologically the 83m high[1] rock is said to be one of the oldest in the world, dating over 3 billion years ago, and mythologically this rock is the place where Lord Ganesh ran from King Vibishana, after establishing the Ranganathaswamy deity in Srirangam.
http://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Pillayarpatti_temple.jpg/250px-Pillayarpatti_temple.jpg||Karpaka Vinayakar Temple, Tamil Nadu, India.||Pillaiyar patti Pillaiyar temple is an ancient rock-cut cave shrine dedicated to Ganesha, located at Thiruppatthur, (1 kilometer from Thiruppatthur bus stand or Thiruppatthur Thiruthalli nathar Temple (One of the Thevera Temple), Sivagangai district in the state of Tamil Nadu, India.

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;">
                            <b style="color:Green;"><asp:Label ID="Label1" runat="server" Text='<%# Eval("ImageTitle") %>'></asp:Label></b>
                            <div style="font-size:12px;font-weight:normal;"><asp:Label ID="Label2" runat="server" Text='<%# Eval("ImageDescription") %>'></asp:Label></div>
                        </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[] fileContent = System.IO.File.ReadAllLines(HttpContext.Current.Request.PhysicalApplicationPath + "Data/Temple.txt");

    IList<ImageFileInfo> ImageFileList = new List<ImageFileInfo>();
    foreach (string strFileInfo in fileContent.ToList<string>())
    {
        string[] fileInfo = strFileInfo.Split("||".ToCharArray());

        string fileName = string.Empty;
        if (fileInfo[0].ToString().StartsWith("http"))
            fileName = fileInfo[0].ToString();
        else
            fileName = ResolveUrl(fileInfo[0].ToString().Replace(Server.MapPath("/"), "~/"));

        ImageFileInfo imageFileInfo = new ImageFileInfo();
        imageFileInfo.FileName = fileName;
        imageFileInfo.ImageTitle = fileInfo[2];
        imageFileInfo.ImageDescription = fileInfo[4];

        ImageFileList.Add(imageFileInfo);
    }

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

I am using collection of entity object for holding File Name, Title and Description and bind to the grid.

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

Here one important point is the path of the image should the application path or any folder path inside the application path.

Below is the output of the screen,