简介
本文介绍了多功能一体框架示例，它可供下载。此代码示例演示如何在 ASP.NET 中使用 DataList 控件创建的图像库应用程序。您可以从下面的下载图标获取示例包。
难度级别
下载信息
若要下载此代码示例，请单击以下链接之一：
技术概述
您可能会发现很多社交网站、 个人网站和电子商务网站广泛用于图像库。例如，您可以使用图像库显示在个人网站上的一个个人上载图像库。幻灯片放映也是一个流行的工具，可在网站上显示的图像。此代码示例演示如何使用DataList和ImageButton控件在 ASP.NET 中创建图像库的图像导航。您可以单击Datalist控件在页上显示的图像的放大中的缩览图图像。此示例代码FileInfo数组中从特定目录读取图像的路径。然后， FileInfo数组用于填充自定义数据表对象绑定到Datalist控件。此代码示例还实现了自定义分页系统允许五个水平显示在一页上的图像。下面的链接按钮用于实现自定义分页系统：
-
第一个
-
以前
-
下一步
-
最后一次
注意：我们建议使用此方法加载一次不超过 5 个图像。
您还可以设置DataList控件来限制可以选择缩略图图像的数量的SelectedIndex属性。若要指示选定的图像后，可以设置DataList控件的SelectedStyle属性。
示例概述
此代码示例包含以下三个部分：
-
由用户选择它们时显示大图像的图像控件。
-
列出用于导航的缩略图图像 DataList 控件。
-
四个链接实现导航栏按钮。
您可以下载示例代码并按照这些步骤来创建图像库：
-
创建名为 Microsoft Visual Studio 2008 中的CSASPNETDataListImageGallery C# ASP.NET web 应用程序。
-
DataList控件拖到页中。然后，使用下面的代码将RepeatColumns属性设置为5，并将RepeatDirection属性设置为水平：
<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
语言
此代码示例有以下编程语言：
|
语言 |
项目名称 |
|---|---|
|
C# |
CSASPNETDataListImageGallery |
|
Visual Basic.NET |
VBASPNETDataListImageGallery |
参考资料
说明服务器控件的更多信息，请访问下面的 Microsoft 开发人员 (MSDN) 网站：
说明服务器控件的常规信息有关如何确定何时使用数据网格、说明和Repeater控件的详细信息，请访问下面的 MSDN 网站：
如何决定何时使用数据网格、 说明和转发器控件高效的数据页面的 ASP.NET 2.0 DataList控件和对象数据源的更多信息，请访问下面的 websit:
详细信息
多功能一体代码框架是什么？
多功能一体代码框架通过使用不同的编程语言中的代码示例显示大多数 Microsoft 开发技术。每个示例是仔细选择、 编写，并且记录下来，以显示一个通用的代码方案。多功能一体代码框架有关的详细信息，请访问下面的 Microsoft 网站：
如何找到更多的多功能一体代码框架示例
要找到更多的多功能一体框架代码示例，请搜索"kbcodefx"以及相关的关键字在 Microsoft 支持网站。或者，请访问下面的 Microsoft 网站：
快速发布免责声明
微软公司和/或其相应的供应商进行关于适用性、 可靠性或准确性的信息和相关的图形包含本文所述的任何表示。所有此类信息和相关的图形被提供"按原样"，没有任何形式的担保。微软和/或其相应的供应商特此不作出任何担保和与该信息有关的状况和相关的图形，包括所有的暗示的担保和条件的商业性、 适于特定目的，workmanlike投入、 标题和非侵权性。您明确同意，在任何情况 Microsoft 或其供应商应承担责任的任何直接、 间接、 惩罚性的偶然、 特殊、 后果性的损害赔偿或任何损害任何包括但不限于，使用中，数据的损失或利润，损失掉的或以任何方式使用或无法使用的信息和相关的图形包含本文所述，无论是基于合同、 民事侵权行为、 过失、 严格责任还是其他方式，即使 Microsoft 或其供应商的任何已连接建议赔偿的可能性。
