簡介
本文將說明可供下載的全部合一架構範例。這個程式碼範例會示範如何在 ASP.NET 中使用 DataList 控制項來建立影像圖庫應用程式。您可以從下列下載圖示，以取得範例封裝。
難易度
您也可以設定在 DataList控制項來限制可以選取的縮圖影像數目的SelectedIndex屬性。若要表示選取的影像，您可以設定在 DataList控制項的樣式屬性。
如需有關如何決定何時使用DataGrid DataList ， Repeater控制項的詳細資訊，請造訪下列 MSDN 網站：
如需有關使用 ASP.NET 2.0 DataList控制項和Sqldatasource有效率的資料分頁的詳細資訊，請造訪下列 websit:
難易度
下載資訊
若要下載此程式碼範例，請按一下下列連結之一：技術概觀
您可能會發現這個影像圖庫廣泛用於許多的社交網站、 個人網站及電子商務網站。例如，您可以使用這個影像圖庫以顯示個人的網站上的個人上載的影像的程式庫。投影片放映也是常見的工具，以便在網站上顯示影像。這個程式碼範例會示範如何在 ASP.NET 中使用的DataList 」 和 「 ImageButton控制項，建立具有影像瀏覽的影像圖庫。您可以按一下Datalist控制項在網頁上顯示影像的較大的版本中的縮圖影像。這個範例程式碼會讀取影像路徑從特定目錄到FileInfo的陣列。然後， FileInfo陣列用來填入一個自訂的Datalist控制項繫結的資料表物件。這個程式碼範例也會實作一個自訂的分頁系統，以水平顯示在同一頁上的 5 個影像。下列的連結按鈕用來實作自訂的分頁系統：- 第一個
- 前一個
- 下一步
- 最後一個
您也可以設定在 DataList控制項來限制可以選取的縮圖影像數目的SelectedIndex屬性。若要表示選取的影像，您可以設定在 DataList控制項的樣式屬性。
範例概觀
這個程式碼範例包含下列三個部分：- 顯示大型影像，當使用者選取圖像控制項。
- 列出瀏覽的縮圖圖像 DataList 控制項。
- 四個連結實作導覽列的按鈕。
- 建立名為CSASPNETDataListImageGallery ，Microsoft Visual Studio 2008年中的 C# ASP.NET web 應用程式。
- 您可以將 [ DataList控制項拖曳至網頁。然後，將RepeatColumns屬性設定為5，使用下列程式碼，並將Flow屬性設定為水平：
<asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >
- 您可以使用下列的程式碼，設定 [ 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> - 您可以使用下列程式碼，將四個按鈕加入至頁面巡覽：
<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" /> - 開啟 Default.aspx.cs 的程式碼檔案。
- 匯入 System.Data 和 System.IO 命名空間到頁面，請使用下列程式碼：
using System.Data;
using System.IO; - 插入下列的程式碼，以建立兩個新的屬性，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; }
} - 插入下列程式碼，以取得影像的數目：
//return total number of images
protected int ImageCount()
{
DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
FileInfo[] fi = di.GetFiles();
return fi.GetLength(0);
} - 插入下列程式碼， 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;
} - 插入下列程式碼來處理網頁的按鈕事件：
//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;
} - 插入下列程式碼來處理影像中，按一下 [事件：
//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.NET | VBASPNETDataListImageGallery |
參考
如需有關DataList伺服器控制項的詳細資訊，請造訪下列 Microsoft 開發人員 (MSDN) 網站：如需有關如何決定何時使用DataGrid DataList ， Repeater控制項的詳細資訊，請造訪下列 MSDN 網站：
如需有關使用 ASP.NET 2.0 DataList控制項和Sqldatasource有效率的資料分頁的詳細資訊，請造訪下列 websit: