ASP.NET 2.0中Gridview控件高级技巧图文教程(3)
作者:廖煜嵘 来源:天极网 时间:2007-08-07 15:46:00
三 在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;
}
程序运行后,结果如下图所示
标签:ASP.NET,Gridview,技巧,2.0
0
投稿
猜你喜欢
Python lambda表达式用法实例分析
2022-06-05 12:32:34
Python echarts实现数据可视化实例详解
2022-02-22 03:54:09
Python快速优雅的批量修改Word文档样式
2022-09-23 19:28:22
OpenCV学习方框滤波实现图像处理代码示例
2023-02-08 17:17:43
FCKeditor的几点修改小结
2023-05-15 22:13:09
Python Unittest ddt数据驱动的实现
2023-10-29 14:54:14
如何利用python和DOS获取wifi密码
2021-12-15 20:10:50
HTTP头信息总结
2022-10-06 16:09:40
python正则-re的用法详解
2022-05-19 07:50:15
sqlserver合并DataTable并排除重复数据的通用方法分享
2012-01-05 18:59:56
全局于网站整体的网页设计
2009-03-27 17:15:00
spyder常用快捷键(分享)
2021-04-01 16:18:17
python实现定时压缩指定文件夹发送邮件
2022-06-02 19:32:36
django-allauth入门学习和使用详解
2022-05-24 12:36:09
golang bad file descriptor问题的解决方法
2024-05-09 09:31:42
ASP初学者学习ASP指令
2008-10-14 17:27:00
TensorFlow实现iris数据集线性回归
2023-11-14 09:56:39
使用python模块plotdigitizer抠取论文图片中的数据实例详解
2023-07-14 01:50:52
段正淳的css笔记(5)未知图片垂直居中的方法
2007-11-01 22:06:00
使用layui 的layedit定义自己的toolbar方法
2023-08-24 16:21:43