Ajax分页功能的无框架实现方法
创始人
2024-04-26 08:41:08
0

开始进入Ajax分页功能的无框架实现方法的正题。

首先创建前台页面MyAjaxPager.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyAjaxPager.aspx.cs" Inherits="AjaxDemo.AjaxPager.MyAjaxPager.MyAjaxPager" %> 
  2.  
  3. > 
  4.  
  5.  xmlns="http://www.w3.org/1999/xhtml" > 
  6.  runat="server"> 
  7.      
  8.       type="text/css"> 
  9.     .a{}{ height:20px; line-height:20px; border-bottom:1px solid #d8dfea; clear:both;}  
  10.     .b{}{ float:left; width:30px;}  
  11.     .c{}{ float:left; width:500px;}  
  12.      
  13.      type="text/javascript" src="http://www.cnblogs.com/JS/AjaxFunction.js"> 
  14.      type="text/javascript"> 
  15.         var xmlHttp;  
  16.           
  17.         function getData(pIndex) {  
  18.             xmlHttp = GetXmlRequest();  
  19.             xmlHttp.onreadystatechange = ShowRepeaterData;  
  20.             xmlHttp.open("GET", "AjaxProcess.aspx?index=" + pIndex, true);  
  21.             xmlHttp.send(null);  
  22.         }  
  23.  
  24.         function ShowRepeaterData() {  
  25.             if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {  
  26.                 var gridData = xmlHttp.responseText;  
  27.                 var grid = document.getElementById("grid");  
  28.                 grid.innerHTML = gridData;  
  29.             }  
  30.         }  
  31.      
  32.  
  33.  
  34.      id="form1" runat="server"> 
  35.     
     
  36.              id="page"> 
  37.          align="left"> 
  38.              href="javascript:getData(1);">1 
  39.              href="javascript:getData(2);">2 
  40.              href="javascript:getData(3);">3 
  41.              href="javascript:getData(4);">4 
  42.              href="javascript:getData(5);">5 
  43.              href="javascript:getData(50);">50 
  44.              href="javascript:getData(500);">500 
  45.              href="javascript:getData(5000);">5000 
  46.              href="javascript:getData(50000);">50000 
  47.              href="javascript:getData(99999);">99999 
  48.         

     
  49.          id="grid"> 
  50.              ID="rptGrid" runat="server"> 
  51.                  
  52.                      
  53.                         
  54.  
  55.                              style="border:solid 1px red;">编号 
  56.                              style="border:solid 1px red;">姓名 
  57.                         
  58.  
  59.                  
  60.                  
  61.                     
  62.  
  63.                          style="border:solid 1px red;"><%# Eval("Id") %> 
  64.                          style="border:solid 1px red;"><%# Eval("Name") %> 
  65.                     
  66.  
  67.                  
  68.                  
  69.                     
  70.  
  71.                  
  72.              
  73.         
 
  •     
  •  
  •     
  •  
  •      
  •  
  •  
  • Ajax分页功能的无框架实现的画面很简单,就是一排index地址,当点击链接后会以ajax的方式将数据绑定到下边的repeater。

    实现画面

    主要功能是在处理Ajax请求的AjaxProcess.aspx页面实现的,我们来看看。

    1. AjaxProcess.aspx  
    2. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxProcess.aspx.cs" Inherits="AjaxDemo.AjaxPager.MyAjaxPager.AjaxProcess" %> 
    3.  ID="rptGrid" runat="server"> 
    4.      
    5.          
    6.             
    7.  
    8.                  style="border:solid 1px red;">编号 
    9.                  style="border:solid 1px red;">姓名 
    10.             
    11.  
    12.      
    13.      
    14.         
    15.  
    16.              style="border:solid 1px red;"><%# Eval("Id") %> 
    17.              style="border:solid 1px red;"><%# Eval("Name") %> 
    18.         
    19.  
    20.      
    21.      
    22.         
    23.  
    24.      
    25.    

    注意,这个Ajax处理页面的aspx部分并不像往常那样是光秃秃的,只有<% %>内的信息,它的下面多了一个repeater控件,细心的朋友会发现,这个repeater控件和主页面的repeater控件一摸一样。就是利用这个repeater控件来生成返回的html内容的,具体怎么做,请看代码:

    1. AjaxProcess.aspx.cs  
    2. using System;  
    3. using System.Collections.Generic;  
    4. using System.Web;  
    5. using System.Web.UI;  
    6. using System.Web.UI.WebControls;  
    7. using System.Text;  
    8. using System.IO;  
    9. namespace AjaxDemo.AjaxPager.MyAjaxPager  
    10. {  
    11.     public class Item  
    12.     {  
    13.         public string Id  
    14.         {  
    15.             get;  
    16.             set;  
    17.         }  
    18.  
    19.         public string Name  
    20.         {  
    21.             get;  
    22.             set;  
    23.         }  
    24.     }  
    25.  
    26.     public partial class AjaxProcess : System.Web.UI.Page  
    27.     {  
    28.         private int PageSize  
    29.         {  
    30.             get { return 10; }  
    31.         }  
    32.  
    33.         private List GenerateData()  
    34.         {  
    35.             List lstItems = new List();  
    36.             for (int i = 1; i <= 1000000; i++)  
    37.             {  
    38.                 Item it = new Item();  
    39.  
    40.                 it.Id = i.ToString();  
    41.                 it.Name = "zs" + i;  
    42.  
    43.                 lstItems.Add(it);  
    44.             }  
    45.  
    46.             return lstItems;  
    47.         }  
    48.  
    49.         private List GetData(int index)  
    50.         {  
    51.             List lstItem = GenerateData();  
    52.             List bdItem = new List();  
    53.  
    54.             int begIndex = (index - 1) * PageSize;  
    55.             int endIndex = index * PageSize;  
    56.  
    57.             for (int i = begIndex; i < endIndex; i++)  
    58.             {  
    59.                 bdItem.Add(lstItem[i]);  
    60.             }  
    61.  
    62.             return bdItem;  
    63.         }  
    64.  
    65.         private string GetHtml(Control control)  
    66.         {  
    67.             StringBuilder sb = new StringBuilder();  
    68.             StringWriter writer = new StringWriter(sb);  
    69.             HtmlTextWriter writer2 = new HtmlTextWriter(writer);  
    70.             control.RenderControl(writer2);  
    71.             return sb.ToString();  
    72.         }  
    73.  
    74.         protected void Page_Load(object sender, EventArgs e)  
    75.         {  
    76.             int index = 0;  
    77.             if (int.TryParse(Request.QueryString["index"], out index))  
    78.             {  
    79.                 //获取到index再进行操作  
    80.                 this.rptGrid.DataSource = this.GetData(index);  
    81.                 this.rptGrid.DataBind();  
    82.  
    83.                 Response.Clear();  
    84.                 string html = this.GetHtml(rptGrid);  
    85.                 Response.Write(html);  
    86.                 Response.End();  
    87.             }  
    88.         }  
    89.     }  

    代码相当简单,GenerateData()方法用来生成一个DataSource,GetData(int index)方法用来读取分页信息。在Page_Load事件中,会首先获取请求字符串中的index(页码),然后利用index取得当前页的信息并将它绑定到repeater控件上,然后利用GetHtml()方法来获取绑定数据后的repeater控件的html内容,将它返回。

    Ok,在主页面的js中。

    1. var gridData = xmlHttp.responseText;  
    2. var grid = document.getElementById("grid");  
    3. grid.innerHTML = gridData; 

    我们获取返回的这段html,并将它的内容输出到主页面的制定div中,到此就成功完成了一次分页请求。

    这是一个简单的demo,如果有需要,还可以加一些分页等待过程中的动画什么的,这里就不详述了。

    以上Ajax分页功能的内容希望可以帮助到有需要的朋友。

    【编辑推荐】

    1. 一套通用Ajax框架的源代码
    2. Ajax, 选择GET还是POST?
    3. 流行的AJAX框架对比:jQuery,Mootools,Dojo,Ext JS
    4. ASP.NET AJAX框架调用后台代码的基本方法
    5. 详解如何实现最基本的AJAX框架

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
    《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
    2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...