[ Download Code ]
Previously you were instructed how to store images and relevant data in your database. Now you will need a method to allow your users to view records and then the ability to view these images.
The web form above has two controls, a DataGrid and a Label. The Label is used for display any errors that may arise. The following is the code for this web form.
<%@ Page language="c#" Codebehind="Article570_1.aspx.cs"
AutoEventWireup="false" Inherits="ASPAllianceArticles.Article570_1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Article570_1</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<P>
<asp:DataGrid id="ImageDataGrid" runat="server"
BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px"
BackColor="White" CellPadding="4" AutoGenerateColumns="False">
<FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
<SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66">
</SelectedItemStyle>
<ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
<HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000">
</HeaderStyle>
<Columns>
<asp:HyperLinkColumn Text="id" Target="_blank"
DataNavigateUrlField="ID"
DataNavigateUrlFormatString="Article570_2.aspx?imageId={0}"
DataTextField="id" HeaderText="View Image" NavigateUrl="link.aspx"
DataTextFormatString="View Image">
<HeaderStyle HorizontalAlign="Center" Width="20%"></HeaderStyle>
</asp:HyperLinkColumn>
<asp:BoundColumn DataField="author" HeaderText="Author">
<HeaderStyle HorizontalAlign="Center" Width="40%"></HeaderStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="description" HeaderText="Description">
<HeaderStyle HorizontalAlign="Center" Width="40%"></HeaderStyle>
</asp:BoundColumn>
</Columns>
<PagerStyle HorizontalAlign="Center" ForeColor="#330099" BackColor="#FFFFCC">
</PagerStyle>
</asp:DataGrid></P>
<P>
<asp:Label id="NotificationLabel" runat="server" Visible="False"></asp:Label></P>
</form>
</body>
</HTML>
The next step will be to bind the data to the DataGrid. Once again take notice of the utility class that I previously spoke of.
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Oracle.DataAccess.Client;
using Oracle.DataAccess.Types;
// Application Import(s)
using ASPAlliance.Utilities;
namespace ASPAllianceArticles
{
/// <summary>
/// Summary description for Article570_1.
/// </summary>
public class Article570_1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid ImageDataGrid;
protected System.Web.UI.WebControls.Label NotificationLabel;
private void Page_Load(object sender, System.EventArgs e)
{
OracleConnection dbConn = null;
string sqlStmt = null;
ASPAlliance.Utilities.OracleDatabaseHelper dbHelper =
new ASPAlliance.Utilities.OracleDatabaseHelper();
try
{
// Establish the database connection
dbConn = dbHelper.openDatabaseConnection();
// define the sql to perform the database insert
sqlStmt = "select t.id, t.author, t.description" +
" from smstestblob t order by t.id";
// Establish a new OracleCommand
OracleCommand cmd = new OracleCommand();
// Set command to create your SQL statement
cmd.CommandText = sqlStmt;
// Set the OracleCommand to your database connection
cmd.Connection = dbConn;
// Set the command type to text
cmd.CommandType = CommandType.Text;
// Execute the SQL Statement
OracleDataReader oraReader = cmd.ExecuteReader();
ImageDataGrid.DataSource = oraReader;
ImageDataGrid.DataBind();
}
catch(OracleException ex)
{
NotificationLabel.Text = ex.Message;
NotificationLabel.Visible = true;
}
finally
{
// Close the database connection
dbHelper.closeDatabaseConnection(dbConn);
}
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
The end result when this application is executed in your browser will look similar to the following screenshot.
Now for the final step which will display the selected image.
