Ajax分页功能的无框架实现方法

    最近想做一个Ajax分页功能，网上一搜几乎全是基于某某框架的Ajax分页，要么需给页面加上< scriptManager >< /scriptManager>，要么需引入某dll，要么需使用类似于jQuery的框架。使用如上方法确实可以实现Ajax分页效果，但我总觉得不够简洁，这里写一些我的简单总结。

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

    首先创建前台页面MyAjaxPager.aspx

    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyAjaxPager.aspx.cs" Inherits="AjaxDemo.AjaxPager.MyAjaxPager.MyAjaxPager" %> 
    2.  
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    4.  
    5. <html xmlns="http://www.w3.org/1999/xhtml" > 
    6. <head runat="server"> 
    7.     <title></title> 
    8.     <style  type="text/css"> 
    9.     .a{}{ height:20px; line-height:20px; border-bottom:1px solid #d8dfea; clear:both;}  
    10.     .b{}{ float:left; 30px;}  
    11.     .c{}{ float:left; 500px;}  
    12.     </style> 
    13.     <script type="text/javascript" src="http://www.cnblogs.com/JS/AjaxFunction.js"></script> 
    14.     <script 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.     </script> 
    32. </head> 
    33. <body> 
    34.     <form id="form1" runat="server"> 
    35.     <div> 
    36.             <div id="page"> 
    37.         <p align="left"> 
    38.             <a href="javascript:getData(1);">1</a> 
    39.             <a href="javascript:getData(2);">2</a> 
    40.             <a href="javascript:getData(3);">3</a> 
    41.             <a href="javascript:getData(4);">4</a> 
    42.             <a href="javascript:getData(5);">5</a> 
    43.             <a href="javascript:getData(50);">50</a> 
    44.             <a href="javascript:getData(500);">500</a> 
    45.             <a href="javascript:getData(5000);">5000</a> 
    46.             <a href="javascript:getData(50000);">50000</a> 
    47.             <a href="javascript:getData(99999);">99999</a> 
    48.         </p> 
    49.         <div id="grid"> 
    50.             <asp:Repeater ID="rptGrid" runat="server"> 
    51.                 <HeaderTemplate> 
    52.                     <table> 
    53.                         <tr> 
    54.                             <th style="border:solid 1px red;">编号</th> 
    55.                             <th style="border:solid 1px red;">姓名</th> 
    56.                         </tr> 
    57.                 </HeaderTemplate> 
    58.                 <ItemTemplate> 
    59.                     <tr> 
    60.                         <td style="border:solid 1px red;"><%# Eval("Id") %></td> 
    61.                         <td style="border:solid 1px red;"><%# Eval("Name") %></td> 
    62.                     </tr> 
    63.                 </ItemTemplate> 
    64.                 <FooterTemplate> 
    65.                     </table> 
    66.                 </FooterTemplate> 
    67.             </asp:Repeater> 
    68.         </div> 
    69.     </div> 
    70.     </div> 
    71.     </form> 
    72. </body> 
    73. </html> 

    Ajax分页功能的无框架实现的画面很简单，就是一排index地址，当点击链接后会以ajax的方式将数据绑定到下边的repeater。

    实现画面498)this.style.width=498;" height=383>

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

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

    注意，这个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<Item> GenerateData()  
    34.         {  
    35.             List<Item> lstItems = new List<Item>();  
    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<Item> GetData(int index)  
    50.         {  
    51.             List<Item> lstItem = GenerateData();  
    52.             List<Item> bdItem = new List<Item>();  
    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分页功能的内容希望可以帮助到有需要的朋友。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/liufei88866/p/1914436.html