您的位置：首页 > 编程语言 > ASP

ASP.Net：异步请求分页示例：Handler.ashx + $.ajax() + Json + 分页处理

2012-04-05 15:53 926 查看

今天闲来无事，把项目中用到异步数据读取加分页数理的步骤方法整理成Demo；贴出示例代码供需要的同学照搬套用。也可以根据实际需要做相关处理修改；相信会给你带来一定的便利之处。这个示例用到四个文件；Default.aspx、CustomerPager.ascx、AjaxHandler.ashx、jquery.js；这四个文件相信大家一眼就晓得是干嘛用的了。就不多说了。首先先来看看Default.aspx页面前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo._Default" %>

<%@ Register Src="CustomerPager.ascx" TagName="CustomerPager" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="javascript/jQuery/jquery.js" type="text/javascript"></script>

    <script type="text/javascript">

        //1.1、刷新页面
        function refreshPage() {
            var pageIndex = $("[id$='_pagerSelector']")[0].selectedIndex;
            pageIndex = pageIndex < 0 ? 0 : pageIndex;
            refreshGrid(pageIndex);
        }

        //1.2、刷新列表
        function refreshGrid(pageIndex) {
            var ajaxPara = "pageIndex=" + pageIndex + "&pageSize=20";
            var ajaxPage = "AjaxHandler.ashx?" + ajaxPara;
            var jsonData = ajaxCall(ajaxPage, null);

            setPagerInfo(jsonData.totalCount, pageIndex);

            var grid = document.getElementById("gridData");
            if (grid.rows.length > 1) {
                for (var i = grid.rows.length - 1; i > 0; i--) {
                    grid.deleteRow(i);
                }
            }
            
            for (var i = 0; i < jsonData.list.length; i++) {
                var newRow = grid.insertRow(i + 1);
                newRow.insertCell(0).innerHTML = jsonData.list[i].id;
                newRow.insertCell(1).innerHTML = jsonData.list[i].name;
                newRow.insertCell(2).innerHTML = jsonData.list[i].age;
                newRow.insertCell(3).innerHTML = jsonData.list[i].sex;

                newRow.align = "center";                
                newRow.bgColor = (i % 2 == 0 ? "#FFFFFF" : "#C6FBFF"); //隔行背景色
            }
        }

        //1.3、异步取数据方法
        function ajaxCall(ajaxPage, jsonData) {
            var options = {
                type: "POST",
                url: ajaxPage,
                data: jsonData,
                contentType: "application/json;charset=utf-8",
                dataType: "string",
                async: false,
                success: function(response) {
                },
                error: function(msg) { alert("failed: " + msg); }
            };

            var returnText = $.ajax(options).responseText;
            var op = eval('(' + returnText + ')');
            return op;
        }

        //1.4、设置分页信息下拉框
        function setPagerInfo(totalCount, pageIndex) {
            var pagers = $("[id$='_pagerSelector']");
            
            var pagerCount = Math.ceil(parseInt(totalCount) / 20);
            //填充前，清除所有
            for (var i = pagers[0].options.length - 1; i > -1; i--) {
                pagers[0].options.remove(i);
                pagers[1].options.remove(i);
            }
            //填充项
            for (var i = 0; i < pagerCount; i++) {
                var oldLength = pagers[0].options.length;
                pagers[0].options.length = oldLength + 1;
                pagers[1].options.length = oldLength + 1;

                var option1 = new Option(i + 1, i + 1, false, true);
                pagers[0].options[oldLength] = option1;

                var option2 = new Option(i + 1, i + 1, false, true);
                pagers[1].options[oldLength] = option2;
            }

            $("#<%=CustomerPager1.ClientID %>_pagerCount").html(pagerCount);
            $("#<%=CustomerPager2.ClientID %>_pagerCount").html(pagerCount);
            //如果页数>1则显示并选中下拉框首项
            if (pagerCount > 1) {
                pagers[0].options[pageIndex].selected = true;
                pagers[1].options[pageIndex].selected = true;
                $("#<%=CustomerPager1.ClientID %>_divPage").css("visibility", "visible");
                $("#<%=CustomerPager2.ClientID %>_divPage").css("visibility", "visible");
            }
            else {
                $("#<%=CustomerPager1.ClientID %>_divPage").css("visibility", "hidden");
                $("#<%=CustomerPager2.ClientID %>_divPage").css("visibility", "hidden");
            }
        }

        //1.5、分页下拉框选择
        function pagerSelector_onchange(objPager) {
            JumpToPage(null, objPager);
        }

        //1.6、根据跳转类型跳转
        function JumpToPage(type, objThis) {
            var objPager = objThis;
            var pageIndex = 0;
            if (type != null) {
                var objPager = objThis.parentNode.childNodes[3].childNodes[0];
            }
            switch (type) {
                case "first":
                    break;
                case "prev":
                    pageIndex = (objPager.selectedIndex - 1) < 0 ? 0 : (objPager.selectedIndex - 1);
                    break;
                case "next":
                    pageIndex = (objPager.selectedIndex + 1) > (objPager.length - 1) ? objPager.length - 1 : (objPager.selectedIndex + 1);
                    break;
                case "last":
                    pageIndex = objPager.length - 1;
                    break;
                default:
                    pageIndex = objPager.selectedIndex;
                    break;
            }
            refreshGrid(pageIndex, true);
        }

        //1.7、载入数据并定时刷新数据列表
        $(document).ready(
			function() {
                refreshPage();
                setInterval("refreshPage()", 5000); //间隔五秒重新读取数据
            }
		);
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    <uc1:CustomerPager ID="CustomerPager1" runat="server" />
                </td>
            </tr>
        </table>
        <table style="width: 100%;" id="gridData" border="1" cellpadding="0" cellspacing="0">
            <tr>
                <th>
                     id
                </th>
                <th>
                     Name
                </th>
                <th>
                     Age
                </th>
                <th>
                     Sex
                </th>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <uc1:CustomerPager ID="CustomerPager2" runat="server" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

