asp.net+ajax简单分页实例分析

下面是“asp.net+ajax简单分页实例分析”的完整攻略：

一、简介

本文将介绍如何使用asp.net和ajax实现简单分页。在实现分页功能的同时，还同时实现了搜索功能和动态加载数据的效果。

二、环境准备

在开始编写代码之前，需要确保以下工具和环境已经安装：

Visual Studio 2017
.NET Framework 4.5
jQuery（最好使用最新版本）

三、代码实现

1. 准备工作

首先，需要在项目中添加以下文件：

分页用户控件Pager.ascx
相应的样式文件Pager.css

接下来，编写Pager控件的代码，用于展示分页样式，并且可以通过点击页码实现页面跳转。

<div class="pager">
    <ul>
        <li>
            <a href="#" class="prev">上一页</a>
        </li>
        <asp:Repeater ID="rptPager" runat="server">
            <ItemTemplate>
                <li>
                    <a href="#" class="page" onclick="javascript:_doPostBack('<%# Container.DataItem %>', ''); return false;">
                        <%# Container.DataItem %>
                    </a>
                </li>
            </ItemTemplate>
        </asp:Repeater>
        <li>
            <a href="#" class="next">下一页</a>
        </li>
    </ul>
</div>

其次，在.aspx页面中编写分页查询的代码。以下示例是通过从数据库中获取商品信息并进行分页展示的效果。在.aspx页面中添加以下代码：

<div class="content" id="content">
    <div class="goods-list">
        <ul id="goods-list">
        </ul>
    </div>

    <div class="goods-pager">
        <asp:Literal ID="litPager" runat="server"></asp:Literal>
    </div>
</div>

2. 实现分页

通过以上准备工作，现在可以开始编写实现分页的代码了。在.aspx页面中添加以下JavaScript代码：

<script type="text/javascript">
    $(document).ready(function () {
        var pageIndex = 1;
        var pageSize = 10;
        loadData(pageIndex);

        // 点击页码查询数据
        $(document).on('click', '.pager .page', function (event) {
            event.preventDefault();
            var index = $(this).text();
            loadData(index);
            return false;
        });

        // 点击上一页查询数据
        $(document).on('click', '.pager .prev', function (event) {
            event.preventDefault();
            if (pageIndex > 1) {
                pageIndex--;
                loadData(pageIndex);
            }
            return false;
        });

        // 点击下一页查询数据
        $(document).on('click', '.pager .next', function (event) {
            event.preventDefault();
            pageIndex++;
            loadData(pageIndex);
            return false;
        });

        function loadData(pageIndex) {
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetGoodsList",
                data: '{pageIndex: ' + pageIndex + ',pageSize: ' + pageSize + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var html = '';
                    $.each(data.d, function (i, n) {
                        html += '<li><img src="' + n.ImageUrl + '" alt=""><h4>' + n.Name + '</h4><p>' + n.Description + '</p><b>￥' + n.Price + '</b></li>';
                    });
                    $('#goods-list').html(html);
                    renderPager(pageIndex, data.d[0].TotalCount, pageSize);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        }

        // 渲染分页控件
        function renderPager(currPage, totalRecords, pageSize) {
            var maxPageCount = 10; // 分页显示最多页数，默认为10页
            var pageCount = Math.ceil(totalRecords / pageSize); // 计算分页数量
            var startIndex = 1; // 起始页码
            if (currPage > maxPageCount / 2) {
                if (pageCount - currPage < maxPageCount / 2) {
                    startIndex = pageCount - maxPageCount + 1;
                } else {
                    startIndex = currPage - Math.floor(maxPageCount / 2);
                }
            }
            var endIndex = startIndex + maxPageCount - 1;
            if (endIndex > pageCount) {
                endIndex = pageCount;
            }
            var pagerHtml = '';
            for (var i = startIndex; i <= endIndex; i++) {
                if (i == currPage) {
                    pagerHtml += '<li class="active"><a href="#" class="page">' + i + '</a></li>';
                } else {
                    pagerHtml += '<li><a href="#" class="page">' + i + '</a></li>';
                }
            }
            $('.pager ul').html(pagerHtml);
        }
    });
</script>

以上代码实现了以下功能：

当页面加载完成后，会自动加载第一页的数据。
当点击分页控件中的页码、上一页、下一页时，会重新加载数据并展示。
当重新加载数据后，分页控件的页码会重新渲染。

3. 实现搜索

