类似 Amazon 的分页器

• 下载源代码 - 31.4 KB

节

• 引言
• 概述
• 背景
• Using the Code
• 寻呼器可浏览属性
• 本地化资源
• 关注点
• 控件基类
• 快捷键
• CSS 和 Enabled = false
• 结论
• 历史

引言

现在有很多寻呼器控件。然而，我还没有找到任何可以自由选择使用回发或纯超链接的控件。这个控件的诞生源于我希望分页功能在某个页面使用传统的ASP.NET回发模型，而在另一个页面使用URL重写和缓存。我还想要分块的页面范围，类似于Amazon.com上的分页。这是我在CodeProject上的第一篇文章。

概述

• C# 2.0 用户控件。
• 适用于 IE 6 和 Firefox。尚未与其他浏览器进行测试。
• 选择 LinkButton 或 Hyperlink 渲染。
• LinkButton 模式允许在回发期间取消页面更改。
• 支持单个页面上的多个寻呼器。
• 使用 ASP.NET AJAX UpdatePanel 时支持跳转到命名锚点。
• 支持超链接中 URL 的字符串格式化（URL 重写友好）。
• 可使用 CSS 自定义。

背景

过去，我认为 ASP.NET 倾向于快速开发而非可维护性。我之所以提到这一点，是因为最近，微软似乎正在向一种较少依赖 ViewState/Postback 的模型转变。这种转变是否会淘汰许多依赖 Postback 的控件还有待观察。这个寻呼器在两种情况下都能很好地工作：Postback 和非 Postback。顺便说一句，我很失望地发现 WF 与 ASP.NET 配合不佳。如果不进行破解，后退按钮会破坏它（有没有人知道 UIPAB？）。这会不会是鼓励转向 WPF 的一个缺失功能/缺陷呢？谁知道呢...

像许多人一样，我花了很多时间与自动魔法控件作斗争；试图让它们听从我的意愿。我经常发现，通过使用 Repeater 而不是 GridView，我能够更快地获得我想要的结果。考虑到这一点，这个控件只是用户界面。我的意思是，我没有在这个寻呼器中内置任何功能来允许它进行数据绑定，或者与像 GridView 这样的数据绑定控件耦合。但是，它很容易与数据绑定控件一起使用。

使用代码

1. 将 PagerControl 的文件从提供的 Web 应用程序项目复制到您自己的 Web 应用程序项目。相关文件是 DemoWebsite 项目的 Controls 子目录中包含的文件，如下图所示



2. 打开或创建一个您希望放置寻呼器的 WebForm，然后将 PagerControl.ascx 拖放到页面设计界面上。这将添加一个类似于下面所示的控件源标记

<%@ Register Src="Controls/PagerControl/PagerControl.ascx" 
    TagName="PagerControl" TagPrefix="uc1" %>

一个 PagerControl 元素将被添加到你的 WebForm 中，如下所示

<uc1:PagerControl ID="PagerControl1" runat="server" />

3. 在代码隐藏中设置 PagerControl 实例的 ItemCount 和 ItemsPerPage 属性。通常，这将在数据绑定或从数据源读取数据时完成。

PagerControl1.ItemsPerPage = itemsPerPage;
PagerControl1.ItemCount = itemCount;

另外，如果您希望将寻呼器与 GridView 一起使用，只需在页面 Load 处理程序中为其分配一个 DataControlAdapter。下载中的 GridViewDemo.aspx 中有一个关于如何执行此操作的示例。完成此操作后，寻呼器将愉快地与 GridView 实例同步。

PagerControl1.DataControlAdapter = 
   new DataControlAdapter(gridView, itemCount);

4. 如果在 LinkButton 模式下（默认模式）使用 PagerControl，请为 PageChanged 事件创建一个事件处理程序，如以下代码示例所示

protected void PagerControl1_OnPageChanging(object sender, PageChangeEventArgs e)
{
    int dataIndex = e.PageIndex * PagerControl1.ItemsPerPage;
    Repeater_DummyData.DataSource = 
      /* Get data using dataIndex and PagerControl1.ItemsPerPage*/

    Repeater_DummyData.DataBind();
}

然后，将其连接到 WebForm 上的 PagerControl 实例，如下所示

<uc1:PagerControl id="PagerControl1" 
   runat="server" OnPageChanging="PagerControl1_OnPageChanging">

5. 要在 Hyperlink 模式下使用 PagerControl，请在设计器中设置 PagerControl 实例的 Mode 属性。如果未在设计器中设置 UrlFormat 属性，则页面索引将作为名为 Page 的参数在查询字符串中传递。PagerControl 会跟踪当前页面索引。我们只需加载并绑定正确的数据到，例如，Repeater。有关 UrlFormat 属性及其如何与 URL 重写一起使用的更多信息，请参阅寻呼器属性。

注意：如果 ItemCount 属性小于 1，则控件将不可见。

寻呼器可浏览属性

为简单起见，我试图限制寻呼器可浏览属性的数量。毕竟，它是一个用户控件，复制到项目后可以直接进行自定义。

• Anchor：当处于 LinkButton 模式时，将导致页面跳转到锚点的锚点。此属性旨在当控件位于 AJAX UpdatePanel 中时使用。
• Mode：获取或设置 PagerControl 的显示方式。如果模式为 LinkButton，则寻呼器将使用回发来指示页面已更改。当使用 Hyperlink 时，所有导航将通过超链接完成，并且 PageChanged 事件将不会触发。
• UrlFormat：链接 URL 格式。示例值为 http://www.example.com/Catalog/Products/{0}，其中格式 {0} 参数将替换为页面索引值。如果未设置此值，它将被定义为

UrlFormat = string.Format("{0}?Page={{0}}", Request.Url.AbsolutePath);

其中当前页面索引将作为名为 Page 的 QueryString 参数传递。

本地化资源

PagerControl 使用全局资源文件 Site.resx。我倾向于这样进行本地化。我发现为页面或控件创建本地资源文件最终会变得更难以管理。下图显示了可以自定义/本地化的文本值。

值得关注的点

控件基类

PagerControl 类扩展了 UserControlBase。UserControlBase 提供了一些辅助方法，例如用于从 ViewState 和 Request QueryString 实例中检索值。正如你将看到的，其中许多方法都被重载了。如果 PagerControl 的依赖不符合你当前的类层次结构，你可以选择删除它对基类的依赖。以下是其中一个方法的示例

public int GetViewStateValue(string stateKey, int defaultValue)
{
    object stateValue = ViewState[stateKey];
    int result;
    if (stateValue == null)
    {
        result = defaultValue;
    }
    else

    {
        result = int.Parse(stateValue.ToString());
    }
    return result;
}

快捷键

我非常想为“下一页”和“上一页”导航添加一些页面快捷方式。不幸的是，元素的 AccessKey 属性效果不佳。至少在我使用 IE 6 和 FF 2 时是这样的。我们将把 JavaScript 解决方案留待以后的迭代。目前，“下一页”和“上一页”分别分配了 AccessKeys 2 和 1。

CSS 和 Enabled = false

在 IE 和 Firefox 中测试控件时，我很快意识到当使用 disabled 属性时，这两种浏览器显示锚点的方式不同。事实证明，IE 在链接禁用时会忽略某些样式，例如 color。而 Firefox 则不会。因此，有必要为禁用链接创建一种样式。

a.PagerDisabled
{
    border:none;

    color:Gray;
    background: transparent;
    padding:6px;

}

结论

希望您觉得这个控件有用。如果觉得有用，请评分和/或在下方留言。

历史

• 2007 年 10 月
• 首次发布。
• 2007 年 12 月
• 添加了 GridView 支持。
• 页面范围逻辑改进。