ASP.NET 2.0中Gridview控件高级技巧(三)

在gridview中使用图片

　　在asp.net 1.1中，如果要使用图片的话，需要设置templatecolumn模版列。而在asp.ne 2.0中，则提供了imagefield列可以显示gridview中的图片。下面，我们设计一个简单的相册列表，让大家了解如何在gridview中使用图片，其中，数据表的结果如下，并且已经假设用户已经上传了相片，因此着重讨论如何在gridview中显示图片

　　· PictureID-图片的序号，自动递增.

　　· Title-图片的标题

　　· DateAdded-图片上传日期

　　· PictureUrl-图片上传后的相对路径

　　接下来，我们拖拉一个gridview到IDE环境中去，设置将其与sqldatasource绑定。由于我们要在gridview中显示的是实际的图片，因此我们首先选gridview的smart tag标记，在弹出的菜单中选择"edit columns",之后将pictureurl绑定字段移除，添加一个ImageField绑定字段，并且将ImageField字段的dataimageurlfield属性设置为PictureURL字段，用来显示图片的路径，如下图所示：


　　下面是相关HTML部分的代码：

＜asp:GridView ID="GridView1" Runat="server" DataSource=’＜%# GetData() %＞’ AutoGenerateColumns="False" BorderWidth="1px" BackColor="White" CellPadding="3" BorderStyle="None" BorderColor="#CCCCCC" Font-Names="Arial"＞ ＜FooterStyle ForeColor="#000066" BackColor="White"＞＜/FooterStyle＞ ＜PagerStyle ForeColor="#000066" HorizontalAlign="Left" BackColor="White"＞＜/PagerStyle＞ ＜HeaderStyle ForeColor="White" Font-Bold="True" BackColor="#006699"＞＜/HeaderStyle＞ ＜Columns＞ ＜asp:BoundField HeaderText="Picutre ID" DataField="PictureID"＞ ＜ItemStyle HorizontalAlign="Center" VerticalAlign="Middle"＞＜/ItemStyle＞ ＜/asp:BoundField＞ ＜asp:BoundField HeaderText="Title" DataField="Title"＞＜/asp:BoundField＞ ＜asp:BoundField HeaderText="Date Added" DataField="DateAdded" DataFormatString="{0:d}"＞ ＜ItemStyle HorizontalAlign="Center"＞＜/ItemStyle＞ ＜/asp:BoundField＞ ＜asp:ImageField DataImageUrlField="PictureURL"＞＜/asp:ImageField＞ ＜/Columns＞ ＜SelectedRowStyle ForeColor="White" Font-Bold="True" BackColor="#669999"＞＜/SelectedRowStyle＞ ＜RowStyle ForeColor="#000066"＞＜/RowStyle＞ ＜/asp:GridView＞

　　我们并且通过手动编写代码的方式，创建数据表，如下代码所示：

DataTable GetData() { 　// This method creates a DataTable with four rows. Each row has the 　// following schema: 　// PictureID int 　// PictureURL string 　// Title string 　// DateAdded datetime 　DataTable dt = new DataTable(); 　// define the table’s schema 　dt.Columns.Add(new DataColumn("PictureID", typeof(int))); 　dt.Columns.Add(new DataColumn("PictureURL", typeof(string))); 　dt.Columns.Add(new DataColumn("Title", typeof(string))); 　dt.Columns.Add(new DataColumn("DateAdded", typeof(DateTime))); 　// Create the four records 　DataRow dr = dt.NewRow(); 　dr["PictureID"] = 1; 　dr["PictureURL"] = ResolveUrl("~/DisplayingImages/Images/Blue hills.jpg"); 　dr["Title"] = "Blue Hills"; 　dr["DateAdded"] = new DateTime(2005, 1, 15); 　dt.Rows.Add(dr); 　dr = dt.NewRow(); 　dr["PictureID"] = 2; 　dr["PictureURL"] = ResolveUrl("~/DisplayingImages/Images/Sunset.jpg"); 　dr["Title"] = "Sunset"; 　dr["DateAdded"] = new DateTime(2005, 1, 21); 　dt.Rows.Add(dr); 　dr = dt.NewRow(); 　dr["PictureID"] = 3; 　dr["PictureURL"] = 　ResolveUrl("~/DisplayingImages/Images/Water lilies.jpg"); 　dr["Title"] = "Water Lilies"; 　dr["DateAdded"] = new DateTime(2005, 2, 1); 　dt.Rows.Add(dr); 　dr = dt.NewRow(); 　dr["PictureID"] = 4; 　dr["PictureURL"] = ResolveUrl("~/DisplayingImages/Images/Winter.jpg"); 　dr["Title"] = "Winter"; 　dr["DateAdded"] = new DateTime(2005, 2, 18); 　dt.Rows.Add(dr); 　return dt; }

　　程序运行后，结果如下图所示

查看本文来源