How to display image icons according to file extensions in - ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

How to display image icons according to file extensions in

In this article I am going to explain how to display image icons according to file extensions in

How to display image icons according to file extensions in

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:TemplateField HeaderText="File Name">
                    <img id="fileImage" runat="server"/>
                        <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("Filepath") %>' />
                         <%# Eval("FileName") %>

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; 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)
    } 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)
            HiddenField hf = (HiddenField)e.Row.FindControl("HiddenField1");          
                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";
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 hf As HiddenField = DirectCast(e.Row.FindControl("HiddenField1"), HiddenField)
            Dim image As HtmlImage = DirectCast(e.Row.FindControl("fileImage"), HtmlImage)
            image.Attributes.Add("src", GetIconForFile(hf.Value))
        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.