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.     }  
    90. } 

    代码相当简单,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框架

    相关内容

    热门资讯

    PHP新手之PHP入门 PHP是一种易于学习和使用的服务器端脚本语言。只需要很少的编程知识你就能使用PHP建立一个真正交互的...
    网络中立的未来 网络中立性是什... 《牛津词典》中对“网络中立”的解释是“电信运营商应秉持的一种原则,即不考虑来源地提供所有内容和应用的...
    各种千兆交换机的数据接口类型详... 千兆交换机有很多值得学习的地方,这里我们主要介绍各种千兆交换机的数据接口类型,作为局域网的主要连接设...
    粉嫩如何诠释霸道 东芝M805... “霸道粉”是个什么玩意东芝M805拿过来的时候,笔者扑哧笑了,不是笑这款笔记本,而是笑这款产品的颜色...
    什么是大数据安全 什么是大数据... 在《为什么需要大数据安全分析》一文中,我们已经阐述了一个重要观点,即:安全要素信息呈现出大数据的特征...
    如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    全面诠释网络负载均衡 负载均衡的出现大大缓解了服务器的压力,更是有效的利用了资源,提高了效率。那么我们现在来说一下网络负载...
    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
    30分钟搞定iOS自定义相机 最近公司的项目中用到了相机,由于不用系统的相机,UI给的相机切图,必须自定义才可以。就花时间简单研究...
    Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...