Sunday, May 8, 2016

Displays file icons in

In this article I am going to explain how to display file 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:BoundField DataField="FileName" HeaderText="File Name" />
        <asp:TemplateField HeaderText="">
                    <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>

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)
            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";
  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

No comments:

Post a Comment