再看看CustomerPager.ascx用户控件：很简单，就是分页控件，但没有后端代码的；里面调用的js函数是在Default.aspx页面里。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CustomerPager.ascx.cs" Inherits="Demo.CustomerPager" %>
<div id="divPage" runat="server" style="float: right; padding-top: 5px; padding-bottom: 5px;">
    <table class="pager">
        <tr>
            <td style="cursor: pointer;" onclick="JumpToPage('first', this);">
                <img alt="" src="../images/pager_first.png" />
            </td>
            <td style="cursor: pointer;" onclick="JumpToPage('prev', this);">
                <img alt="" src="../images/pager_left.png" />
            </td>
            <td>
                Page
            </td>
            <td>
                <select id="pagerSelector" runat="server" onchange="pagerSelector_onchange(this);">
                </select>
            </td>
            <td>
                of
            </td>
            <td>
                <div id="pagerCount" runat="server">
                </div>
            </td>
            <td style="cursor: pointer;" onclick="JumpToPage('next', this);">
                <img alt="" src="../images/pager_right.png" />
            </td>
            <td style="cursor: pointer;" onclick="JumpToPage('last', this);">
                <img alt="" src="../images/pager_Last.png" />
            </td>
        </tr>
    </table>
</div>

再看看AjaxHandler.ashx相关处理方法：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.Services;

namespace Demo
{
    /// <summary>
    /// Summary description for $codebehindclassname$
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class AjaxHandler : IHttpHandler
    {
        private string returnJsonData = string.Empty;
        private int pageIndex = 0;
        private int pageSize = 20;

        public void ProcessRequest(HttpContext context)
        {
            GetUrlParameters(context);

            var totalCount = 0;
            var pageData = new PageData();
            pageData.list = GetTestList(out totalCount);
            pageData.totalCount = totalCount;

            var jsonObject = new JavaScriptSerializer();
            returnJsonData = jsonObject.Serialize(pageData);

            context.Response.ContentType = "application/json";
            context.Response.ContentEncoding = Encoding.UTF8;

            context.Response.Write(returnJsonData);
            context.Response.Flush();
            context.Response.End();
        }

        /// <summary>
        /// 获取参数信息
        /// </summary>
        /// <param name="context"></param>
        public void GetUrlParameters(HttpContext context)
        {
            pageIndex = Convert.ToInt32(context.Request["pageIndex"]);
            pageSize = Convert.ToInt32(context.Request["pageSize"]);
        }

        /// <summary>
        /// 获取数据列表
        /// </summary>
        /// <param name="totalCount"></param>
        /// <returns></returns>
        public List<TestEntity> GetTestList(out int totalCount)
        {
            //pageSize
            //pageIndex
            //可以根据以上这两参数值查询所需分页数据

            var startIndex = pageIndex * pageSize;
            var endedIndex = startIndex + pageSize;

            totalCount = 100;
            var testList = new List<TestEntity>();
            for (int i = startIndex; i < endedIndex; i++)
            {
                var entity = new TestEntity();
                entity.id = i.ToString();
                entity.name = "kevin" + i.ToString();
                entity.sex = "man";
                entity.age = "30";
                testList.Add(entity);
            }

            return testList;
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

    public class TestEntity
    {
        public string id { set; get; }
        public string name { set; get; }
        public string sex { set; get; }
        public string age { set; get; }
    }

    public class PageData
    {
        public List<TestEntity> list { set; get; }
        public int totalCount { set; get; }
    }
}

jquery.js这个文件就不多说了。

希望能给你的开发带来一定的便利。O(∩_∩)O~ 源码示例Demo这里下载。

Kevin.Chen

2012-04-05

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航