如何使用 DataList 控件来创建图像库

难度级别

下载信息

若要下载此代码示例，请单击以下链接之一：

技术概述

您可能会发现很多社交网站、 个人网站和电子商务网站广泛用于图像库。例如，您可以使用图像库显示在个人网站上的一个个人上载图像库。幻灯片放映也是一个流行的工具，可在网站上显示的图像。此代码示例演示如何使用DataList和ImageButton控件在 ASP.NET 中创建图像库的图像导航。您可以单击Datalist控件在页上显示的图像的放大中的缩览图图像。此示例代码FileInfo数组中从特定目录读取图像的路径。然后， FileInfo数组用于填充自定义数据表对象绑定到Datalist控件。此代码示例还实现了自定义分页系统允许五个水平显示在一页上的图像。下面的链接按钮用于实现自定义分页系统：

• 第一个

• 以前

• 下一步

• 最后一次

注意：我们建议使用此方法加载一次不超过 5 个图像。


您还可以设置DataList控件来限制可以选择缩略图图像的数量的SelectedIndex属性。若要指示选定的图像后，可以设置DataList控件的SelectedStyle属性。

示例概述

此代码示例包含以下三个部分：

• 由用户选择它们时显示大图像的图像控件。

• 列出用于导航的缩略图图像 DataList 控件。

• 四个链接实现导航栏按钮。

您可以下载示例代码并按照这些步骤来创建图像库：

1. 创建名为 Microsoft Visual Studio 2008 中的CSASPNETDataListImageGallery C# ASP.NET web 应用程序。
   

2. DataList控件拖到页中。然后，使用下面的代码将RepeatColumns属性设置为5，并将RepeatDirection属性设置为水平：
   <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

语言

此代码示例有以下编程语言：

参考资料

说明服务器控件的更多信息，请访问下面的 Microsoft 开发人员 (MSDN) 网站：

说明服务器控件的常规信息有关如何确定何时使用数据网格、说明和Repeater控件的详细信息，请访问下面的 MSDN 网站：

如何决定何时使用数据网格、 说明和转发器控件高效的数据页面的 ASP.NET 2.0 DataList控件和对象数据源的更多信息，请访问下面的 websit:

有关使用 ASP.NET 2.0 DataList 控件和对象数据源的高效的数据分页的一般信息

多功能一体代码框架是什么？

多功能一体代码框架通过使用不同的编程语言中的代码示例显示大多数 Microsoft 开发技术。每个示例是仔细选择、 编写，并且记录下来，以显示一个通用的代码方案。多功能一体代码框架有关的详细信息，请访问下面的 Microsoft 网站：

http://1code.codeplex.com

如何找到更多的多功能一体代码框架示例

要找到更多的多功能一体框架代码示例，请搜索"kbcodefx"以及相关的关键字在 Microsoft 支持网站。或者，请访问下面的 Microsoft 网站：

多功能一体代码框架示例