Preface
How do we create a DataGrid column to display images obtained from the database?
This is a frequently asked question about the DataGrid Control, and others can easily combine the content you know about the template column and a little bit about the HTTP processing handle (HTTP handler) knowledge to answer.
The following uses the Employees table of the northwind database to display images in the database in a DataGrid.
Code
--- Bindimg. aspx
<% @ Page Language = "C #" codebehind = "bindimg. aspx. cs" autoeventwireup = "false" inherits = "showimg. bindimg" %>
<HTML>
<Head>
<Title> bindimg </title>
</Head>
<Body>
<Form ID = "form1" method = "Post" runat = "server">
<Font face = "">
<Asp: DataGrid id = "mydatagrid" runat = "server" autogeneratecolumns = "false" width = "632px">
<Alternatingitemstyle backcolor = "beige"> </alternatingitemstyle>
<Headerstyle horizontalalign = "center"> <Columns>
<Asp: templatecolumn headertext = "photo">
<Itemtemplate>
'>
</Itemtemplate>
</ASP: templatecolumn>
<Asp: boundcolumn datafield = "lastname" headertext = "last name"> </ASP: boundcolumn>
<Asp: boundcolumn datafield = "firstname" headertext = "first name"> </ASP: boundcolumn>
<Asp: boundcolumn datafield = "title" headertext = "title"> </ASP: boundcolumn>
</Columns>
</ASP: DataGrid> </font>
</Form>
</Body>
</Html>
--- Bindimg. aspx. CS
Using system;
Using system. Data;
Using system. drawing;
Using system. Web;
Using system. Data. sqlclient;
Namespace showimg
{
/// <Summary>
/// Bindimg abstract description.
/// </Summary>
Public class bindimg: system. Web. UI. Page
{
Protected system. Web. UI. webcontrols. DataGrid mydatagrid;
Private void page_load (Object sender, system. eventargs E)
{
// Place user code here to initialize the page
If (! Page. ispostback)
{
Sqlconnection conn = new sqlconnection (@ "Server = shoutor/mydb; database = northwind; uid = sa; Pwd = shoutor ");
Try
{
Conn. open ();
Sqlcommand cmd = new sqlcommand ("select employeeid, lastname, firstname, title from employees", Conn );
Sqldatareader reader = cmd. executereader ();
Mydatagrid. datasource = reader;
Mydatagrid. databind ();
}
Finally
{
Conn. Close ();
}
}
}
# Code generated by region web Form Designer
Override protected void oninit (eventargs E)
{
//
// Codegen: This call is required by the ASP. NET web form designer.
//
Initializecomponent ();
Base. oninit (E );
}
/// <Summary>
/// The designer supports the required methods-do not use the code editor to modify
/// Content of this method.
/// </Summary>
Private void initializecomponent ()
{
This. Load + = new system. eventhandler (this. page_load );
}
# Endregion
}
}
--- Getimg. ashx
<% @ Webhandler Language = "C #" class = "showimg. getimg" %>
--- Getimg. aspx. CS
Using system;
Using system. Web;
Using system. Data;
Using system. Data. sqlclient;
Using system. drawing;
Using system. Drawing. imaging;
Using system. IO;
Namespace showimg
{
/// <Summary>
/// Summary of getimg.
/// </Summary>
Public class getimg: ihttphandler
{
Public void processrequest (httpcontext context)
{
String id = (string) Context. request ["ID"];
If (ID! = NULL)
{
Memorystream stream = new memorystream ();
Sqlconnection conn = new sqlconnection (@ "Server = shoutor/mydb; database = northwind; uid = sa; Pwd = shoutor ");
Bitmap Bm = NULL;
Image image = NULL;
Try
{
Conn. open ();
Sqlcommand cmd = new sqlcommand ("select photo from employees where employeeid = '" + ID + "'", Conn );
Byte [] blob = (byte []) cmd. executescalar ();
Stream. Write (blob, 78, blob. Length-78 );
Bm = new Bitmap (Stream );
Int width = 48;
Int Height = (INT) (width * (double) BM. Height/(double) BM. width ));
// Getthumbnailimage generates a thumbnail
Image = BM. getthumbnailimage (width, height, null, intptr. Zero );
Context. response. contenttype = "image/JPEG ";
Image. Save (context. response. outputstream, imageformat. JPEG );
}
Finally
{
If (image! = NULL)
Image. Dispose ();
If (BM! = NULL)
BM. Dispose ();
Stream. Close ();
Conn. Close ();
}
}
}
// Implement the member interface (system. Web. ihttphandler. isreusable)
Public bool isreusable
{
Get
{
Return true;
}
}
}
}
Summary
As an additional supplement, processrequest also uses the easy-to-use image. getthumbnailimage method of the empty frame class library to narrow the bitmap to 48 pixels in width while maintaining the aspect ratio of the image. You can use similar technologies to create a DataGrid that displays images from other databases. The basic idea is to use the template column to output a tag that references an HTTP processing handle, and include the information of the record that uniquely identifies the image in the query string. Then, the HTTP processing handle uses ADO. Net to obtain the image data bit, and uses GDI + (image device interface +) to construct the image.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
