65.9K
CodeProject 正在变化。 阅读更多。
Home

用于 ASP.NET WebForm & MVC 的 Flexy Pager

adriancs
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.58/5 (9投票s)

2014年3月23日

公共领域

3分钟阅读

viewsIcon

31120

downloadIcon

444

用于 ASP.NET WebForm & MVC 的分页生成器。支持自定义 CSS 样式。


屏幕截图 & 示例

Content

  1. 引言
  2. Using the Code
  3. 页面 URL 格式化
  4. 简单的 CSS 自定义
  5. 历史

1. 引言

这是一个用于 ASP.NET WebForm & MVC 的分页生成器。它基本上生成一个 HTML 表格，并使用 CSS 进行样式化/着色。

2. 使用代码

C# 后台代码示例

FlexyPager fp = new FlexyPager();
fp.PageUrlFormat = "Default.aspx?page={p}";
fp.TotalRecords = 1000;
fp.TotalRecordsPerPage = 100;
fp.TotalSlots = 10;
fp.CurrentPage = 1;
fp.CssClass = "pager_simple_orange";
fp.CssClassCurrentPage = "active";
fp.FirstPageDisplayText = "First";
fp.LastPageDisplayText = "Last";

string pagerHtml = fp.GetHtml();

渲染结果示例

这是从上述代码生成的 HTML 表格

<div class="pager_simple_orange">
    <table>
        <tr>
            <td class=""><a href="Default.aspx?page=1">First</a></td>
            <td class="active"><a href="Default.aspx?page=1">1</a></td>
            <td><a href="Default.aspx?page=2">2</a></td>
            <td><a href="Default.aspx?page=3">3</a></td>
            <td><a href="Default.aspx?page=4">4</a></td>
            <td><a href="Default.aspx?page=5">5</a></td>
            <td><a href="Default.aspx?page=6">6</a></td>
            <td><a href="Default.aspx?page=7">7</a></td>
            <td><a href="Default.aspx?page=8">8</a></td>
            <td><a href="Default.aspx?page=9">9</a></td>
            <td><a href="Default.aspx?page=10">10</a></td>
            <td class=""><a href="Default.aspx?page=100">Last</a></td>
        </tr>
    </table>
</div>

您会注意到该表格被包裹在一个具有 CSS 类“pager_simple_orange”的 DIV 中。 这是 CSS 类的内容

.pager_simple_orange td{
    padding: 1px;
}

.pager_simple_orange a{
    text-decoration: none;
    font: 12px Arial;
    font-weight: normal;
    color: black;
    display: block;
    padding: 5px 10px;
    border: 1px solid #fe8c00;
    background-color: #ffd9b4;
}

.pager_simple_orange .active a, 
.pager_simple_orange a:hover{
    border: 1px solid black;
    background-color: #fe8c00;
}

2. 页面 URL 格式化

这指的是页面编号的 URL 地址（链接）。

{p} 将被页面编号替换。

示例 URL 1: http://www.mywebsite.com/product/page-1

代码

fp.PageUrlFormat = "product/page-{p}";
// or
fp.PageUrlFormat = "http://www.mywebsite.com/product/page-{p}";

示例 URL 2: http://www.mywebsite.com/searchmember.aspx?page=1

代码

fp.PageUrlFormat = "searchmember.aspx?page={p}";
// or
fp.PageUrlFormat = "http://www.mywebsite.com/searchmember.aspx?page={p}";

示例 URL 3: http://www.mywebsite.com/Search.aspx?page=1&teamid=2&locationid=3

代码

fp.PageUrlFormat = "Search.aspx?page={p}&teamid=2&locationid=3";
// or
fp.PageUrlFormat = "http://www.mywebsite.com/Search.aspx?page={p}&teamid=2&locationid=3";

如果您想重新定义生成的 URL 的格式（您有自己的公式，或者您可能想加密查询字符串），您可以修改源代码。查找这个块

private string GenerateUrl(int pageNumber)
{
    return PageUrlFormat.Replace("{p}", pageNumber.ToString());
}

并将其修改为您喜欢的样式。

4. 简单的 CSS 自定义

在这里，我将介绍此分页器的 CSS 的一些简单自定义。 分页器中有四个条目（公共字符串属性）可以插入 CSS 类

  • CssClass
  • CssClassCurrentPage
  • CssClassFirstPage
  • CssClassLastPage

让我们以这段带有 FlexyPager 的代码为例

FlexyPager fp = new FlexyPager();
fp.CssClass = "aaa";
fp.CssClassCurrentPage = "bbb";
fp.CssClassFirstPage = "ccc";
fp.CssClassLastPage = "ddd";

生成的 HTML 中类的位置（查找 aaa、bbb、ccc 和 ddd）

<div class="aaa">
    <table>
        <tr>
            <td class="ccc"><a href="Default.aspx?page=1">First</a></td>
            <td class="bbb"><a href="Default.aspx?page=1">1</a></td>
            <td><a href="Default.aspx?page=2">2</a></td>
            <td><a href="Default.aspx?page=3">3</a></td>
            <td><a href="Default.aspx?page=4">4</a></td>
            <td><a href="Default.aspx?page=5">5</a></td>
            <td class="ddd"><a href="Default.aspx?page=100">Last</a></td>
        </tr>
    </table>
</div>

现在，让我们使链接（“a”的 html 标签）变成一个按钮。 这是 CSS 的外观

a {
    text-decoration: none;
    font: 12px Arial;
    font-weight: normal;
    color: black;
    display: block;
    padding: 5px 10px;
    border: 1px solid #fe8c00;
    background-color: #ffd9b4;
}

text-decoration: none - 这将隐藏 a 的下划线（链接）

font-weight: normal - Normal，表示不要加粗文本（当然，您可以加粗）。

color: black - 文本颜色

display: block - 使链接（“a”）成为一个矩形块。 现在它变成了一个按钮。

padding: 5px 10px - 用于定义块的大小。

border - 定义边框的颜色。

background-color - 定义块的背景颜色

如果我们使用上面的 CSS 代码，它会将整个页面中的所有链接（a 的 html 标签）更改为满足此行为。 这不是我们想要的。 我们只希望分页器中的链接（“a”）表现成这样。 因此，我们需要在“a”之前添加 DIV 的 CSS 类（包装表格）-“aaa”。

然后，CSS 将如下所示

.aaa a{
    text-decoration: none;
    font: 12px Arial;
    font-weight: normal;
    color: black;
    display: block;
    padding: 5px 10px;
    border: 1px solid #fe8c00;
    background-color: #ffd9b4;
}

这一行

.aaa a

意味着：aaa 块中的所有 a 都将表现得像这样，否则不会。

对于鼠标悬停效果，将关键字 :hover 添加到特定的 CSS 类

.aaa a:hover{
    ....
    /* define some behaviour */
    ....
}

bbb 的 CSS 类表示当前活动页面。 让我们使其具有与 a:hover 相同的视觉效果。 可以通过逗号分隔多个类

.aaa a:hover, .aaa .bbb{
    ....
    /* define some behaviour */
    ....
}

对于 FirstPage 和 LastPage，您可以显示图像而不是文本。 您只需在 CSS 中定义它。 例子

C#,
// assign blank value
fp.FirstPageDisplayText = "";
fp.LastPageDisplayText = "";
CSS,
.aaa .ccc a{
    display:block;
    padding: 5px 10px;
    background-image: url('/images/leftArrow.gif');
    background-repeat: no-repeat;
    background-color: white;
}

.aaa .ddd a{
    display:block;
    padding: 5px 10px;
    background-image: url('/images/rightArrow.gif');
    background-repeat: no-repeat;
    background-color: white;
}
借助高级 CSS3 元素，您可以使分页器看起来非常漂亮和花哨。 它甚至可以动画。 演示应用程序中提供了一些现成的 CSS 示例。 您可以看看。

5. 历史记录

  • 2014年3月25日 - 细微的拼写错误更新/更正
  • 2014年3月23日 - 初始工作
© . All rights reserved.