现在可以对商品信息进行搜索，即通过用户输入的关键字，查询包含该关键字的商品信息。在.aspx页面中添加以下代码：

<div class="search-box">
    <input type="text" placeholder="请输入关键字">
    <input type="button" value="搜索">
</div>

并在JavaScript中添加以下代码：

// 实现搜索
$(document).on('click', '.search-box input[type=button]', function (event) {
    event.preventDefault();
    pageIndex = 1;
    var keyword = $('.search-box input[type=text]').val();
    $.ajax({
        type: "POST",
        url: "Default.aspx/SearchGoodsList",
        data: '{keyword: "' + keyword + '",pageIndex: ' + pageIndex + ',pageSize: ' + pageSize + '}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            var html = '';
            $.each(data.d, function (i, n) {
                html += '<li><img src="' + n.ImageUrl + '" alt=""><h4>' + n.Name + '</h4><p>' + n.Description + '</p><b>￥' + n.Price + '</b></li>';
            });
            $('#goods-list').html(html);
            renderPager(pageIndex, data.d[0].TotalCount, pageSize);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
});

以上代码实现了搜索框的效果，当用户输入关键字并点击“搜索”按钮时，会重新加载数据并展示。

四、示例说明

以下是两个示例说明：

示例一：使用分页控件展示asp.net控件

可以通过以下代码实现使用分页控件展示asp.net控件的效果。

<%@ Register Src="~/Pager.ascx" TagPrefix="uc" TagName="Pager" %>

<%-- 使用asp.net控件展示商品列表 --%>
<asp:Repeater ID="rptGoods" runat="server">
    <ItemTemplate>
        <div>
            <img src='<%#Container.DataItem("ImageUrl") %>' />
            <h3><%#Container.DataItem("Name") %></h3>
            <p><%#Container.DataItem("Description") %></p>
            <span>￥<%#Container.DataItem("Price") %></span>
        </div>
    </ItemTemplate>
</asp:Repeater>

<%-- 使用分页控件展示分页效果 --%>
<uc:Pager ID="pager" runat="server" />

示例二：使用分页控件展示jquery渲染的商品列表

可以通过以下代码实现使用分页控件展示jquery渲染的商品列表的效果。

<div id="goods">
</div>

<div class="pager-box">
    <ul id="pager">
    </ul>
</div>

$(document).ready(function () {
    var pageSize = 10;
    getGoodsList(pageSize, 1);

    function getGoodsList(pageSize, pageIndex) {
        $.ajax({
            url: 'goodsList.json',
            dataType: 'json',
            success: function (data) {
                var html = '';
                var pageCount = Math.ceil(data.length / pageSize);
                var startIndex = (pageIndex - 1) * pageSize;
                var endIndex = startIndex + pageSize - 1;
                endIndex = endIndex >= data.length ? data.length - 1 : endIndex;
                for (var i = startIndex; i <= endIndex; i++) {
                    html += '<div>';
                    html += '<img src="' + data[i].imgUrl + '" />';
                    html += '<h3>' + data[i].name + '</h3>';
                    html += '<p>' + data[i].description + '</p>';
                    html += '<span>￥' + data[i].price.toFixed(2) + '</span>';
                    html += '</div>';
                }
                $('#goods').html(html);
                renderPager(pageIndex, pageCount);
            }
        });
    }

    function renderPager(currPage, totalPage) {
        var maxPageCount = 10;
        var startIndex = 1;
        if (currPage > maxPageCount / 2) {
            if (totalPage - currPage < maxPageCount / 2) {
                startIndex = totalPage - maxPageCount + 1;
            } else {
                startIndex = currPage - Math.floor(maxPageCount / 2);
            }
        }
        var endIndex = startIndex + maxPageCount - 1;
        if (endIndex > totalPage) {
            endIndex = totalPage;
        }
        var html = '';
        for (var i = startIndex; i <= endIndex; i++) {
            if (i == currPage) {
                html += '<li class="active"><a href="#">' + i + '</a></li>';
            } else {
                html += '<li><a href="#">' + i + '</a></li>';
            }
        }
        $('#pager').html(html);
    }

    $(document).on('click', '#pager li a', function (event) {
        event.preventDefault();
        getGoodsList(pageSize, $(this).text());
        return false;
    });
});

以上代码实现了通过ajax请求将数据展示在页面上，并且控制分页的思路。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：asp.net+ajax简单分页实例分析 - Python技术站