如何使用 DataList 控制項來建立影像圖庫

難易度

下載資訊

若要下載此程式碼範例，請按一下下列連結之一：

技術概觀

您可能會發現這個影像圖庫廣泛用於許多的社交網站、 個人網站及電子商務網站。例如，您可以使用這個影像圖庫以顯示個人的網站上的個人上載的影像的程式庫。投影片放映也是常見的工具，以便在網站上顯示影像。這個程式碼範例會示範如何在 ASP.NET 中使用的DataList 」 和 「 ImageButton控制項，建立具有影像瀏覽的影像圖庫。您可以按一下Datalist控制項在網頁上顯示影像的較大的版本中的縮圖影像。這個範例程式碼會讀取影像路徑從特定目錄到FileInfo的陣列。然後， FileInfo陣列用來填入一個自訂的Datalist控制項繫結的資料表物件。這個程式碼範例也會實作一個自訂的分頁系統，以水平顯示在同一頁上的 5 個影像。下列的連結按鈕用來實作自訂的分頁系統：

• 第一個

• 前一個

• 下一步

• 最後一個

注意我們建議使用這個方法一次載入不能超過 5 個影像。


您也可以設定在 DataList控制項來限制可以選取的縮圖影像數目的SelectedIndex屬性。若要表示選取的影像，您可以設定在 DataList控制項的樣式屬性。

範例概觀

這個程式碼範例包含下列三個部分：

• 顯示大型影像，當使用者選取圖像控制項。

• 列出瀏覽的縮圖圖像 DataList 控制項。

• 四個連結實作導覽列的按鈕。

您可以下載範例程式碼，並遵循這些步驟來建立影像圖庫中：

1. 建立名為CSASPNETDataListImageGallery ，Microsoft Visual Studio 2008年中的 C# ASP.NET web 應用程式。
   

