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

Post a Comment



Contact Form


Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget