快捷導(dǎo)航

無(wú)框架 Ajax分頁(yè)(原創(chuàng))第2/2頁(yè)

更新時(shí)間：2009年08月07日 00:34:50 作者：

最近想做一個(gè)Ajax的功能，網(wǎng)上一搜幾乎全是基于某某框架的Ajax分頁(yè)，要么需給頁(yè)面加上<scriptManager></scriptManager>，要么需引入某dll，要么需使用類似于jquery的框架。

AjaxProcess.aspx

復(fù)制代碼代碼如下:

 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxProcess.aspx.cs" Inherits="AjaxDemo.AjaxPager.MyAjaxPager.AjaxProcess" %> 
<asp:Repeater ID="rptGrid" runat="server"> 
<HeaderTemplate> 
<table> 
<tr> 
<th style="border:solid 1px red;">編號(hào)</th> 
<th style="border:solid 1px red;">姓名</th> 
</tr> 
</HeaderTemplate> 
<ItemTemplate> 
<tr> 
<td style="border:solid 1px red;"><%# Eval("Id") %></td> 
<td style="border:solid 1px red;"><%# Eval("Name") %></td> 
</tr> 
</ItemTemplate> 
<FooterTemplate> 
</table> 
</FooterTemplate> 
</asp:Repeater> 

注意，這個(gè)Ajax處理頁(yè)面的aspx部分并不像往常那樣是光禿禿的，只有<% %>內(nèi)的信息，它的下面多了一個(gè)repeater控件，細(xì)心的朋友會(huì)發(fā)現(xiàn)，這個(gè)repeater控件和主頁(yè)面的repeater控件一摸一樣。就是利用這個(gè)repeater控件來(lái)生成返回的html內(nèi)容的，具體怎么做，請(qǐng)看代碼：
AjaxProcess.aspx.cs

復(fù)制代碼代碼如下:

 
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 
{ 
public class Item 
{ 
public string Id 
{ 
get; 
set; 
} 
public string Name 
{ 
get; 
set; 
} 
} 
public partial class AjaxProcess : System.Web.UI.Page 
{ 
private int PageSize 
{ 
get { return 10; } 
} 
private List<Item> GenerateData() 
{ 
List<Item> lstItems = new List<Item>(); 
for (int i = 1; i <= 1000000; i++) 
{ 
Item it = new Item(); 
it.Id = i.ToString(); 
it.Name = "zs" + i; 
lstItems.Add(it); 
} 
return lstItems; 
} 
private List<Item> GetData(int index) 
{ 
List<Item> lstItem = GenerateData(); 
List<Item> bdItem = new List<Item>(); 
int begIndex = (index - 1) * PageSize; 
int endIndex = index * PageSize; 
for (int i = begIndex; i < endIndex; i++) 
{ 
bdItem.Add(lstItem[i]); 
} 
return bdItem; 
} 
private string GetHtml(Control control) 
{ 
StringBuilder sb = new StringBuilder(); 
StringWriter writer = new StringWriter(sb); 
HtmlTextWriter writer2 = new HtmlTextWriter(writer); 
control.RenderControl(writer2); 
return sb.ToString(); 
} 
protected void Page_Load(object sender, EventArgs e) 
{ 
int index = 0; 
if (int.TryParse(Request.QueryString["index"], out index)) 
{ 
//獲取到index再進(jìn)行操作 
this.rptGrid.DataSource = this.GetData(index); 
this.rptGrid.DataBind(); 
Response.Clear(); 
string html = this.GetHtml(rptGrid); 
Response.Write(html); 
Response.End(); 
} 
} 
} 
} 

代碼相當(dāng)簡(jiǎn)單，GenerateData()方法用來(lái)生成一個(gè)DataSource，GetData(int index)方法用來(lái)讀取分頁(yè)信息。在Page_Load事件中，會(huì)首先獲取請(qǐng)求字符串中的index(頁(yè)碼)，然后利用index取得當(dāng)前頁(yè)的信息并將它綁定到repeater控件上，然后利用GetHtml()方法來(lái)獲取綁定數(shù)據(jù)后的repeater控件的html內(nèi)容，將它返回。
Ok，在主頁(yè)面的js中。

復(fù)制代碼代碼如下:

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

我們獲取返回的這段html，并將它的內(nèi)容輸出到主頁(yè)面的制定div中，到此就成功完成了一次分頁(yè)請(qǐng)求。
這是一個(gè)簡(jiǎn)單的demo，如果有需要，還可以加一些分頁(yè)等待過(guò)程中的動(dòng)畫什么的，這里就不詳述了。
以上東西希望可以幫助到有需要的朋友。

上一頁(yè)12閱讀全文

您可能感興趣的文章: