无框架Ajax分页(原创)

最近想做一个Ajax的功能，网上一搜几乎全是基于某某框架的Ajax分页，要么需给页面加上<scriptManager></scriptManager>，要么需引入某dll，要么需使用类似于jquery的框架。使用如上方法确实可以实现Ajax分页效果，但我总觉得不够简洁，研究了一下午，终于捣鼓出了点东西O_o

不废话了，开始正题。

首先创建前台页面MyAjaxPager.aspx

   

画面很简单，就是一排index地址，当点击链接后会以ajax的方式将数据绑定到下边的repeater。

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

AjaxProcess.aspx

   

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

AjaxProcess.aspx.cs

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.IO;

namespace AjaxDemo.AjaxPager.MyAjaxPager
   

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

Ok，在主页面的js中。

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

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

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

以上东西希望可以帮助到有需要的朋友。