使用DataGrid显示来自于数据库的图象

转载 2006年06月02日 14:22:00

前言

我们如何创建一个DataGrid列,显示从数据库中获得的图像?

这是一个经常被问及的关于DataGrid控件的问题,而且其他可以很容易地通过结合你已经知道的关于模板列的内容以及一点点关于HTTP处理句柄(HTTP Handler)的知识来回答。

下面使用NorthWind数据库的Employees表来在一个DataGrid中显示数据库中的图像。

代码

--- 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"></HeaderStyle>
     <Columns>
      <asp:TemplateColumn HeaderText="Photo">
       <ItemTemplate>
        <img src='<%# "GetImg.ashx?ID="+DataBinder.Eval(Container.DataItem,"EmployeeID")%>'>
       </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 的摘要说明。
 /// </summary>

 public class BindImg : System.Web.UI.Page
 {
  protected System.Web.UI.WebControls.DataGrid MyDataGrid;
 
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   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();
    }
   }
  }
  
#region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   
//
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  
/// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </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>
 /// 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生成缩略图
     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();
    }
   }
  }
  
  // 实现成员接口(System.Web.IHttpHandler.IsReusable)
  public bool IsReusable
  {
   get
   {
    return true;
   }
  }  
 }
}
 
总结

作为额外的补充,ProcessRequest还使用了空架类库的易用的Image.GetThumbnailImage方法来把位图缩小到宽度为48像素,同时保持图象的长宽比。可以使用类似的技术来创建显示来自其他数据库图象的DataGrid。基本的思想是使用模板列来输出一个引用某个HTTP处理句柄的<img>标签,并在查询字符串中包含唯一标识图片所在的记录的信息。之后,HTTP处理句柄使用ADO.NET来获取图象数据位,并使用GDI+(图象设备接口+)来构建图象。

使用DataGrid显示来自于数据库的图象

  前言 我们如何创建一个DataGrid列,显示从数据库中获得的图像? 这是一个经常被问及的关于DataGrid控件的问题,而且其他可以很容易地通过结合你已经知道的关于模板列的内容以及一点点关于HT...
  • veryhappy
  • veryhappy
  • 2004年07月27日 11:35
  • 1097

WPF连接数据库+显示数据到dataGrid

在这里我会讲述2种WPF连接到数据库的方式,也是初学WPF,希望各位别吐槽   (1)WPF支持直接用ado.net ,不像silverlight那样要通过RIA或者其他方式去连接数据库   所以...
  • ccx_john
  • ccx_john
  • 2013年12月17日 10:09
  • 1958

wpf datagrid简单显示数据

1.在XAML代码中写出固定列,绑定数据名称                                                         2.创建数据结构 3....
  • www89574622
  • www89574622
  • 2017年07月27日 14:19
  • 1204

DataGrid显示后台数据

由于这两三周都非常的忙,不仅是公司还是考研,弄得我没有了之前的节奏感。现在研考完了,公司也不忙了,写篇博客吧 。。    这篇博客很简单,主要写的是 DataGrid显示后台数据,通过这篇博客会了解到...
  • u013036092
  • u013036092
  • 2016年12月26日 21:18
  • 1077

【SSH网上商城项目实战06】基于DataGrid的数据显示

EasyUI中DataGrid以表格形式展示数据,并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富...
  • eson_15
  • eson_15
  • 2016年05月08日 15:25
  • 7529

easyUI的列表控件(datagrid)日期列不能正确显示的解决方法

一、遇见的问题         EasyUI是一套比较轻巧易用的Jquery控件,在EasyUI中,我认为,他的表格 , 做的堪称完美。但是,美中不足的是,在使用过程中遇到一个问题,它的列表控件——...
  • lu930124
  • lu930124
  • 2015年08月28日 17:10
  • 9365

Datagrid加入一列显示行号 or 自增列

在VB6中,Datagrid控件应该是初学者最喜使用的控件之一,它对数据简单绑定却又往往束缚住手脚。正确的使用的Datagrid必须首先了解它的本质。Datagrid的本质在于它从来就不是一个真正的网...
  • daisy8675
  • daisy8675
  • 2007年08月31日 16:28
  • 5044

在datagrid里面怎么把一列的显示的内容改变和数据库里不一样?比如:数据库里存的是1和0,而datagrid里某一列显示出来是“完成”或“未完成”。如果在datagrid里面这一列输入“完成”,则在数据库里存的是1。

这个东西不难,只是大家第一时间都会想到在sql语句中做文章,不过觉得不爽,解决的办法就是使用Binding.Format 事件和Binding.Parse 事件不过说实话,在我看《ado.net 技术...
  • smallmark
  • smallmark
  • 2005年01月07日 16:17
  • 1486

easyui里关于datagrid日期不能正常显示

近期,在ITOO这一块由于急着上线,于是组长将我调到了权限资源这一块,由于是半道上出家,所以和我一起的小伙伴让我调前台的bug。然后在调试前台的 bug中,遇到了一个问题,因为数据库换了,又使用了ea...
  • u013043518
  • u013043518
  • 2016年04月24日 16:08
  • 1535

[原创]使用datagrid控件显示数据

在datagrid中使用了input checkbox控件。分页的效果以下是源程序:DataGrid1.aspx页面代码: DataGrid1 ...
  • web718
  • web718
  • 2005年06月07日 13:54
  • 1409
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用DataGrid显示来自于数据库的图象
举报原因:
原因补充:

(最多只允许输入30个字)