<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AllShoutout.aspx.cs" Inherits="ShoutoutWallTest.AllShoutout" %>
<%@ Register Assembly="AjaxControlToolkit, Version=3.0.20820.415, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"
Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="https://www.jb51.net/Css/style.css" type="text/css" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<div>
<div>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:ObjectDataSource runat="server" SelectMethod="LoadShoutouts"
TypeName="ShoutoutWallTest.AllShoutout" DataObjectTypeName="Model.Shoutout" EnablePaging="True"
MaximumRowsParameterName="maxRows" StartRowIndexParameterName="startIndex" SelectCountMethod="CountAll"></asp:ObjectDataSource>
<div>
<asp:ListView DataSourceID="ObjectDataSource1" runat="server" ItemPlaceholderID="layoutTableTemplate"
DataKeyNames="ID" OnItemDataBound="lvShoutout_ItemDataBound">
<LayoutTemplate>
<div runat="server">
</div>
</LayoutTemplate>
<ItemTemplate>
<div>
<div>
<%#Eval("Description") %></div>
<div>
<!--Add images here-->
<asp:ListView runat="server" ItemPlaceholderID="layoutImages" DataSource='<%#Eval("Images")%>'>
<LayoutTemplate>
<div runat="server">
</div>
</LayoutTemplate>
<ItemTemplate>
<a href='Thumbnail.aspx?isthumbnail=false&basecommentid=<%#Eval("BaseCommentID").ToString() %>&imagetitle=<%#Eval("Title") %>'
target="_blank">
<img src='Thumbnail.aspx?basecommentid=<%#Eval("BaseCommentID").ToString() %>&imagetitle=<%#Eval("Title") %>'
alt="" /></a>
</ItemTemplate>
</asp:ListView>
</div>
<div>
Posted by:<%#Eval("PostedByName") %> <%#((DateTime)Eval("PostedDate")).ToShortDateString() %></div>
<div>
<asp:Button CssClass="shoutoutalllistbutton" runat="server"
Text="Edit" />
<asp:Button CssClass="shoutoutalllistbutton" runat="server"
Text="Delete" OnClientClick="return confirm('Are you sure delete it?');" />
</div>
</div>
</ItemTemplate>
</asp:ListView>
</div>
<div>
<asp:DataPager runat="server" PagedControlID="lvShoutout" PageSize="25">
<Fields>
<asp:NextPreviousPagerField ButtonType="Image" FirstPageText="Go to first page" FirstPageImageUrl="./Images/ShoutOut_ViewAll_Left.gif" ShowFirstPageButton="true" ShowNextPageButton="false"
ShowPreviousPageButton="false" />
<asp:NumericPagerField NumericButtonCssClass="shoutoutallnumericpager" ButtonType="Button" PreviousPageImageUrl="./Images/ShoutOut_ViewAll_Left.gif" NextPreviousButtonCssClass="shoutoutallnextprepager" NextPageText=">>" PreviousPageText="<<" CurrentPageLabelCssClass="shoutoutallcurrentpager" ButtonCount="5" />
<asp:NextPreviousPagerField ButtonType="Image" LastPageText="Go to last page" LastPageImageUrl="./Images/ShoutOut_ViewAll_Right.gif" ShowLastPageButton="true" ShowNextPageButton="false"
ShowPreviousPageButton="false" />
</Fields>
</asp:DataPager>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
我把数据绑定控件和分页控件都放在UploadPanel控件中，这样页面就会在不刷新的情况下执行数据绑定和分页操作。代码中使用了一个嵌套的ListView，原因是一条Shoutout记录会对应多条image记录，结合数据层的数据实体类，Shoutout class中会有一个类似于List<Image> Images的属性，所以我直接将这个属性作为了子ListView控件的数据源，它主要用于显示每条Shoutout记录中的缩略图。至于如何在页面中显示缩略图不是本文的重点，这里不做介绍了。代码中我们已经给ObjectDataSource控件指定了用于进行数据分页的参数名或方法签名，下面我们需要实现这些方法。
只有两个方法，LoadShoutouts()方法用于获取数据对象Shoutout的集合，也就是List<Shoutout>类型的返回值，事实上，该方法只需要执行数据库中用于分页的存储过程即可，这个存储过程可以同时返回数据集合和总记录条数。下面我会给出这个存储过程。CountAll()方法仅仅只返回总的记录条数。
复制代码 代码如下: