ARTICLE

Display image along with data from the database in Gridview in ASP.NET

Posted by Satyapriya Nayak Articles | ASP.NET using VB.NET August 13, 2011
In this article we will know how to display image along with data from the database in Gridview.
 
Reader Level:

First create a table student

Create table student (sid varchar(50),sname varchar(50),saddress varchar(50), smarks int,pic nvarchar (50))

Store the picture in the program folder and save there name in pic column of the table with there extension like (.gif,.jpg,.bmp).

Default.aspx code
 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<
html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<
body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            AllowPaging="True" PageSize="1" BackColor="#FF9999"
            onpageindexchanging="GridView1_PageIndexChanging">
            <HeaderStyle BackColor="#FFCC99" />
            <Columns>
                <asp:TemplateField HeaderText="Image" SortExpression="pic">                
                    <ItemTemplate>
                        <asp:Image ID="Image1" Height="60" Width="60" ImageUrl='<%# Bind("pic") %>' runat="server" />                       
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Id" SortExpression="sid">                  
                    <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" Text='<%# Bind("sid") %>'></asp:Label>
                    </ItemTemplate>

                </asp:TemplateField>
               
                <asp:TemplateField HeaderText="Name" SortExpression="sname">
                   
                    <ItemTemplate>
                        <asp:Label ID="Label3" runat="server" Text='<%# Bind("sname") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                               
                <asp:TemplateField HeaderText="Address" SortExpression="saddress">
                  
                    <ItemTemplate>
                        <asp:Label ID="Label3" runat="server" Text='<%# Bind("saddress") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
               
                <asp:TemplateField HeaderText="Marks" SortExpression="smarks">                  
                    <ItemTemplate>
                        <asp:Label ID="Label3" runat="server" Text='<%# Bind("smarks") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>               
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</
html>
 
Default.aspx.vb code
 
Imports
System.Data.SqlClient
Imports System.Data
Partial Class _Default
    Inherits System.Web.UI.Page
    Dim strConnString As String = System.Configuration.ConfigurationManager.ConnectionStrings.Item("ConnectionString").ToString()
    Dim con As New SqlConnection(strConnString)
    Dim com As SqlCommand
    Dim sqlda As SqlDataAdapter
    Dim ds As DataSet
    Dim str As String
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        bindgrid()
    End Sub
 
    Sub bindgrid()
        con.Open()
        str = "SELECT * FROM student"
        com = New SqlCommand(str, con)
        sqlda = New SqlDataAdapter(com)
        ds = New DataSet()
        sqlda.Fill(ds, "student")
        GridView1.DataSource = ds
        GridView1.DataMember = "student"
        GridView1.DataBind()
        con.Close()
    End Sub
 

    Protected Sub GridView1_PageIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) Handles
       
GridView1.PageIndexChanging
        GridView1.PageIndex = e.NewPageIndex
        bindgrid()
    End Sub
End Class

Output

image in grid in asp.net

Thanks for reading

Login to add your contents and source code to this article
share this article :
post comment
 
Nevron Diagram
Become a Sponsor
PREMIUM SPONSORS
  • ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications. Visit DynamicPDF here
    Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
Nevron Diagram
Become a Sponsor