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

適用於: Microsoft ASP.NET 3.5

簡介


本文將說明可供下載的全部合一架構範例。這個程式碼範例會示範如何在 ASP.NET 中使用 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

語言

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


語言專案名稱
Visual C#CSASPNETDataListImageGallery
Visual Basic.NETVBASPNETDataListImageGallery

參考

如需有關DataList伺服器控制項的詳細資訊,請造訪下列 Microsoft 開發人員 (MSDN) 網站:
如需有關如何決定何時使用DataGrid DataList Repeater控制項的詳細資訊,請造訪下列 MSDN 網站:
如需有關使用 ASP.NET 2.0 DataList控制項和Sqldatasource有效率的資料分頁的詳細資訊,請造訪下列 websit:

更多的資訊


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

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

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

若要尋找更多的全部合一程式碼架構範例,搜尋"kbcodefx",以及相關的關鍵字,在 Microsoft 支援網站。或者,請造訪下列 Microsoft 網站:
快速發行的免責聲明
Microsoft 公司和/或其供應商不提供任何保證有關適用性、 可靠性或資訊和相關的圖形,此處所含的正確性。所有這類的資訊和相關的圖形會提供 「 現狀 」 不提供任何形式之擔保。Microsoft 和/或其供應商謹不擔保或條件就此資訊和相關的圖形,包括所有的默示責任擔保規定條款之適售性、 適合某特定用途,workmanlike投入比、 標題以及不侵害。您特別同意,在沒有事件應該 Microsoft 和/或其供應商對於而導致之任何直接、 間接、 代價極高,附隨性、 特殊、 衍生性損害或任何損害皆不包括但不限於,使用,資料之損失的損害或利潤,因使用或無法使用的資訊和相關的圖形,此處所述之,是否根據合約、 侵權行為、 過失、 無過失責任或其他方式,即使 Microsoft 或其供應商的任何已連接的任何方式告知損害的可能性。