How to display image icons according to file extensions in asp.net - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

How to display image icons according to file extensions in asp.net

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

How to display image icons according to file extensions in asp.net

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

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon