Show File icons with filename in Asp.Net.

Aman Sharma
In 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.

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)
    public void FillGrid()
            SqlDataAdapter adp = new SqlDataAdapter("Select * from File_Attachment", con);
            dt = new DataTable();
            grdIcon.DataSource = dt;
        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 ()
            Dim adp As New SqlDataAdapter("Select * from File_Attachment ", con)
            dt = New DataTable
           grdIcon.DataSource = dt
        Catch ex As Exception
        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

Post a Comment

Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !