如何在DataGrid中显示图片

最新推荐文章于 2024-07-12 14:26:59 发布

ITFLY8

最新推荐文章于 2024-07-12 14:26:59 发布

阅读量1.5k

点赞数

分类专栏： ASP.NET 文章标签： datagrid webform dataset 数据库 image stylesheet

本文链接：https://blog.csdn.net/ITFLY8/article/details/538447

版权

ASP.NET 专栏收录该内容

212 篇文章 0 订阅

订阅专栏

<a href="#" οnclick="javascript:window.open('ProductPicShow.aspx?id=<%# DataBinder.Eval(Container.DataItem,"ProductId")%>','商品展示','')">
<img src="UpFile/<%# DataBinder.Eval(Container.DataItem, "ProductSmallPic")"%> border=0>
</a>
如何在DataGrid中显示图片

    <asp:TemplateColumn>
         <ItemStyle Width="22px"></ItemStyle>
         <ItemTemplate>
          <center>
           <img src='../Utility/UtilityPage/PictureBox.aspx?ItemCode=<%# DataBinder.Eval(Container.DataItem, "item_code") %>&CategoryCode=<%# DataBinder.Eval(Container.DataItem, "category_code") %>' width="20" height="15" id='ItemCode=<%# DataBinder.Eval(Container.DataItem, "item_code") %>&CategoryCode=<%# DataBinder.Eval(Container.DataItem, "category_code") %>' οnclick="OpenImage(id)">
          </center>
         </ItemTemplate>
        </asp:TemplateColumn>

为DataGrid添加一个TemplateColumn

其中PictureBox.aspx是一个显示图片的页面.

当点图片的时候打开一个大的窗口显示图片

    function OpenImage(strCode){
    var strUrl = "../Utility/UtilityPage/PictureBox.aspx?" + strCode;
    window.open(strUrl,'Image','width=775,height=500,resizable=yes');
   }

兼谈 DadaGrid 模板列的创建

DadaGrid 是 ASP.NET 编程中一个很重要的控件，其优良的可定制功能为提高它的表现力提供了极大的方便。除了与数据源直接绑定以外，我们还可以通过列绑定模板对 DataGrid 的列进行自定义，来按照我们设定的格式显示数据。
例如，数据表中有一个字段 f_DemoImage 用来存放图片的路径(包括图片文件名)，为了在 DataGrid 的 Cell 中显示实际的图片，我们可以定义一个模板列，然后给该列赋予字段 f_DemoImage 的值，就可以在 DataGrid 的 Cell 中显示图片。

WebForm1.aspx 文件：
<%@ Page language="c#" Codebehind="Wizard_select_template.aspx.cs" AutoEventWireup="false" Inherits="WebHatcher.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</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>
<LINK href="./styles/style.css" type=text/css rel=stylesheet >
</HEAD>

<asp:datagrid id=DataGrid1 runat="server" AutoGenerateColumns="False" Width="744px">
<Columns>
<asp:TemplateColumn>
    <ItemTemplate>
      <asp:Image id="Image1" ImageUrl='<% #DataBinder.Eval(Container,"DataItem.f_DemoImage") %>' runat="server"></asp:Image>
    </ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>

</form>
</body>
</HTML>

///WebForm1.aspx.cs 文件：
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 myDBAccess; //我的命名空间

namespace WebHatcher
{
/// <summary>
/// WebForm1 的摘要说明。
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid DataGrid1;

private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
if (Page.IsPostBack)
{ }
else
{
// 在 DataGrid 中显示数据(包括图象)：
myTableAccess oDbTable = new myTableAccess(); //myTableAccess我是定义的数据库访问类
oDbTable.sDbPath = Server.MapPath("./webhatcher.mdb");
oDbTable.sPassword = "";
oDbTable.sSQL = "select * from tabTemplate"; //tabTemplate是包含 f_DemoImage 字段的数据表
DataGrid1.DataSource = oDbTable.ReadFromTable();
DataGrid1.DataBind();
}
}

#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
}
}

//数据访问类的定义：
using System;
using System.Data;
using System.Data.OleDb;

namespace myDBAccess
{
    /// 数据库存取 namespace:
    /// 类名：myTableAccess
/// 属性：
/// sDbPath　   数据库路径（包括数据库文件名）
/// sPassword　数据库口令
/// sSQL　　　　SQL 语句

public class myTableAccess
{
//声明 3 个属性(域)：
public string sDbPath = "";
public string sPassword = "";
public string sSQL = "";

private OleDbConnection oConn;

public void OpenDB()
{
oConn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + sDbPath + ";Password=" + sPassword + ";");
oConn.Open();
}

public void CloseDB()
{oConn.Close(); }

public DataView ReadFromTable()
{
OpenDB();
OleDbDataAdapter oAdp = new OleDbDataAdapter(sSQL, oConn);
DataSet oDtSt = new DataSet();
oAdp.Fill(oDtSt, "aTable");
CloseDB();
return oDtSt.Tables["aTable"].DefaultView; //返回默认视图
}

}
}

ITFLY8

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何在DataGrid中显示图片

,商品展示,)"> border=0> 如何在DataGrid中显示图片 &CategoryCode= width="20" height="15" id=ItemCode=&CategoryCode= onclick="OpenImage(id)
复制链接

扫一扫