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


Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

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