Displays file icons in asp.net - ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

Displays file icons in asp.net

In this article I am going to explain how to display file icons according to file extensions in asp.net

I have created a table Tb_File and insert some dummy record. I am displaying the record in gridview data control. I want to display filename with file icons according to file type. Let us create a demonstration to implement this concept.


I have download all the file icons and put all in folder Fileicons.

HTML Markup:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
        <asp:BoundField DataField="FileName" HeaderText="File Name" />
        <asp:TemplateField HeaderText="">
                    <img id="fileImage" runat="server"/>
                        <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("Filepath") %>' />
                        <asp:LinkButton ID="lnkFile" runat="server" Text='<%# Eval("FileName") %>' ></asp:LinkButton>

Import the namespace
Add the below given namespace to code file.

C# code
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.IO;
using System.Web.UI.HtmlControls;

VB.net Code:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.IO
Imports System.Web.UI.HtmlControls

Bind gridview
Create a method to bind gridview and call it on page load event of webform.

C# Code :
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
    DataTable dt;
    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
    public void Bindgrid()

            SqlDataAdapter adp = new SqlDataAdapter("Select * from Tb_File", con);
            dt = new DataTable();
            GridView1.DataSource = dt;
        catch (Exception ex)

VB.net Code:
Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
    Dim dt As New DataTable
    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
        End If
    End Sub
    Public Sub Bindgrid()
            Dim adp As New SqlDataAdapter("Select * from Tb_File", con)
            dt = New DataTable
            GridView1.DataSource = dt
        Catch ex As Exception
        End Try
    End Sub

Get File extension
Write the below code on RowdataBound event of Gridview.

C# code:
  protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        if (e.Row.RowType == DataControlRowType.DataRow)
            LinkButton linkbtn = (LinkButton)e.Row.FindControl("lnkFile");
            HiddenField hf = (HiddenField)e.Row.FindControl("HiddenField1");
            if (!String.IsNullOrEmpty(linkbtn.Text))
                HtmlImage image = (HtmlImage)e.Row.FindControl("fileImage");
                image.Attributes.Add("src", GetIconForFile(hf.Value));

    private string GetIconForFile(string fileText)
        string extension = Path.GetExtension(fileText);
        extension = extension.Trim('.').ToLower();
        return "~/fileicons/" + extension + ".png";
VB.net Code:
  Protected Sub GridView1_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        If e.Row.RowType = DataControlRowType.DataRow Then
            Dim linkbtn As LinkButton = DirectCast(e.Row.FindControl("lnkFile"), LinkButton)
            Dim hf As HiddenField = DirectCast(e.Row.FindControl("HiddenField1"), HiddenField)
            If Not [String].IsNullOrEmpty(linkbtn.Text) Then
                Dim image As HtmlImage = DirectCast(e.Row.FindControl("fileImage"), HtmlImage)
                image.Attributes.Add("src", GetIconForFile(hf.Value))
            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

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.