(3)实现照片列表管理
当具有Administrator角色的用户通过批量上载或者单个上载的方式,将图片和相关信息存储到数据库后,Photos.aspx页面将自动刷新照片列表。照片列表不仅显示了相册中已有照片的缩略图,而且还提供了完成照片管理功能的"重命名"和"删除"按钮。实现以上功能涉及数据表字段显示,尤其是二进制格式图片数据,以及数据表修改和删除等内容。相关源代码如下所示。
|
<h4>此相册中的照片</h4> <p>此相册中当前有以下照片。</p> <asp:GridView ID="GridView1" runat="server" DataSourceID="ObjectDataSource1" DataKeyNames="PhotoID" CellPadding="6" EnableViewState="false" AutoGenerateColumns="False" BorderStyle="None" BorderWidth="0px" Width="420px" ShowHeader="false"> <EmptyDataRowStyle CssClass="emptydata"></EmptyDataRowStyle> <EmptyDataTemplate>当前没有照片。</EmptyDataTemplate> <Columns> <asp:TemplateField> <ItemStyle Width="50" /> <ItemTemplate> <table border="0" cellpadding="0" cellspacing="0" class="photo-frame"> <tr> <td class="topx--"></td> <td class="top-x-"></td> <td class="top--x"></td> </tr> <tr> <td class="midx--"></td> <td> <a href='Details.aspx?AlbumID=<%# Eval("AlbumID") %>&Page=<%# ((GridViewRow)Container).RowIndex %>'> <img src='../Handler.ashx?Size=S&PhotoID=<%# Eval("PhotoID") %>' class="photo_198" style="border: 2px solid white; width: 50px;" alt='缩略图,照片编号 <%# Eval("PhotoID") %>' /></a></td> <td class="mid--x"></td> </tr> <tr> <td class="botx--"></td> <td class="bot-x-"></td> <td class="bot--x"></td> </tr> </table> </ItemTemplate> </asp:TemplateField> <asp:BoundField HeaderText="Caption" DataField="Caption" /> <asp:TemplateField> <ItemStyle Width="150" /> <ItemTemplate> <div style="width: 100%; text-align: right;"> <asp:ImageButton ID="ImageButton2" runat="server" CommandName="Edit" SkinID="rename" /> <asp:ImageButton ID="ImageButton3" runat="server" CommandName="Delete" SkinID="delete" /> </div> </ItemTemplate> <EditItemTemplate> <div style="width: 100%; text-align: right;"> <asp:ImageButton ID="ImageButton4" runat="server" CommandName="Update" SkinID="save" /> <asp:ImageButton ID="ImageButton5" runat="server" CommandName="Cancel" SkinID="cancel" /> </div> </EditItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" TypeName="PhotoManager" SelectMethod="GetPhotos" InsertMethod="AddPhoto" DeleteMethod="RemovePhoto" UpdateMethod="EditPhoto"> <SelectParameters> <asp:QueryStringParameter Name="AlbumID" Type="Int32" QueryStringField="AlbumID" /> </SelectParameters> <InsertParameters> <asp:QueryStringParameter Name="AlbumID" Type="Int32" QueryStringField="AlbumID" /> </InsertParameters> </asp:ObjectDataSource> |
以上代码中主要包括一个ObjectDataSource和GridView控件。ObjectDataSource控件用于从数据源中获取数据,其中调用了来自PhotoManager类的4个方法:AddPhoto、GetPhotos、RemovePhoto和EditPhoto,同时,控件还声明了SelectParameters、InsertParameters。它们可实现数据选择、新增、更新和删除。这里需要提醒的是,AddPhoto和InsertParameters实现数据添加,这是上一小节中涉及的内容,其他成员则用于本节中的图片管理。至于PhotoManager类中的后3个方法在此就不多做说明了,它们的实现方法和思路与AddPhoto方法几乎一致。GridView控件实现数据显示,其中设置了一些模板属性,这些属性的应用为实现灵活数据显示格式提供了帮助。
可能读者比较关心如何显示存储在数据库中的二进制照片数据的问题。显示这些数据直接使用GridView控件是不能完成的,因为GridView控件主要用于显示可转换为String类型的字段,而对于这种二进制格式的字段则无法显示,为此程序采用了如下方式解决这个问题。
<a href='Details.aspx?AlbumID=<%# Eval("AlbumID") %>&Page=<%# ((GridViewRow)Container).RowIndex %>'> <img src='../Handler.ashx?Size=S&PhotoID=<%# Eval("PhotoID") %>' class="photo_198" style="border: 2px solid white; width: 50px;" alt='缩略图,照片编号 <%# Eval("PhotoID") %>' /></a>
以上代码在GridView控件的ItemTemplate中声明,其核心是利用所获取的PhotoID字段值(PhotoID表示照片编号),通过Handler.ashx文件来实现照片缩略图显示。实际上,在PWS中,所有显示照片数据的任务都是由Handler.ashx来完成。Handler.ashx是一个HTTP处理程序文件。有关该文件的实现过程将在下文中进行详细讲解。
更多热点:Photoshop 视频教程 图片教程 开发速查手册