F6 Team

"用心" by puma

2008-03-16

利用DataList與PageDataSource的結合達成分頁效果,並且實作一個簡易的Gallery相本,提供點縮圖顯示大圖的功能

利用DataList與PageDataSource的結合達成分頁效果,並且實作一個簡易的Gallery相本,提供點縮圖顯示大圖的功能

此範例主要是要介紹如何時用PageDataSource來達到分頁的效果(可以結合GridView、DataList和Repeater)

也實作一個簡單的Gallery相本，提供最基本的點縮圖顯示大圖的功能....如下圖所示

首先先準備好資料庫與相關圖片，如下：

C#範例(原始碼)：

Default.aspx

01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06     <title>未命名頁面</title>
07 </head>
08 <body>
09     <form id="form1" runat="server">
10         <div>
11             <table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
12                 <tr>
13                     <td align="center">
14                         <asp:Image ID="Image1" runat="server" Width="800px" Visible="False" /><hr />
15                     </td>
16                 </tr>
17                 <tr>
18                     <td align="center">
19                         <table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
20                             <tr>
21                                 <td align="right">
22                                     <asp:HyperLink ID="lnkPrev" runat="server" ToolTip="上一頁"><</asp:HyperLink></td>
23                                 <td>
24                                     <asp:DataList ID="DataList1" runat="server" DataKeyField="id" RepeatColumns="5" RepeatDirection="Horizontal"
25                                         CellSpacing="10">
26                                         <ItemTemplate>
27                                             <asp:ImageButton ID="ImageButton1" runat="server" CommandArgument='<%# Eval("img") %>'
28                                                 ImageUrl='<%# "/Gallery/images/th/" + Eval("img") %>' OnClick="ImageButton1_Click" /><br />
29                                         </ItemTemplate>
30                                     </asp:DataList></td>
31                                 <td align="left">
32                                     <asp:HyperLink ID="lnkNext" runat="server" ToolTip="下一頁">></asp:HyperLink></td>
33                             </tr>
34                         </table>
35                         <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
36                             SelectCommand="SELECT * FROM [gallery]"></asp:SqlDataSource>
37                     </td>
38                 </tr>
39             </table>
40         </div>
41     </form>
42 </body>
43 </html>
44

Default.aspx.cs

01 using System;
02 using System.Data;
03 using System.Configuration;
04 using System.Collections;
05 using System.Web;
06 using System.Web.Security;
07 using System.Web.UI;
08 using System.Web.UI.WebControls;
09 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11
12 public partial class _Default : System.Web.UI.Page
13 {
14     protected void Page_Load(object sender, EventArgs e)
15     {
16         if (!IsPostBack)
17         {
18             InitData();
19         }
20     }
21
22     protected void InitData()
23     {
24         //利用PageDataSource來做分頁功能
25         PagedDataSource objPds = new PagedDataSource();
26         //將PageDataSource綁定SqlDataSource
27         objPds.DataSource = SqlDataSource1.Select(DataSourceSelectArguments.Empty);
28         objPds.AllowPaging = true;
29         objPds.PageSize = 3;
30         int CurPage;
31
32         //分頁參數
33         if (Request.QueryString["Page"] != null)
34         {
35             CurPage = Convert.ToInt32(Request.QueryString["Page"]);
36         }
37         else
38         {
39             CurPage = 1;
40         }
41
42         objPds.CurrentPageIndex = CurPage - 1;
43
44
45         if (!objPds.IsFirstPage)
46         {
47             lnkPrev.NavigateUrl = Request.CurrentExecutionFilePath + "?Page=" + Convert.ToString(CurPage - 1);
48         }
49
50         if (!objPds.IsLastPage)
51         {
52             lnkNext.NavigateUrl = Request.CurrentExecutionFilePath + "?Page=" + Convert.ToString(CurPage + 1);
53         }
54
55
56         //將DataList綁定PageDataSource
57         this.DataList1.DataSource = objPds;
58         this.DataList1.DataBind();
59     }
60     protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
61     {
62         ImageButton pic = sender as ImageButton;
63
64         //設定大圖為顯示
65         this.Image1.Visible = true;
66         this.Image1.ImageUrl = "/Gallery/images/" + pic.CommandArgument;
67
68
69         //標示所選取的小圖外框
70         ImageButton img;
71         for (int i = 0; i < this.DataList1.Items.Count; i++)
72         {
73             img = ((ImageButton)this.DataList1.Items[i].FindControl("ImageButton1"));
74
75             if (img.CommandArgument == pic.CommandArgument)
76             {
77                 img.BorderWidth = 5;
78                 img.BorderColor = System.Drawing.Color.Red;
79             }
80             else
81             {
82                 img.BorderWidth = 0;
83             }
84         }
85     }
86 }
87

 

原始檔案下載