zoukankan      html  css  js  c++  java
  • 转:在DataGrid显示图片

       

         上一篇文章说了如何把图片保存到数据库中,所以做了个例子,将图片显示在DATAGRID。前面说过了用Response.BinaryWrite()只可以显示一张图片,现在用一个DATAGRID控件,将图片显示在DATAGRID中的IMAGE控件里。(提示:下面的例子没有做分页功能)
        里面用了两个图片控件,一个是服务器端的ImageButton,另一个是客户端的Image控件。

    前台代码:

    <%@ Page language="c#" Codebehind="DataGridImage.aspx.cs" AutoEventWireup="false" Inherits="NetTest.DataGridImage" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    <HTML>
     <HEAD>
      <title>DataGridImage</title>
      <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
      <meta name="CODE_LANGUAGE" Content="C#">
      <meta name="vs_defaultClientScript" content="JavaScript">
      <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
     </HEAD>
     <body MS_POSITIONING="GridLayout">
      <form id="Form1" method="post" runat="server">
       <table align="center" border="1" width="60%">
        <TBODY>
         <tr>
          <td align="center"><font style="FONT-WEIGHT: bold; FONT-SIZE: 11pt">DataGrid中显示数据库中的图片</font></td>
         </tr>
         <tr>
          <td>
           <asp:DataGrid id="DataGrid1" runat="server" AutoGenerateColumns="False" width="100%">
            <Columns>
             <asp:TemplateColumn>
              <ItemTemplate>
               <FONT face="宋体">
                <TABLE id="Table1" cellSpacing="1" cellPadding="1" width="100%" border="0">
                 <TR>
                  <TD colspan="2"><FONT style="FONT-SIZE: 10pt">图片名称:</FONT> <FONT style="FONT-SIZE: 10pt">
                    <asp:Label id="lbImageName" runat="server" Text='<%# DataBinder.Eval(Container,"DataItem.ImageName")%>'>
                    </asp:Label></FONT></TD>
                 </TR>
                 <TR>
                  <TD><FONT style="FONT-SIZE: 10pt">图片:</FONT>
                   <asp:Image id=Imagebutton1 Width=100 Height=100 runat="server" ImageUrl='<%# "ReadImage.aspx?ImageID="+DataBinder.Eval(Container,"DataItem.ID")%>'>
                   </asp:Image>
                  </TD>
                  <td>
                   <IMG width=100 height=100 alt="" src='<%# "ReadImage.aspx?ImageID="+DataBinder.Eval(Container,"DataItem.ID")%>'">
                  </td>
                 </TR>
                </TABLE>
               </FONT>
              </ItemTemplate>
             </asp:TemplateColumn>
            </Columns>
           </asp:DataGrid></td>
         </tr>
        </TBODY>
       </table>
      </form>
     </body>
    </HTML>

    后台代码:

    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 System.Data.SqlClient;

    namespace NetTest
    {
     /// <summary>
     /// DataGridImage 的摘要说明。
     /// </summary>
     public class DataGridImage : System.Web.UI.Page
     {
      protected System.Web.UI.WebControls.DataGrid DataGrid1;
      private string str="server=localhost;uid=sa;pwd=;database=northwind";
      private void Page_Load(object sender, System.EventArgs e)
      {
       if(!IsPostBack)
       {
        FillData();
       }
      }

      #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

      private void FillData()//绑定DATAGRID
      {
       SqlConnection cn=new SqlConnection(str);
       SqlCommand cmd=new SqlCommand();
       cmd.CommandText="SELECT * from UpImage";
       cmd.Connection=cn;
       cn.Open();
       SqlDataAdapter da=new SqlDataAdapter();
       da.SelectCommand=cmd;
       DataSet ds=new DataSet();
       da.Fill(ds,"Images");
       DataGrid1.DataSource=ds.Tables["Images"];
       DataGrid1.DataBind();
       cn.Close();
      }
     }
    }

    ReadImage.aspx(根据传过来的图片的编号,取得图片。只要建一个页面就可以了,不用放置任何控件)
    后台代码:

    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 System.Data.SqlClient;
    namespace NetTest
    {
     /// <summary>
     /// ReadImage 的摘要说明。
     /// </summary>
     public class ReadImage : System.Web.UI.Page
     {
     
      private void Page_Load(object sender, System.EventArgs e)
      {
       string conn="server=localhost;uid=sa;pwd=;database=northwind";
       SqlConnection cn=new SqlConnection(conn);
       SqlCommand cmd=new SqlCommand();
       cmd.CommandText="select Image from UpImage where ID='"+this.Request["ImageID"]+"'";
       cmd.Connection=cn;
       cn.Open();
       this.Response.ContentType="image/*";
       SqlDataReader dr=cmd.ExecuteReader();
       while(dr.Read())
       {
        this.Response.BinaryWrite((byte[])dr["Image"]);
       }
       cn.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

     }
    }

  • 相关阅读:
    HDU1879 kruscal 继续畅通工程
    poj1094 拓扑 Sorting It All Out
    (转)搞ACM的你伤不起
    (转)女生应该找一个玩ACM的男生
    poj3259 bellman——ford Wormholes解绝负权问题
    poj2253 最短路 floyd Frogger
    Leetcode 42. Trapping Rain Water
    Leetcode 41. First Missing Positive
    Leetcode 4. Median of Two Sorted Arrays(二分)
    Codeforces:Good Bye 2018(题解)
  • 原文地址:https://www.cnblogs.com/oop/p/254825.html
Copyright © 2011-2022 走看看