Show image in GridView in ASP.NET using C#

Show image in GridView in ASP.NET using C#

Posted in : ASP.Net Posted on : December 14, 2010 at 6:54 PM Comments : [ 0 ]

In this article we will introduce with how can we show image in GridView in ASP.NET using C#

Show images in GridView in ASP.NET using C#

In this example you can see how we can show images in GridView column. Firstly we will make a table in database which is shown in following figure.

The following image shows the data which is stored in table.

ImageInGridView.aspx (Design Page):

ImageInGridView.aspx (source code):

<%@ Page Title="" Language="C#" MasterPageFile="~/RoseindiaMaster.master" 
CodeFile="ImageInGridView.aspx.cs" Inherits="ImageInGridView" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<h2 style="color: Green">
Display images in GridView in ASP.NET 4, C#</h2>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
CellPadding="4" DataKeyNames="image_id" DataSourceID="SqlDataSource1" ForeColor="#333333"
GridLines="None" PageSize="3" Font-Bold="True" Font-Names="Verdana" 
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<asp:BoundField DataField="image_id" HeaderText="ImageID" InsertVisible="False" 
SortExpression="image_id" />
<asp:BoundField DataField="image_name" HeaderText="Image Name" 
SortExpression="image_name" />
<asp:BoundField DataField="image_type" HeaderText="Image Type" 
SortExpression="image_type" />
<asp:TemplateField HeaderText="Image">
<asp:Image ID="Image2" runat="server" ImageUrl='<%# Eval("image_path") %>' 
Width="100" />
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ChartDatabaseConnectionString %>"
DeleteCommand="DELETE FROM [Image] WHERE [image_id] = @image_id" 
InsertCommand="INSERT INTO [Image] ([image_name], [image_type], [image_path]) 
VALUES (@image_name, @image_type, @image_path)"
SelectCommand="SELECT * FROM [Image]" UpdateCommand="UPDATE [Image] SET 
[image_name] = @image_name, [image_type] = @image_type, [image_path] = @image_path 
WHERE [image_id] = @image_id">
<asp:Parameter Name="image_id" Type="Decimal" />
<asp:Parameter Name="image_name" Type="String" />
<asp:Parameter Name="image_type" Type="String" />
<asp:Parameter Name="image_path" Type="String" />
<asp:Parameter Name="image_name" Type="String" />
<asp:Parameter Name="image_type" Type="String" />
<asp:Parameter Name="image_path" Type="String" />
<asp:Parameter Name="image_id" Type="Decimal" />


Download source code
Go to Topic «PreviousHomeNext»

Your Comment:

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image

Tutorial Topics