2. 您可以將 [ DataList控制項拖曳至網頁。然後，將RepeatColumns屬性設定為5，使用下列程式碼，並將Flow屬性設定為水平：
   <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

3. 您可以使用下列的程式碼，設定 [ DataList控制項繫結至 URL] 欄位中的 [範本：
   <ItemTemplate>
   <asp:ImageButton ID="IB_tn" runat="server" ImageUrl='<%# "/Image/" + Eval("Url") %>' Width="100px" Height="100px" OnClick="IB_tn_Click" CommandArgument='<%# Container.ItemIndex %>' />
   </ItemTemplate>

4. 您可以使用下列程式碼，將四個按鈕加入至頁面巡覽：
   <asp:LinkButton ID="lbnFirstPage" Text="First" CommandName="first" OnCommand="Page_OnClick" runat="server" Width="125px" />
   <asp:LinkButton ID="lbnPrevPage" Text="Prev" CommandName="prev" OnCommand="Page_OnClick" runat="server" Width="125px" />
   <asp:LinkButton ID="lbnNextPage" Text="Next" CommandName="next" OnCommand="Page_OnClick" runat="server" Width="125px" />
   <asp:LinkButton ID="lbnLastPage" Text="Last" CommandName="last" OnCommand="Page_OnClick" runat="server" Width="125px" />

5. 開啟 Default.aspx.cs 的程式碼檔案。

6. 匯入 System.Data 和 System.IO 命名空間到頁面，請使用下列程式碼：
   using System.Data;
   using System.IO;

7. 插入下列的程式碼，以建立兩個新的屬性，Page_Index 和 Page_Count:
   //property for current page index
   public int Page_Index
   {
   get { return (int)ViewState["_Page_Index"]; }
   set { ViewState["_Page_Index"] = value; }
   }
   //property for total page count
   public int Page_Count
   {
   get { return (int)ViewState["_Page_Count"]; }
   set { ViewState["_Page_Count"] = value; }
   }

8. 插入下列程式碼，以取得影像的數目：
   //return total number of images
   protected int ImageCount()
   {
   DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
   FileInfo[] fi = di.GetFiles();
   return fi.GetLength(0);
   }

9. 插入下列程式碼， DataList控制項繫結：
   //return the data source for DataList
   protected DataTable BindGrid()
   {
   //get all image paths
   DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
   FileInfo[] fi = di.GetFiles();
   
   //save all paths to the DataTable as the data source
   DataTable dt = new DataTable();
   DataColumn dc = new DataColumn("Url", typeof(System.String));
   dt.Columns.Add(dc);
   int lastindex = 0;
   if (Page_Count == 0 || Page_Index == Page_Count - 1)
   {
   lastindex = ImageCount();
   }
   else
   {
   lastindex = Page_Index * PageSize + 5;
   }
   for (int i = Page_Index * PageSize; i < lastindex; i++)
   {
   DataRow dro = dt.NewRow();
   dro[0] = fi[i].Name;
   dt.Rows.Add(dro);
   }
   return dt;
   }

10. 插入下列程式碼來處理網頁的按鈕事件：
    //handle the navigation button event
    public void Page_OnClick(Object sender, CommandEventArgs e)
    {
    if (e.CommandName == "first")
    {
    Page_Index = 0;
    lbnFirstPage.Enabled = false;
    lbnPrevPage.Enabled = false;
    lbnNextPage.Enabled = true;
    lbnLastPage.Enabled = true;
    }
    else if (e.CommandName == "prev")
    {
    Page_Index -= 1;
    if (Page_Index == 0)
    {
    lbnFirstPage.Enabled = false;
    lbnPrevPage.Enabled = false;
    lbnNextPage.Enabled = true;
    lbnLastPage.Enabled = true;
    }
    else
    {
    lbnFirstPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    lbnNextPage.Enabled = true;
    lbnLastPage.Enabled = true;
    }
    }
    else if (e.CommandName == "next")
    {
    Page_Index += 1;
    if (Page_Index == Page_Count - 1)
    {
    lbnFirstPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    lbnNextPage.Enabled = false;
    lbnLastPage.Enabled = false;
    }
    else
    {
    lbnFirstPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    lbnNextPage.Enabled = true;
    lbnLastPage.Enabled = true;
    }
    }
    else if (e.CommandName == "last")
    {
    Page_Index = Page_Count - 1;
    lbnFirstPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    lbnNextPage.Enabled = false;
    lbnLastPage.Enabled = false;
    }
    
    DataList1.SelectedIndex = 0;
    DataList1.DataSource = BindGrid();
    DataList1.DataBind();
    Image1.ImageUrl
    = ((Image)DataList1.Items[0].FindControl("IB_tn")).ImageUrl;
    }

11. 插入下列程式碼來處理影像中，按一下 [事件：
    //handle the thumbnail image selecting event
    protected void IB_tn_Click(object sender, EventArgs e)
    {
    ImageButton ib = (ImageButton)sender;
    Image1.ImageUrl = ib.ImageUrl;
    DataList1.SelectedIndex = Convert.ToInt32(ib.CommandArgument);
    }

技術類別

• ASP.NET 2.0

• ASP.NET 3.5

• ASP.NET 4.0

語言

這個程式碼範例有下列的程式語言：

參考

如需有關DataList伺服器控制項的詳細資訊，請造訪下列 Microsoft 開發人員 (MSDN) 網站：

在 DataList 伺服器控制項的一般資訊如需有關如何決定何時使用DataGrid DataList ， Repeater控制項的詳細資訊，請造訪下列 MSDN 網站：

如何決定何時使用 DataGrid，DataList Repeater 控制項如需有關使用 ASP.NET 2.0 DataList控制項和Sqldatasource有效率的資料分頁的詳細資訊，請造訪下列 websit:

ASP.NET 2.0 DataList 控制項與 Sqldatasource 有效率的資料分頁的一般資訊

全部合一程式碼架構是什麼？

全部合一程式碼架構會顯示大部分的 Microsoft 開發技術，藉由使用不同的程式設計語言的程式碼範例。每個範例是仔細選取、 所組成，並加以記錄，以顯示其中一個常見的程式碼案例。如需有關全部合一程式碼架構的詳細資訊，請造訪下列 Microsoft 網站：

http://1code.codeplex.com

如何尋找更多的全部合一程式碼架構範例

若要尋找更多的全部合一程式碼架構範例，搜尋"kbcodefx"，以及相關的關鍵字，在 Microsoft 支援網站。或者，請造訪下列 Microsoft 網站：

全部合一程式碼架構的範例