Reader Level:

GridView Control in ASP.NET: Part 7

By Abhimanyu K Vatsa on Nov 10, 2012
In this article we will discuss how to use ImageField in GridView Control.

Please you do read earlier parts of this article for complete understanding in GridView.

Part - 6

Using Fields with GridView Control

As to solve some of problems like enabling the GridView to render its columns automatically is that we give up any control over column formatting. For example, the BoxOfficeTotals column is displayed as a decimal amount without any currency formatting. The EnTRyDate column always displays in short-date and long-time format. The solution to such problems is to specify explicitly the fields that a GridView displays. The GridView control supports the following types of fields:

  • BoundField Enables us to display the value of a data item as text.
  • CheckBoxField Enables us to display the value of a data item as a check box.
  • CommandField Enables us to display links for editing, deleting, and selecting rows.
  • ButtonField Enables us to display the value of a data item as a button (image button, link button, or push button).
  • HyperLinkField Enables us to display the value of a data item as a link.
  • ImageField Enables us to display the value of a data item as an image.
  • TemplateField Enables us to customize the appearance of a data item.

Using ImageField

Introduction & Demonstration

We use an ImageField to display an image stored on the server's hard drive. We can't use an ImageField to display images stored in a database table.


In above picture, we have a GridView control in which two pictures are displaying. We have also used a horizontal row to separate upload section and display section. For upload we have used lots of controls. Here is the code which I have used. 

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""">

<script runat="server">
    Protected Sub Inserting(ByVal sender As ObjectByVal e As FormViewInsertEventArgs)
        ' Get the FileUpload control
        Dim Images As FileUpload = CType(frmPhoto.FindControl("Images"), FileUpload)
        SqlDataSource1.InsertParameters("FileName").DefaultValue = Images.FileName
        ' Save contents to file system
        Dim savePath As String = MapPath("~/Images/" + Images.FileName)

<html xmlns="">
<head runat="server">
    <form id="form1" runat="server">

           <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            EmptyDataText="There are no data records to display." Width="96px" 
            ShowHeader="false" Height="41px">
            ControlStyle-Width="100px" />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>" 
            ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>" 
                <asp:Parameter Name="FILENAME" />

        <h3>Add Photo</h3>
            Runat="server" />
        <br />
            Runat="server" />
        <br />
            Text="Alternate Text:"
            Runat="server" />
        <br />
            Text='<%# Bind("AltText") %>'
            Runat="server" />
        <br />
            Text="Add New Photo"
            Runat="server" />


Note: Continue in Next Part.


Abhimanyu K Vatsa
Abhimanyu K Vatsa

Senior Software Developer | Microsoft MVP | Author | Speaker | Blogger at ITORIAN.COM

Personal Blog: