This
article will show you how you how you can detect the images present in folder
and bind the detected images to gridview in asp.net using c#.net.
Some of my
previous articles are as follows: Retrieve
Boundfield Column Values On Button Click Of Gridview In Asp.Net, Asp.net
Gridview Row Font Colour Change Based on Condition or Data Using C#.Net, Asp.net
Gridview Row Italic Based on Condition or Data Using C#.Net, Asp.net
Gridview Row Bold Based on Condition or Data Using C#.Net, Asp.net
Gridview Row Color Change Based on Condition or Data Using C#.Net, Bind
HyperLink Control To GridView In Asp.net Using C#.
So for this article first we will create a new asp.net article and add an image folder.
Now we will
add a gridview control and add BoundField, TemplateField. In TemplateField we
will add the image control and bind it with the Eval.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm12.aspx.cs" Inherits="WebApplication7.WebForm12" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show Images in
Gridview From Folder in Asp.net Uisng C#</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1"
runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="FileName" HeaderText="Image
Name" />
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<img src='<%#Eval("FilePath") %>' width="100px" height="100px"></img>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
|
Now check
the below code.
public DataTable GetFileDetail()
{
DataTable dt = new DataTable();
dt.Columns.Add("FileName");
dt.Columns.Add("FilePath");
string folderPath = @"\Images\";
//Read all files from folder
string[] filePaths = Directory.GetFiles(Server.MapPath(folderPath));
foreach (string item in filePaths)
{
string filename = Path.GetFileName((item));
//Add file detail to datatable
DataRow dataRow =
dt.NewRow();
dataRow["FileName"] = filename;
dataRow["FilePath"] = folderPath + filename;
dt.Rows.Add(dataRow);
}
return dt;
}
|
In above code I have prepared the datatable and added the field “FileName”
and “FilePath”. After that I have detected all the files present in a directory.
After that I have added the data to the datatable.
Now check the code to bind the gridview control.
DataTable dt = new DataTable();
dt =
GetFileDetail();
GridView1.DataSource = dt;
GridView1.DataBind();
|
Now here is the complete code of the page.
using System;
using
System.Collections.Generic;
using System.Data;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
namespace WebApplication7
{
public partial class WebForm12 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt =
GetFileDetail();
GridView1.DataSource = dt;
GridView1.DataBind();
}
public DataTable GetFileDetail()
{
DataTable dt = new DataTable();
dt.Columns.Add("FileName");
dt.Columns.Add("FilePath");
string folderPath = @"\Images\";
//Read all files from folder
string[] filePaths = Directory.GetFiles(Server.MapPath(folderPath));
foreach (string item in filePaths)
{
string filename = Path.GetFileName((item));
//Add file detail to datatable
DataRow dataRow =
dt.NewRow();
dataRow["FileName"] = filename;
dataRow["FilePath"] = folderPath + filename;
dt.Rows.Add(dataRow);
}
return dt;
}
}
}
|
Now we have done run the application to check the output.
DOWNLOAD
About the Author
0 comments:
Please let me know your view