ASP.NET入门教程 13.2.3 目录的实现[3]

操作回顾

本示例创建了一个目录该目录非常类似于Wrox United Web站点上的目录还创建了作为图像按钮的图像这将最终作为单个产品项页面的链接如果单击某个图像此时不会转到任何位置但在其他所有方面它都与示例站点相同在这个试一试部分两个控件执行这个操作如果返回到Visual Web Developer并且查看这个页面的源代码将可以看到如下代码

<asp:SqlDataSource ID=SqlDataSource runat=server ConnectionString=<%$ ConnectionStrings:WroxUnitedConnectionString %> SelectCommand=SELECT [Name] [Description] [Price] [ProductID] [PictureURL] FROM [Products]></asp:SqlDataSource>

<asp:DataList ID=DataList runat=server DataKeyField=ProductID DataSourceID=SqlDataSource

RepeatColumns= RepeatDirection=Horizontal Width=px>

<ItemTemplate>

<asp:ImageButton ID=ImageButton runat=server ImageUrl=<%# Eval(PictureURL ProductImages\thumb_{}) %> OnClick=ImageButton_Click PostBackUrl=<%# Eval(ProductID WroxShopItemaspx?ProductID={})%> /><br />

<asp:Label ID=NameLabel runat=server Text=<%# Eval(Name) %>></asp:Label><br />

<asp:Label ID=PriceLabel runat=server Text=<%# Eval(Price {:C}) %>></asp:Label>

</ItemTemplate>

</asp:DataList>

第一个控件SqIDataSourcel是作为目录来源的控件Wrox United Web站点中销售商品的详情存储在Products表中它包含允许连接到数据库的连接字符串并且也包含一个SelectCommand属性指定将从Products表中获取Name Description Price ProductID和图像URL的SQL然而SqlDataSource单独不显示任何内容它需要DataList为其实现这一点

DataList包含个控件以及正确显示目录所需的格式首先将包含的Label控件替换为具有Image按钮的PictureURL这样做是因为标签将只显示图像的文本URL例如ProductImages\Item gif如果没有该图像的话其次选择一个ImageButton代替图像因为需要产品项页面的链接不需要移动或重新创建产品图像的这个文件夹因为已经将其放置在Web站点文件夹中了需要做的只是按照如下方式引用它

Eval（PictureURL ProductImages\thumb_{}）

数据绑定表达式具有两个参数第一个是Products表中字段的名称需要将这些字段绑定到图像按钮第二个是字段自身的内容（通过{o}指示）改变第二个参数从而它指向ProductImage文件夹然后放置thumb_ 它指示不需要使用完整尺寸的图像而是针对目录使用图像的缩略图

将标签用于目录中的其他两项因为只需要显示文本但对于价格需要改变格式从而它以$的货币格式显示而不仅仅是最后改变布局使它以水平网格的格式显示商品每行中显示个商品

ASPNET 入门教程完整版

[] [] []