In
asp.net we can show file Icons according to file extension. It looks attractive
if we show Icons with file name in gridview or othe places. In this article I will
explain how to show icon with file name according to its extension.
This
concept is based on extension of the file. We will check the extension of the
file and show the icon accordingly.
In
previous article I have explained Open
or View all type of files (Like Images, Docx, Pdf etc) in ASP.NET(C#)
Steps to
follow to Show Icon:
1.
Download
icons file and put the folder in root of the application. Eg. Fileicons folder.
2.
Now
place a Gridview control and customize it as given in example.
3.
Then
write code on RowdataBound event of Gridview to show file.
Create s small Application to Demonstrate the
concept:
Create a table and insert some data:
Add a simple Web Form and Place a Gridview
inside that page. Now customize it like given below:
Now write the
following code in Code behind (Code Using C#):
Add Following Namespace:
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.IO;
using System.Web.UI.HtmlControls;
Now Bind Gridview on Page Load:
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ToString());
DataTable dt;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
FillGrid();
}
}
public void FillGrid()
{
try
{
SqlDataAdapter adp = new SqlDataAdapter("Select * from File_Attachment", con);
dt = new DataTable();
adp.Fill(dt);
grdIcon.DataSource =
dt;
grdIcon.DataBind();
}
catch (Exception ex)
{
}
}
Now write following code on Row Data Bound to Show Icon:
protected void grdIcon_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Label FileName = (Label)e.Row.FindControl("lblFileName");
if (!String.IsNullOrEmpty(FileName.Text))
{
HtmlImage image = (HtmlImage)e.Row.FindControl("fileImage");
image.Attributes.Add("src", GetIconForFile(FileName.Text));
}
}
}
private string GetIconForFile(string fileText)
{
string extension = Path.GetExtension(fileText);
extension =
extension.Trim('.').ToLower();
return "~/fileicons/" + extension + ".png";
}
Code
Using Vb.Net
Add Following Namespace:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.IO
Imports System.Web.UI.HtmlControls
Now Bind Gridview on Page Load:
Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("con").ToString())
Dim dt As New DataTable
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
FillGrid ()
End If
End Sub
Public Sub FillGrid ()
Try
Dim adp As New SqlDataAdapter("Select * from File_Attachment ", con)
dt = New DataTable
adp.Fill(dt)
grdIcon.DataSource = dt
grdIcon.DataBind()
Catch ex As Exception
Finally
dt.Dispose()
End Try
End Sub
Now write following code on Row Data Bound to Show Icon:
Protected Sub grdIcon _RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles grdIcon .RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
Dim FileName As Label = DirectCast(e.Row.FindControl("lblFileName"), Label)
If Not [String].IsNullOrEmpty(FileName.Text) Then
Dim image As HtmlImage = DirectCast(e.Row.FindControl("fileImage"), HtmlImage)
image.Attributes.Add("src", GetIconForFile(FileName.Text))
End If
End If
End Sub
Private Function GetIconForFile(fileText As String) As String
Dim extension As String = Path.GetExtension(fileText)
extension =
extension.Trim("."c).ToLower()
Return (Convert.ToString("~/fileicons/") & extension) + ".png"
End Function
