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

In the previous article I have explained how to do sorting in gridview data controlby column header in ascending and descending order code behind, how to validatethe email address of users in MVC application using Data Annotation and how tofilter record in MVC Webgrid based on textbox.

Description:

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.

Implementation:

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

HTML Markup:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"

            onrowdatabound="GridView1_RowDataBound">

        <Columns>

        <asp:BoundField DataField="FileName" HeaderText="File Name" />

        <asp:TemplateField HeaderText="">

                    <ItemTemplate>

                    <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>

                    </ItemTemplate>

            </asp:TemplateField>

        </Columns>

        </asp:GridView>

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)

        {

            Bindgrid();

        }

    }

    public void Bindgrid()

    {

        try

        {

            SqlDataAdapter adp = new SqlDataAdapter("Select * from Tb_File", con);

            dt = new DataTable();

            adp.Fill(dt);

            GridView1.DataSource = dt;

            GridView1.DataBind();

        }

        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

            Bindgrid()

        End If

    End Sub

    Public Sub Bindgrid()

        Try

            Dim adp As New SqlDataAdapter("Select * from Tb_File", con)

            dt = New DataTable

            adp.Fill(dt)

            GridView1.DataSource = dt

            GridView1.DataBind()

        Catch ex As Exception

        Finally

            dt.Dispose()

        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